No KDPV - um adesivo criado pela equipe do navegador de Internet da Samsung
Mais de 12 anos se passaram desde que Steve Jobs introduziu a idéia de aplicativos da Web ", que parecem e se comportam exatamente como aplicativos nativos" . Mais de 4 anos se passaram desde o advento do termo "PWA" . O que são aplicativos da web progressivos no início de 2020? De quais das coisas que foram adicionadas ao ecossistema em 2019 você sentiu falta? Vamos descobrir.
Nota tradutor: screenshots de tweets - clicáveis
No ano passado, realizei vários seminários e apresentações atualizados sobre a PWA, alguns dos quais estão disponíveis em registro . Se você é um assinante do Pluralsight, consulte o curso PWA: The Big Picture e, se você é um assinante do O'Reilly Learning, em seguida, Caminho de Aprendizagem Básica do Desempenho da Web . Se você deseja receber notificações por e-mail das minhas novas postagens, inscreva-se aqui .
Se você estiver interessado em um workshop ou consulta para sua empresa ou conferência, entre em contato comigo .
Definição de
A definição de PWA nunca foi esculpida em pedra e pode diferir de autor para autor. Eu, na época de 2020, diria que o PWA é um padrão de design para o desenvolvimento de aplicativos baseados na Web usando APIs, como Service Workers para gerenciamento de recursos, Web App Manifest para instalação via navegador, Trusted Web Activity para distribuição através de Play Store e outros.
Folha de dicas modernas do PWA do meu discurso no JSConf Europe 2019
Use
É difícil obter informações sobre quantas empresas criam PWAs ou como os usuários reagem a elas em termos de instalação. Em 2019, eu realmente não senti o aumento no número de empresas que usam o PWA, ou usuários mudando ativamente para eles. Existem alguns nichos, como pessoas que se preocupam com sua privacidade removendo aplicativos nativos, mas essa é uma pequena parte do mercado.
Em 2019, vimos a transição para o PWA de um dos sites mais visitados no mundo: YouPorn, mas não temos informações sobre o uso da versão do PWA. Você pode ler sobre o YP PWA aqui (nenhum link pornô, abra silenciosamente).
Um dos sites mais visitados no mundo agora é um aplicativo da web progressivo.
O que há de novo (para desenvolvedores, proprietários de sites e usuários) é que o PWA agora pode ser instalado na área de trabalho de um computador. Ainda não vi PWAs otimizados para desktops suficientes, mas a partir de 2020, a Microsoft começará a promover seu novo Edge, e podemos ver progressos nisso. Durante 2019, a Starbucks e a Uber reservaram um tempo para conversar sobre seus PWAs em execução em um computador desktop, por exemplo, no artigo Construindo um fluxo de reservas mais uniforme para o Uber .
O Produck é um dos primeiros computadores PWA otimizados para desktop que encontrei no início de 2019.
Os únicos dados recentes que temos sobre o PWA são os do navegador de Internet Samsung:
O poder do WebAPK na @samsunginternet: mais de 20 milhões de instalações de aplicativos Web progressivos com 80.000 domínios este ano. Bastante impressionante.
Assim, entre abril e dezembro de 2019, temos 80.000 domínios diferentes, com pelo menos um PWA dentro; embora este não seja o número exato de PWAs diferentes, é uma boa aproximação. A Internet da Samsung representa cerca de 6% de todos os usuários; portanto, um grande número de pessoas considera esse valor representativo de toda a web.
Você pode dizer que, em comparação com 2,9 milhões de aplicativos na Play Store ou 3,9 milhões de aplicativos na App Store, isso não é tão bom. Mas, ao mesmo tempo, não sabemos quantos desses milhões de aplicativos nos últimos 9 meses foram instalados pelo menos uma vez, portanto, a comparação, em qualquer caso, não será justa. Além disso, como temos informações sobre domínios, e não sobre PWAs diferentes, seria bom comparar 80.000 com o número de editores diferentes nas lojas, que são cerca de 800.000 na Play Store e 792.000 na AppStore. Considerando esses números, podemos dizer que o PWA é de 10% em relação aos aplicativos nativos. Mas devemos lembrar que 80% dos novos downloads de lojas vêm de apenas 1% dos editores . E agora, com o advento do PWA na Google Play Store, a comparação se tornará ainda mais complicada.
Aplicativos da web progressivos são totalmente suportados (incluindo trabalhadores em serviço) nos navegadores por 93% dos usuários da Internet .
O PWA pode ser instalado em 86% dos usuários (82% - no navegador, 4% - apenas em lojas de aplicativos e não nos navegadores existentes).
Podemos instalar o PWA no Android, iOS, iPadOS, Windows 10 ( e futuro 10X), Windows 7, Windows 8.x, Xbox One, macOS, Linux (64 bits), Chrome OS e kaiOS .
Você pode mencionar que o PWA não pode ser instalado em relógios inteligentes, TVs inteligentes, Apple TV, Chromecast, Android TV, PlayStation, carros Tesla (sim, essas máquinas possuem um navegador), outros consoles de jogos, assistentes digitais (como o Facebook Portal, Nest Home) ou Amazon Echo) ou realidade virtual e capacetes e óculos de realidade aumentada, como os produtos Oculus.
Eu vejo o potencial da PWA em capacetes e óculos para realidade virtual e aumentada, assistentes digitais e consoles de jogos, mas eles podem enfrentar algumas dificuldades com a política interna de suas empresas.
Considere plataformas nas quais já podemos instalar o PWA em janeiro de 2020:
Android
Podemos instalar aplicativos avançados da Web em dispositivos Android (telefones e tablets) das seguintes maneiras:
- Instalação no navegador : Chrome ( WebAPK ) / Firefox / Samsung Internet ( WebAPK apenas em dispositivos Samsung ) / UC / Edge / Opera / Brave / Baidu. Outros navegadores também podem ter esse recurso (principalmente porque são baseados no Chromium), mas o bug é muito grande.
Não é possível instalar o PWA no Facebook Mobile Browser, Firefox Preview, WebViews, Guias personalizadas ou Chrome for DayDream (modo VR). Além disso, se o telefone não tiver um aplicativo de tela inicial (por exemplo, no modo quiosque), coisas estranhas podem acontecer no navegador.
O Android ainda é a única plataforma que suporta todos os três modos de aplicativo descritos na especificação Manifesto do Web App.
- Distribuição para usuários corporativos : usando o iframe gerenciado do Google Play , um serviço da equipe da Play Store que usa a criação do WebAPK e não tem nada a ver com a equipe do Chrome (política do Google, parte um).
- Lojas de aplicativos : da Google Play Store, criando um aplicativo Android com a tecnologia Trusted Web Activity (TWA) e da Samsung Galaxy Store , enviando o endereço do aplicativo para um e-mail específico e, em seguida, criando WebAPK através dos serviços da Samsung. A Amazon App Store também tem uma maneira de publicar aplicativos da Web para tablets Amazon Fire, mas é baseada em uma plataforma antiga que não suporta todas as tecnologias PWA.
iOS e iPadOS
Menu inicial na tela do iPad OS 13 para definir atalhos do site e PWA autônomo
Tínhamos um modo de "aplicativo da web na tela inicial" desde o início do iPhone, mas vamos ver a primeira versão que oferece suporte a Service Workers e, pelo menos, a parte principal do Web App Manifest. O iOS 13 e o iPadOS 13 são as primeiras versões nas quais os PWAs realmente têm uma interface de usuário básica que corresponde a aplicativos nativos. Ainda existem bugs e diferenças entre o modo offline (PWA) e o Safari, como a API WebRTC para acessar a câmera (útil para reconhecer códigos QR). Embora a equipe do WebKit diga que está trabalhando nisso, o "bug" correspondente está aberto há 2 anos.
Assim, podemos instalar o PWA usando:
- Instalação a partir de navegadores : apenas usando o Safari, começando com a versão 11.1+ ( versão 13+ melhora a experiência do usuário ). Você não pode instalar o PWA a partir do Safari View Controllers (por exemplo, quando você clica no link no aplicativo Twitter) ou em qualquer pseudo-navegador como Google Chrome, Firefox, Edge ou Facebook Mobile Browser. É sempre bom lembrar que outros mecanismos são proibidos na App Store, portanto, não existem "navegadores" reais na App Store.
- Distribuição para usuários corporativos : do arquivo de configuração para dispositivos móveis (arquivo de configuração móvel); destina-se a usuários corporativos, mas funcionará para usuários comuns se eles aceitarem o arquivo correspondente. Nesse caso, o arquivo pode conter um ou mais "aplicativos da web" que podem ser executados no modo "offline", portanto a tela inicial conterá o PWA após a instalação do arquivo de configuração.
Windows e Xbox
Os PWAs aparecem no menu Iniciar em dispositivos Windows
Na plataforma Windows, você pode instalar o PWA através de:
- Instalação a partir de navegadores no Windows 10 : Google Chrome 70+ e Microsoft Edge (a partir da versão que será lançada em janeiro de 2020). Você não pode instalar o PWA do Firefox, IE ou Edge antes da versão 15.
- Instalação a partir de navegadores no Windows 7 / 8.x : Google Chrome 70+ e versão futura do Microsoft Edge. Você não pode instalar o PWA do Firefox, IE ou Edge antes da versão 15.
- Instalação a partir de navegadores no WindowsX (dobrável) : Microsoft Edge (no futuro).
- Lojas de aplicativos : Microsoft Store para Windows 10 (para desktops e Hololens) e Xbox One. Você não pode instalar o PWA no Windows 10 para dispositivos móveis ou qualquer outro SO móvel da Microsoft herdado.
O Microsoft Edge para Windows, macOS e Linux permite instalar qualquer site como um aplicativo; o site parecerá com o PWA na área de trabalho, mesmo que o site não possua um Service Worker ou um arquivo de manifesto adequado.
O Microsoft Edge (a nova versão do Chromium) permite definir qualquer site como um PWA, mesmo que ele não atenda aos critérios do PWA ou mesmo se for um site de 1991. O Google Chrome no computador também possui esse recurso, mas não é tão óbvio: você precisa criar um atalho usando o menu "Ferramentas avançadas" - "Criar atalho ..." e assinalando "Abrir em uma janela separada", o que, para mim, não é bem óbvio.
O primeiro site do mundo instalado como um "aplicativo" usando o Microsoft Edge no macOS
macOS - podemos instalar o PWA apenas nos navegadores Google Chrome 73+ e Edge. O Safari para macOS e Firefox não suporta a instalação do PWA.
Linux de 64 bits - a instalação é possível apenas através do Google Chrome 70+.
ChromeOS - a instalação a partir do navegador está disponível a partir do ChromeOS 67+; O Chrome TWA não está disponível.
kaiOS - somente em lojas (kaiStore, JioStore); esse sistema operacional é baseado na plataforma antiga do Gecko, mas possui suporte básico para os técnicos de serviço. Não há documentação suficiente para entender o que é possível e o que não está nesta plataforma para os telefones comuns.
Ser ou não ser
Embora a maioria dos fabricantes de navegadores tenha adotado o termo "aplicativo da web progressivo", há outro que ainda se opõe a ele: a Apple. E isso não é novidade, há dois anos eu disse a mesma coisa:
Curiosamente, apesar do suporte e desenvolvimento de Service Workers e Web App Manifest, nenhuma Apple usa o termo PWA.
Em 2019, ouvi pela primeira vez o termo PWA das equipes WebKit ou Apple, mas não da maneira que esperávamos; eles simplesmente o deslegitimaram, dizendo que "ele realmente não existe". Isso ocorreu em algumas discussões sobre especificações e no Twitter, por exemplo, no seguinte segmento:
Não me interpretem mal. A equipe do WebKit tem um certo ponto de vista ao discutir o termo PWA. No passado, também critiquei repetidamente o uso do termo PWA.
Oficialmente, a Apple também não usa esse termo em seus artigos publicados em 2019, apesar do fato de que para a maioria dos leitores será mais compreensível do que os termos que eles usam "aplicativos HTML5" e "aplicativos da Web para a tela inicial".
Um comunicado de imprensa oficial que fala sobre aplicativos HTML5 na App Store; Falaremos sobre a publicação do PWA nesta loja de aplicativos mais tarde.
Aplicativos web de tela inicial é o termo usado pela Apple há 12 anos para o que mais tarde se tornou aplicativos web progressivos. Além disso, o uso da frase “sites armazenados na tela inicial” está incorreto, pois nem todo site é um aplicativo de tela inicial, ou PWA, ou o que você quiser chamar.
Safari - novo IE?
Não concordo totalmente com a idéia de que a Apple prejudique a Internet ou que "o Safari seja o novo IE"; Entendo que a equipe do WebKit tem objetivos próprios que não são consistentes com os objetivos do império Chromium. Infelizmente, esses objetivos nem sempre são claros e transparentes para a comunidade, e as discussões públicas não são suficientes para entender seus pensamentos.
Embora eles não usem oficialmente o termo PWA, a Apple e a equipe do WebKit vêm desenvolvendo a plataforma nos últimos dois anos, de forma que o uso do PWA no iOS e iPadOS desde 2020 atenda pelo menos às expectativas mínimas dos usuários.
Até a própria Apple publicou vários PWAs durante 2019 (em alguns casos, mesmo sem perceber):
Juntamente com a política
Algumas decisões de grandes empresas como Apple e Google, para algumas tecnologias (como a PWA), às vezes têm políticas corporativas. Não acho que a Apple seja a única empresa que tem alguns problemas políticos com aplicativos da Web que "parecem nativos"; O Google também teve um quando o Chrome apresentou o Trusted Web Activity - o mecanismo para publicar o PWA na Play Store, mas o Google, como uma empresa que inclui Android, Play Store e Chrome, tentou criar todos os componentes do mais alto nível possível de complexidade, para dar-lhes um maior desenvolvimento.
Distribuição
Instalação a partir do Navegador
Esse era o cenário de instalação mais comum para o PWA, mas desde 2020, acho que podemos ver um aumento na popularidade de outras maneiras de distribuir aplicativos.
A capacidade de instalar o PWA a partir de nossa interface do usuário não aparecerá no Safari ou Firefox
A mais nova sobre esse problema é a especificação do manifesto do aplicativo da Web, que provavelmente removerá o evento beforeinstallprompt da recomendação e se tornará um recurso apenas para o Chromium. Como lembramos, esse evento nos permite criar nosso próprio botão "instalar" na interface do usuário de nosso aplicativo da web, o que nos permite iniciar manualmente a caixa de diálogo de instalação. O Safari e o Firefox declararam publicamente que não estão interessados em implementá-lo, portanto não teremos essa oportunidade fora do império Chromium (Google Chrome, Samsung Internet, Microsoft Edge, Brave, etc.).
O serviço de criação do WebAPK original está disponível apenas para o Google Chrome
Por falar em instalar a partir de um navegador no Android, o WebAPK fornece a melhor experiência possível. Nesse caso, a Google Play Store apenas compacta e assina aplicativos instalados ao usar o Google Chrome como navegador, apesar de um anúncio público de que eles desejam abrir a plataforma para outros navegadores.
O WebAPK usa o serviço APK baseado em nuvem, que cria e assina o APK rapidamente, para que o dispositivo Android instale o aplicativo silenciosamente e pareça com qualquer outro aplicativo nativo.
A Samsung possui um método próprio para criar o WebAPK, disponível apenas em dispositivos Samsung com a Galaxy Store instalada (eles têm seu próprio serviço, pois também controlam o SO e o navegador); outros navegadores, como Firefox, Brave ou Edge, não podem usar essa técnica devido à necessidade de assinaturas no nível do sistema operacional; portanto, os PWAs instalados nesses navegadores têm menos capacidade do ponto de vista do sistema operacional (por exemplo, eles não aparecem na lista geral de aplicativos e o ícone na tela principal também é marcado com um ícone do navegador).
Ao usar navegadores sem suporte ao WebAPK, você verá um ícone apenas na tela principal.
Distribuição da App Store
Vamos começar com a Apple: em 2019, a Apple percebeu que não precisava de aplicativos avançados da Web na App Store .
Para fornecer aos usuários a experiência de uso segura e confiável que eles esperam da App Store, sempre apontamos que os aplicativos devem ser completamente independentes. Isso significa que as principais funções e recursos do aplicativo devem estar contidos no código binário do software e não adicionados ao direcionar os usuários para fora do aplicativo aprovado, inclusive pelo uso do HTML5. Os aplicativos que fornecem recursos básicos e avançados dinamicamente, usando tecnologias da Web como HTML5, são melhor entregues a todos no Safari, e não através de uma App Store supervisionada.
Isso significa que você não deve adicionar aplicativos à App Store que carregam o JavaScript rapidamente, permitindo atualizar o comportamento do aplicativo sem a intervenção da equipe de controle de qualidade da App Store. Ou seja, o Service Worker ou qualquer outro mecanismo de atualização é proibido (a API do Service Worker não está disponível no WebView, mas existem algumas outras implementações). Você ainda pode incorporar todos os seus recursos no aplicativo do iPhone usando o WebView e adicioná-los à loja, mas qualquer atualização automática do aplicativo, como em outras plataformas, não estará disponível.
No Android, a Google Play Store com Chrome silenciosamente começou a aceitar o PWA na App Store. A tecnologia WebView não está envolvida aqui, e o aplicativo da loja exibirá o mesmo Chrome (ou outro navegador), incluindo o compartilhamento de todo o armazenamento e cookies também funcionará. Isso é possível graças às Atividades da Web confiáveis . Não funcionará apenas para publicar o URL do aplicativo; você precisa publicar um aplicativo especial para iniciar o seu PWA, ou seja, seu próprio aplicativo que abra o navegador offline e exiba o conteúdo do PWA em seu endereço.
No Chrome Dev Summit, a equipe do navegador mencionou o OYO Lite, PWA na Google Play Store, confirmando pela primeira vez que a TWA criada alguns meses antes poderia ser usada para distribuir o PWA na loja de aplicativos.
O Trusted Web Activities estava disponível durante todo o ano de 2019, mas o Chrome não falou publicamente sobre o uso dessa tecnologia para publicar o PWA na Play Store por 10 meses (política do Google, parte dois; você não pode imaginar quantas mensagens recebi de pessoas diferentes, que alegou que eu estava mentindo, porque "a TWA não é para a PWA na loja"). , , (, TWA). TWA Chrome. Custom Tabs, , Firefox Samsung Internet, ( Firefox Preview Samsung Internet, Samsung ). , , PWA Play Store.
Samsung Galaxy Store -
2019 Samsung PWA Galaxy Store — , Google Play Store. ( ), PWA «-», , . , .
Microsoft 2017 , Bing - 2018 , Microsoft Store Windows 10. , .
, Microsoft , , PWA, , 2019 , Microsoft , APPX, PWA .
- , , , , , Google - .
PWA ; - ,
, , , . Android Managed Google Play iframe , , PWA . Play Store WebAPK APK- URL- . , , ; , .
Apple (Mobile Configuration File), iOS iPadOS. Apple Configurator 2 , Web Clips ( ). URL- , , , PWA. mobileconfig , iOS/iPadOS , () PWA .
: , , , , -, , PWA Safari. , ; .
PWA 2020 , , :
- Chromium : Fugu , 2019 2020, - Google Chrome, Samsung Internet, Microsoft Edge . , , , ( , WebNFC, PWA, , , ), , (WebAssembly, WebRTC, WebPush, WebAuthn, WebShare, WebXR, RequestPayment . .).
, ( , Android), , , , Android/Play Store Chrome Google: TWA, , 2 , Chrome , Android 8+. Chrome, , , .
- WebKit : , WebKit ( Safari) Chromium , , . ( WebAssembly, WebAuthn ( ), Apple, Apple Pay RequestPayment), , , , , WebPush , WebKit. WebKit « 2020» , .
- : , . — Gecko ( API Chromium, PWA ), kaiOS (, Gecko ), TWA Universal Windows API Windows Store.
2019 , PWA:
PWA CSS-. Web App Manifest . iOS :
Dispositivos dobráveis
Embora os dispositivos dobráveis ainda sejam novos, o PWA funcionará em dispositivos compatíveis. Ainda não há nada concreto para eles e, em algumas plataformas, o uso do PWA pode ser completamente buggy ou uma adaptação regular ao tamanho da tela. Começam a aparecer algumas sugestões de API que ajudarão o PWA no futuro, como a API de enumeração de segmentos do Windows .
Ícones mascarados
O Android 8+ mudou a mecânica dos ícones, adicionando o conceito de ícones responsivos; mas isso não se aplicava ao PWA, então a maioria dos ícones do PWA parecia muito ruim, aparecendo apenas no centro do círculo branco. A plataforma da web levou um bom tempo para se adaptar a esse comportamento, e agora a definição de ícones mascarados está disponível no arquivo de manifesto.
O Chrome agora suporta ícones mascarados no Canary; logo, haverá suporte para atalhos padrão e WebAPK; O Firefox também está adicionando suporte para essa tecnologia.
As ferramentas
Ferramentas para aplicações web progressivas também foram ativamente desenvolvidas nos últimos anos. Eu acho que eles ainda têm espaço para crescer, mas aqui temos uma lista de ferramentas que foram desenvolvidas recentemente, especialmente no campo da PWA.
Geradores para lojas de aplicativos
No ano passado, muitas ferramentas pareciam oferecer suporte a desenvolvedores da Web que desejam publicar o PWA na Google Play Store sem usar o Android Studio e ferramentas nativas do zero.
pwa2apk é a primeira ferramenta de conversão de PWA para PWA a ser lançada no Google Play Store
O primeiro foi o PWA2APK, da editora independente AppMaker, seguido pelo PWA Builder, da Microsoft, e o Llama-pack, do Chrome (em desenvolvimento).
Construtor Pwa
A ferramenta da Microsoft está desenvolvendo ativamente: o PWA Builder 2.0 foi lançado no ano passado com muitos novos recursos, incluindo o PWA Builder Score e muitos outros. Durante o ano, o PWA Builder também lançou o componente da web pwa-install , que controla o comportamento do beforeinstallprompt.
O componente da Web pwa-install do PWA Builder em ação
No futuro, veremos como essa ferramenta se move para uma nova direção focada nos componentes da Web, incluindo a adição do suporte Web Push, a integração com outras ferramentas de código aberto (como o uso do llama-pack ou do gerador de ativos PWA ) e a remoção de algumas funções. gerador, incluindo um gerador de pacotes para iOS (na verdade, apenas usando o WebView).
Ícones mascarados
Se você possui o PWA, adicione um ícone mascarado no manifesto do aplicativo Web. Se você ainda não o fez, pode começar com o aplicativo Maskable.app do Tiger Oaks.
Hora de "mascarar" seus ícones do PWA!
Farol
A única grande mudança recente no Lighthouse para o PWA é que agora ele verifica o ícone para iOS / iPadOS. Acredito que isso será de grande importância, porque vi muita PWA sem um ícone para iOS, e a reação típica foi a seguinte: “A Lighthouse disse que estava tudo certo”.
Eu insisti nessa alteração no Lighthouse (você pode acompanhar a discussão com a equipe do Chrome no tópico abaixo):
O que vem a seguir?
O que você acha que 2020 trará para a PWA? Escreva sobre isso nos comentários.
Maximiliano Firtman é desenvolvedor, instrutor, palestrante e autor de artigos. Ele é autor de vários livros, incluindo a Web móvel de alto desempenho da O'Reilly Media. Ele frequentemente fala em conferências em todo o mundo e é amplamente reconhecido por seu trabalho na comunidade da web móvel. Ele ensina desenvolvimento móvel, HTML5, PWA e conduz treinamento de produtividade para empresas líderes em todo o mundo. Ele conduziu vários seminários e cursos sobre aplicativos inovadores da Web em muitas empresas e para publicações on-line como Pluralsight , Linked Learning / Lynda e Safari para O'Reilly. Twitter: @firt
De um tradutor: vi um link para o original no chat de telegrama PWA - a comunidade de língua russa , que é um ótimo lugar para discutir notícias e questões relacionadas ao PWA.