PWAs no iOS 15: melhorias? [iOS 15.4 atualizado]

A Apple afirma que o iOS 15 oferece uma maneira melhor de se manter conectado, focar e explorar com sua lista significativa de novos recursos. No entanto, existe algo que possa facilitar a vida de um desenvolvedor de PWA? Vamos explorar todas as maiores mudanças, as decepções, juntamente com algumas notícias interessantes neste artigo.

Todas as melhorias para PWA

[iOS 15.4] Pré-carregamento de navegação para Service Worker

O iOS 15.4 lança algumas novas melhorias para os Service Workers, incluindo o pré-carregamento de navegação e mais suporte para arquivos gerados pelo Service Worker.

Em alguns casos, a inicialização do service worker pode aumentar o tempo de resposta da rede. O pré-carregamento de navegação solicita as solicitações de rede durante o tempo de inicialização do service worker, o que deve ajudar no desempenho do PWA.

[iOS 15.4] Manifesto de aplicativo da Web aprimorado: ícones e muito mais

Boas notícias! Após uma longa espera, os desenvolvedores de PWA podem finalmente implementar o aplicativo da Web no iOS 15.4 com um ícone adequado. Se não houver um ícone de toque de maçã definido no arquivo do aplicativo Web, o ícone do manifesto do aplicativo Web será definido por padrão.

No entanto, o suporte ainda não é perfeito. Ainda existem alguns pequenos bugs que afetam a experiência tanto para usuários quanto para desenvolvedores, como:

• A forma e o formato dos ícones são limitados apenas ao PNG quadrado.
• Os ícones são redimensionados automaticamente se não corresponderem aos tamanhos predefinidos do iOS (Ipads – 152 x 152 e 167 x 167, iPhones – 120 × 120 e 180 x 180)
• Os ícones não aparecem quando você abre a planilha de compartilhamento, mas eventualmente aparecem quando você escolhe Adicionar à tela inicial.
• Ícones transparentes terão um fundo preto ou branco.

Além disso, nas versões anteriores, o Web App Manifest só é buscado quando os usuários optam por “ Adicionar à tela inicial ”. Para iOS 15.4, o arquivo agora é analisado e carregado quando a página já carrega. Como resultado, você pode aplicar a cor do tema diretamente no carregamento da página, o que torna os PWAs mais confiáveis.

[iOS15.4] Notificações por push da Web

Ao escrever um artigo para o PWA iOS 15 no ano passado, compartilhamos algumas evidências sobre como as notificações push da Web podem estar chegando e adivinhem, finalmente acontece.

Assim como os ícones de manifesto do aplicativo da Web, ainda existem alguns inconvenientes relacionados ao web push. Por exemplo, ele está desabilitado por padrão, então as pessoas devem conhecê-lo primeiro para usá-lo. Além disso, alguns desenvolvedores de PWA acham impossível usar a API Web Push para solicitar permissões de notificação, embora existam opções para isso.

No entanto, é uma notícia que vale a pena comemorar. O que é melhor? O Web Kit anunciou o suporte para Web Push no Safari 16 no macOS Ventura. De acordo com a provocação, o Web Push pode estar disponível no iOS e iPadOS em 2023.

Cor do tema suportada

Enquanto o status de suporte para o manifesto do aplicativo da Web ainda é "Suporte parcial", o Safari 15 agora habilitou oficialmente a cor do tema em meta tags HTML e Web Manifest . Portanto, agora você pode fazer alterações nas cores na barra de status e na área de overscroll , que também podem ser aplicadas para a barra de guias e as cores de fundo de overscroll no layout de guia compacta do Safari 15 no Ipad OS 15, Big Sur e MacOS Monterey .

Além disso, usando o atributo de mídia, você também pode ativar um modo escuro/claro para seu Progressive Web App no ​​Safari 15.

 <meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">

WebGL aprimorado (Biblioteca de gráficos da Web) e API de compartilhamento da Web

O iOS 15 testemunha uma atualização do WebGL 1 para o WebGL2. O WebGL 2 provou ser um aprimoramento significativo que é muito mais rápido, oferece muito mais textura do que o WebGL, além de muitos outros benefícios.

Além disso, o Safari 15 inclui suporte para Web Share nível 2, que abre caminho para que os desenvolvedores troquem efetivamente arquivos do navegador para aplicativos com o diálogo de compartilhamento nativo. Atualmente, ele suporta imagem, vídeo, áudio, arquivo de texto e muito mais.

Essa mudança, por exemplo, permite que os usuários compartilhem imagens diretamente das páginas do PWA em seus aplicativos do Twitter sem etapas extras de salvar fotos na biblioteca e reenviar.

Melhor API de sessão de mídia

A API de sessão de mídia oferece mais controles de dados e reprodução, portanto, eleva a experiência de mídia a um nível superior. A partir do iOS 15, os usuários podem acessar o cartão NOW PLAY na Central de Controle , na Tela de Bloqueio e na barra de menus do MacOS Monterey e controlar algumas opções simples de reprodução. Além disso, a nova Media Session traz a experiência SharePlay , que permite assistir filmes, ouvir música com seus amigos via Facetime. Isso pode ser uma boa notícia para aplicativos de podcast baseados na web.

Suporte de áudio WebM para Safari, suporte WebM/VP9 para Ipad

O WebM é uma tecnologia de streaming de vídeo na Web livre de royalties de código aberto. Após a introdução da imagem WebM no iOS 14, a Apple agora suporta contêineres WebM de codec de áudio Opus no Safari 15. Além disso, os usuários agora podem transmitir vídeos WebM/VP9 no IpadOS15.

Esta atualização promete suporte completo para WebM em um futuro próximo e podemos esperar que o vídeo WebM esteja disponível no Safari móvel em breve. Como resultado, os proprietários de PWA terão mais opções para exibir sua mídia de vídeo para oferecer melhores experiências ao usuário.

Suporte para módulo ES6 no Service Worker

O ES6 marca o primeiro módulo integrado de JavaScript, fornece uma estrutura sólida que é fácil de trabalhar, manter, dimensionar e encapsular comportamentos. Com o novo Módulo ES6 chegando ao Service Worker, agora os desenvolvedores podem melhorar o desempenho e habilitar o acesso offline para iOS PWA de uma forma mais organizada. Como resultado, é fácil dimensionar rapidamente e aumentar as funcionalidades do PWA para atender às demandas do mercado quando necessário.

Multitarefa mais simples para iPad

O iOS 15 fez algumas melhorias para uma experiência multitarefa mais intuitiva no iPad, mantendo o que funcionou antes. Por exemplo, há uma nova guia de três pequenos pontos representando o menu multitarefa na parte superior da tela que tornará o aplicativo em tela cheia, tela dividida ou deslizará. Além disso, uma janela centralizada flutuante é introduzida no SplitScreen, onde você pode abrir uma janela na parte superior de seus aplicativos de tela dividida e enviá-la para Slider Over, Split View ou Full Screen.

Além disso, um novo atalho de teclado e uma nova interface de usuário multitarefa que visualiza todos os aplicativos (incluindo os do Slide Over) merecem uma menção rápida.

Até agora, parece que a nova atualização no Ipad multitarefa para Web e PWA recebeu feedback positivo por ser muito mais amigável do que o iOS 14.

Novo App Clip – Outra atualização notável

Mencionamos o App Clip em nosso encerramento do PWA iOS 14 como algo esperado para PWAs instaláveis ​​semelhantes ao Android. Então, como está agora?

O App Clip agora pode ser integrado a sites, como resultado, exibido no Safari. O cartão permite que os usuários concluam suas tarefas iniciais, como pedir comida, alugar uma bicicleta e, em seguida, solicita que instalem aplicativos nativos na App Store. A nova mudança corta algumas etapas extras do iOS 14 para descobrir os clipes de aplicativos na página da Web e aplicativos de terceiros.

Infelizmente, ainda não há banners de instalação do PWA. A Apple tornará os clipes de aplicativos compatíveis com PWA? Ou eles estão tentando criar uma versão própria do PWA? Ou talvez clipes de aplicativos e PWAs simplesmente não se relacionem? A resposta ainda está no futuro.

Nenhuma limitação importante é abordada

Os novos lançamentos do iOS 15 certamente trazem algumas decepções para os desenvolvimentos do PWA, pois, evidentemente, o que estamos procurando ainda está fora da mesa. Ainda é muito trabalhoso implementar o PWA no iOS 15 sem a disponibilidade desses recursos:

• Sincronização em segundo plano
• Web Push
• Antes de instalar o prompt e o banner de instalação
• Áudio de fundo para PWAs

Além disso, também não há correção para alguns pontos ruins que mencionamos no artigo do iOS 14.

• Nenhum ícone de PWA na biblioteca de aplicativos
• Não há muitas alterações no suporte ao manifesto do aplicativo da Web (além das cores do tema)
• A barra de status ainda é black e black-translucent apenas em preto.
• Grande restrição de recursos em outros navegadores da web

Leve embora

Lá você tem tudo que o iOS15 tem para PWA. Embora a maioria das alterações na versão 15 sejam pequenas, o iOS 15.4 com Web Push e mais suporte para Web App Manifest abre um futuro melhor para o PWA no iOS. Com a versão beta do iOS 16 lançada em setembro de 2022, esperemos que venham algumas mudanças mais significativas.