Como publicar e atualizar seu Progressive Web App

Seu PWA

Seu app também pode ser um Progressive Web App, ou PWA: um site que funciona como um app, em qualquer navegador, no celular ou no computador, sem loja. Veja como publicá-lo (ativá-lo) e mantê-lo atualizado.

Tudo começa em "Publish my project", no topo de todas as páginas. Seu PWA é instantâneo, sem pré-requisitos.

Antes de publicar

Antes de publicar, dê um ícone ao seu PWA. Em "My App", "App icon", Custom, é o "Apple Touch Icon", no bloco PWA.

Depois, na barra lateral, abra Publish, PWA, Publish: a página "PWA publication".

Cinco etapas opcionais permitem ir além: seu próprio nome de domínio, otimização para mecanismos de busca, notificações web push, uma chave de mapa e um mapa do site. Nenhuma é obrigatória.

Um aviso indica quando um recurso precisa de algo a mais em um PWA: aqui, um recurso que usa geolocalização precisa de uma chave de API.

E Redirection define para onde vão os visitantes se um dia você desativar seu PWA.

Publicar seu PWA

Quando estiver pronto, clique em "Publish my PWA".

GoodBarber gera seu PWA. Isso leva alguns minutos.

Seu PWA está online, em um endereço próprio. Siga o link ou escaneie o QR code com seu celular.

Para desativá-lo, você clicaria em Disable: os visitantes iriam então para onde você escolheu em Redirection.

Em "Publish my project", seu PWA agora está Live.

Abrir seu PWA

Abra o endereço dele em qualquer navegador. No computador, seu app aparece como um site.

No celular, ele fica igual ao seu app.

Os visitantes também podem instalá-lo: no menu do Chrome, é "Install and create shortcut".

Um toque em Install… e seu ícone se junta aos apps deles… e abre em tela cheia, como um app nativo.

Atualizar seu PWA

Agora, mude algo no seu app: no cabeçalho, a "Logo color", por exemplo.

A pré-visualização mostra a mudança na hora… mas seu PWA não: ele mostra o que você publicou por último.

"Publish my project" mostra "Update now": há modificações esperando para serem publicadas.

Em Publish, PWA, Update, "Live update" lista as modificações que saem com "Update now".

Outras, como uma nova extensão ou uma permissão, exigem regenerar seu PWA: elas esperam aqui até você clicar em "Rebuild my PWA".

Para publicar sua modificação, abra "Publish my project" e clique em "Update now"… e depois confirme.

Alguns segundos depois, seu projeto está atualizado.

Recarregue seu PWA: a modificação está lá. Os visitantes a recebem na próxima vez que o abrirem.

Novo conteúdo

Com o conteúdo é diferente. Publique um artigo em uma das suas seções… e ele aparece no seu PWA na hora, sem nenhuma atualização a fazer.

"Publish my project" continua mostrando "Project updated". Daqui em diante, é ali que você publica suas modificações.