progressive web apps: past, present and future · progressive web apps: formato de app mais leve,...
TRANSCRIPT
![Page 1: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/1.jpg)
Globalcode–Open4education
Progressive Web Apps: Past, Present and Future
Anderson Fernandes (Burnes) Mestre em Informática (UTFPR) – Desenvolvedor Web desde 1999
Professor de Graduação (2002) e Pós na Área de Web (2007)
![Page 2: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/2.jpg)
Globalcode–Open4education
![Page 3: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/3.jpg)
Globalcode–Open4education
![Page 4: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/4.jpg)
Globalcode–Open4education
![Page 5: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/5.jpg)
Globalcode–Open4education
Agenda Passado
Primeiros aplicativos e aparelhos Primeiras linguagens
Present Responsividade Apps Nativos Web Apps
Present Manifestos Service Workers
Future
![Page 6: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/6.jpg)
Globalcode–Open4education
Past
1996
Primeiro celular com Internet:
Nokia 9110 (GSM)
![Page 7: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/7.jpg)
Globalcode–Open4education
Past
1998
WML (Wireless Markup Language)
WAP (Wireless Application Protocol)
![Page 8: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/8.jpg)
Globalcode–Open4education
Past
2007 Primeiro iPhone (2G)
Tela de 3.5 e ROM de 4, 8 ou 16GB com Browser
Junho 2008
iPhone 3G
![Page 9: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/9.jpg)
Globalcode–Open4education
Past
2008 Primeiro celular com Android:
HTC T-Mobile G1 (3G)
Tela de 3.2, 192 MB de RAM e 256 ROM.
![Page 10: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/10.jpg)
Globalcode–Open4education
Past
![Page 11: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/11.jpg)
Globalcode–Open4education
Past
CSS > Tabelas Design Responsivo
Tableless
![Page 12: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/12.jpg)
Globalcode–Open4education
Past
2008 Primeira especificação do HTML 5
Tags de Audio, Vídeo, APIs diversas e novas Tags
![Page 13: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/13.jpg)
Globalcode–Open4education
Past
2013
Mozila lança o Firefox OS
Sistema C++, HTML5, CSS e Javascript
![Page 14: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/14.jpg)
Globalcode–Open4education
Past
2013
Firefox OS
Sistema C++, HTML5, CSS e Javascript
![Page 15: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/15.jpg)
Globalcode–Open4education
Past
2013
Firefox OS
Sistema C++, HTML5, CSS e Javascript
![Page 16: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/16.jpg)
Globalcode–Open4education
Past
2015
Frances Berriman e Alex Russell Citam pela primeira vez o PWA
Membros da equipe do Google Chrome
![Page 17: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/17.jpg)
Globalcode–Open4education
Past
Progressive Web Apps:
Formato de App mais leve, desenvolvido com HTML 5, mas sem
perder as vantagens de um App nativo.
![Page 18: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/18.jpg)
Globalcode–Open4education
Past
Progressive Web Apps:
Aplicação Web que iria progressivamente se tornar um App,
podendo utilizar recursos dos aparelhos.
![Page 19: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/19.jpg)
Globalcode–Open4education
Past
![Page 20: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/20.jpg)
Globalcode–Open4education
Present
2016
Celular é o principal meio de conexão com a Internet no Brasil
Fonte: IBGE
![Page 21: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/21.jpg)
Globalcode–Open4education
Past
![Page 22: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/22.jpg)
Globalcode–Open4education
Past Milhares de aplicativos nas Lojas
![Page 23: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/23.jpg)
Globalcode–Open4education
Past Mesmos Aplicativos Instalados
![Page 24: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/24.jpg)
Globalcode–Open4education
Past Mesmos Aplicativos Instalados
![Page 25: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/25.jpg)
Globalcode–Open4education
Past Mesmos Aplicativos Instalados
![Page 26: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/26.jpg)
Globalcode–Open4education
Past Mesmos Aplicativos Instalados
![Page 27: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/27.jpg)
Globalcode–Open4education
Past Poucas instalação Ocupam espaço no disco Demoram a ser instalados
![Page 28: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/28.jpg)
Globalcode–Open4education
Past Quantos instalam aplicativos para aproveitar uma oferta no Shopping e o mantém instalado?
![Page 29: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/29.jpg)
Globalcode–Open4education
Present - Vantagens HTML + CSS + Javascript Funciona em qualquer navegador HTML 5 Não precisam necessariamente estar em Loja de Apps Podem ser atualizados com mais facilidade Podem ser encontrados por Motores de Busca
![Page 30: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/30.jpg)
Globalcode–Open4education
Present - Vantagens App Like Web Manifest
Splash Screen Ícones
Adicionado a tela inicial como um App Nativo Push Notification Navegação Offline
![Page 31: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/31.jpg)
Globalcode–Open4education
Present - Vantagens Service Worker
Cache Navegação Offline Atualização e Ciclo de Vida
Segurança (https obrigatório) Fácil instalação Compartilhável
![Page 32: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/32.jpg)
Globalcode–Open4education
Resumindo...
l É uma metodologia de desenvolvimento l Melhoria nas web pages e sistemas web l Evolução das páginas web l Utiliza recursos dos navegadores mais
modernos aliados as vantagens dos dispositivos móveis
l Sites que se comportam como aplicativos
![Page 33: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/33.jpg)
Globalcode–Open4education
![Page 34: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/34.jpg)
Globalcode–Open4education
Flipkart Site indiano de e-commerce Flipkart Lite
![Page 35: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/35.jpg)
Globalcode–Open4education
Flipkart Aumentou em 70% o número de conversões Engajamento, permanência no site de até 40% maior
![Page 36: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/36.jpg)
Globalcode–Open4education
Aliexpress e Alibaba Aumentou em 76% o número de conversões 15% mais usuários no iOS e 30% no Android
![Page 37: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/37.jpg)
Globalcode–Open4education
Web Manifest
AppCache Servia para armazenar arquivos em cache, fazendo com que o usuário pudesse navegar offline Velocidade Carga do servidor
![Page 38: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/38.jpg)
Globalcode–Open4education
Web Manifest
AppCache Servia para armazenar arquivos em cache, fazendo com que o usuário pudesse navegar offline Velocidade Carga do servidor
![Page 39: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/39.jpg)
Globalcode–Open4education
Service Workers
Armazenamento em cache Javascript para manipular comportamentos Offline first HTTPS Ciclo de Vida
![Page 40: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/40.jpg)
Globalcode–Open4education
Service Workers
![Page 41: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/41.jpg)
Globalcode–Open4education
Android
2018: Google anunciou suporte a PWA na Play Store Vão poder utilizar recursos nativos: Câmera Geolocalização Outros
![Page 42: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/42.jpg)
Globalcode–Open4education
iPhone / iOS
2018: iOs 11.3 Service Workers Limite de 50MB de Cache Manifest +- Suas Tags para Splash e Ícones (PNG Branco) Não possui Push Notifications
![Page 43: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/43.jpg)
Globalcode–Open4education
Então, resolveu minha vida... PWA é Maraviwonderful!
![Page 44: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/44.jpg)
Globalcode–Open4education
![Page 45: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/45.jpg)
Globalcode–Open4education
Nem tudo são flores...
l Navegadores sem suporte l Legitimidade l Suporte do login do aplicativo e troca de
informações entre apps l Não possui acesso a todo o hardware l Não podem mudar configurações do sistema
![Page 46: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/46.jpg)
Globalcode–Open4education
Exemplo
![Page 47: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/47.jpg)
Globalcode–Open4education
Exemplo vdp.uniti.com.br Tirinhas do Vida de Programador Funciona até no Windows 10
![Page 48: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/48.jpg)
Globalcode–Open4education
Exemplo vdp.uniti.com.br Tirinhas do Vida de Programador Funciona até no Windows 10
![Page 49: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/49.jpg)
Globalcode–Open4education
![Page 50: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/50.jpg)
Globalcode–Open4education
![Page 51: Progressive Web Apps: Past, Present and Future · Progressive Web Apps: Formato de App mais leve, desenvolvido com HTML 5, mas sem perder as vantagens de um App nativo . Globalcode](https://reader033.vdocuments.site/reader033/viewer/2022042219/5ec5577513b08355f20a9ef1/html5/thumbnails/51.jpg)
Globalcode–Open4education
Exemplo Melhorias futuras:
Carregar mais tirinhas paginação Avisar tirinha nova Pedir pra comprar algo na Loja