O documento descreve o que são Progressive Web Apps (PWAs), aplicativos web que adicionam funcionalidades como trabalhar offline e notificações push para fornecer uma experiência semelhante à de aplicativos nativos. PWAs usam tecnologias como Service Workers, Manifest e bibliotecas JavaScript para armazenar dados offline e melhorar o desempenho.

1. PWA
Progressive Web Apps

2. 2

3. PWA
A new way to deliver amazing user
experiences on the web.
3

4. “Vocês já tem tudo o que
precisam se querem saber como
desenvolver aplicativos para o
iPhone hoje: basta usar os
padrões modernos da web”
4

5. Boom!
Grande popularização dos apps
5

6. Problemas com
Apps
Buscar Instalar Abrir
6
Cadastrar Interagir Compartilhar

7. Google
Chrome
7
Em 2015, Frances Berriman e Alex Russell cunhou o
termo "Progressive Web Apps" para descrever novas
funcionalidades suportadas pelos navegadores
modernos

8. 8
PWA
Os Progressive Web Apps são um conjunto de
técnicas para desenvolver aplicações web,
adicionando **progressivamente
**funcionalidades que antes só eram possíveis
em apps nativos

9. Progressive Web App é:
Progressivo
para qualquer usuário,
independente do browser
9
App-like
o usuário se sente em um
aplicativo nativo
Responsivo
feito para qualquer
dispositivo.
Conexão
funciona mesmo se o
usuário estiver offline
Atualizado
não é necessário baixar
atualizações do aplicativo
Seguro
somente com https
Engajável
através de push
notifications, o usuário pode
ser constantemente
engajado.
Instalável
é possível adicionar um
ícone na tela principal
apenas um clique.

10. PWA na
prática
10

11. 11
Service Worker
Os service workers são um proxy programável
posicionado entre a rede e o navegador. Use um
service worker e decida quais dados são armazenados
em cache, como são armazenados e como são
retornados ao usuário.

12. Manifest
12
É um arquivo JSON que permite controlar como o
aplicativo web ou site é exibido para o usuário em
áreas que normalmente se espera ver aplicativos
nativos
× Ele tem um ícone e um nome exclusivo para que
os usuários possam distingui-los de outros sites.
× Mostra algo ao usuário enquanto os recursos são
baixados ou restaurados do cache.
× Fornece característica de exibição padrão ao
navegador para evitar transições muito bruscas

13. Code!
13

14. 14
Workbox
Workbox é um conjunto de bibliotecas e módulos Node
que facilitam o armazenamento em cache dos ativos e
o aproveitamento total dos recursos usados ​​para criar
Progressive web Apps.
JavaScript Libraries for adding offline support to web apps

15. workbox-cli
15
npm i workbox-cli
workbox wizard //Gera os arquivos workbox-config.js de configuração
workbox generateSW //Gera arquivo para configuração manual

16. 16
Prós x contras
Prós:
× Custo baixo
× Retenção
× Atualizações
Contras:
× Não tem o controle total sobre o hardware

17. 17