Construindo Progressive Web Apps

Roger Albino rogeralbino.com.br

Conﬁável

Rápido

Envolvente

Progressive Web App

PWA Web

Apps Híbridos Não são PWAs

Seguro (https)

Compartilhável (via URL) https://pokedex.org/ https://pokedex.org/#/pokemon/1 https://pokedex.org/#/pokemon/2

Encontrável

Responsivo

PWA App ♥

App • Câmera / Galeria de Fotos • Microfone •
Geolocalização • Contatos • Bluetooth • Outros… • Push Notiﬁcations • Icone de acesso • Splash Screen • Processos rodando em Background (service workers) • Oﬄine

É só Mobile?

Meu PWA é instalável?

Add to Home-screen no Android https://developers.google.com/web/fundamentals/app-install-banners/?hl=pt-br

Add to Home-screen no iOS

Add to Home-screen no Desktop

Mas e as lojas de aplicativos?

https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/microsoft-store

Mas já tem tudo isso funcionando?

PWA Progressive

PWA QR Code Cod: 10346

PWA Javascript

Independente da conexão

Progressive Web App

PWA vs Nativo

Instalável Nativo

Mais familiar para o usuário Nativo

Melhor uso do hardware Nativo

Mais rápido (UI carregada quase instantaneamente) Nativo

Envolvente (push notiﬁcations) Nativo

Recursos que somente APPs Nativas tem Nativo

Nativo Recursos que somente APPs Nativas tem Por enquanto…

PWA O Poder da Web

O Mesmo código para (web, iOS, android, desktop…) PWA

Tecnologias que a gente já conhece (HTML, CSS e JS)
PWA

Com poderes que antes só conseguíamos ter com APPs nativas.
PWA

Testar o seu PWA Lighthouse

Alguns exemplos interessantes pwa.rocks

// index.html <!DOCTYPE html> <html> <head> ... </head> <body> <header
class="header"> ... </header> </body> </html>

class="header"> ... </header> <main class="main"> ... </main> </body> </html>

class="header"> ... </header> <main class="main"> ... </main> <div class="content"> ... </div> </body> </html>

class="header"> ... </header> <main class="main"> ... </main> <div class="content"> ... </div> <div class="loader"> <svg viewBox="0 0 32 32" width="32" height="32"> <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle> </svg> </div> </body> </html>

class="header"> ... </header> <main class="main"> ... </main> <div class="content"> ... </div> <div class="loader"> <svg viewBox="0 0 32 32" width="32" height="32"> <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle> </svg> </div> <script src="scripts/app.js" async></script> </body> </html>

<head> ... <link rel="manifest" href="/manifest.json"> ... </head> // index.html

{ "name": “My PWA”, "short_name": "Weather", "icons": [{ "src": "images/icons/icon-128x128.png",
"sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" }], "start_url": "/index.html", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" } // manifest.json

// index.html <head> ... <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="My PWA"> <link rel="apple-touch-icon" href="images/icons/ icon-152x152.png"> <meta name="msapplication-TileImage" content="images/icons/ icon-144x144.png"> <meta name="msapplication-TileColor" content="#2F3BA2"> ... </head>

// index.html <body> ... <script src="scripts/app.js" async></script> ... </body>

Service Workers • Não acessa o DOM • Roda em
background (mesmo com o APP fechado) • Apenas um para várias abas do navegador • Exigem HTTPS (ou localhost) • Só intercepta requests do mesmo domínio

// app.js if ('serviceWorker' in navigator) { navigator.serviceWorker .register('./service-worker.js') .then(function()
{ console.log('Service Worker Registered'); }); }

// service-worker.js var dataCacheName = 'weatherData-v1'; var cacheName = 'weatherPWA-step-8-1';
var filesToCache = [ '/', '/index.html', '/scripts/app.js', '/styles/inline.css', '/images/clear.png', '/images/cloudy-scattered-showers.png', '/images/cloudy.png', '/images/fog.png', '/images/ic_add_white_24px.svg', '/images/ic_refresh_white_24px.svg', '/images/partly-cloudy.png', '/images/rain.png', '/images/scattered-showers.png', '/images/sleet.png', '/images/snow.png', '/images/thunderstorm.png', '/images/wind.png' ];

// service-worker.js self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); });

// service-worker.js self.addEventListener('activate', function(e) { console.log('[ServiceWorker] Activate'); e.waitUntil( caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) { if (key !== cacheName && key !== dataCacheName) { console.log('[ServiceWorker] Removing old cache', key); return caches.delete(key); } })); }) ); return self.clients.claim(); });

// service-worker.js self.addEventListener('fetch', function(e) { console.log('[Service Worker] Fetch', e.request.url); e.respondWith(
caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); });

Frameworks

Angular ng add @angular/pwa --project *project-name*

Vue.js

ReactJS with CRA (create-react-app) // serviceWorker.unregister(); serviceWorker.register();

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/ workbox-sw.js');

workbox.routing.registerRoute( // Cache CSS files /.*\.css/, // Use cache but
update in the background ASAP workbox.strategies.staleWhileRevalidate({ // Use a custom cache name cacheName: 'css-cache', }) );

workbox.routing.registerRoute( // Cache image files /.*\.(?:png|jpg|jpeg|svg|gif)/, // Use the cache
if it's available workbox.strategies.cacheFirst({ // Use a custom cache name cacheName: 'image-cache', plugins: [ new workbox.expiration.Plugin({ // Cache only 20 images maxEntries: 20, // Cache for a maximum of a week maxAgeSeconds: 7 * 24 * 60 * 60, }) ], }) );

workbox.googleAnalytics.initialize();

Construindo Progressive Web Apps - GDG Mogi Guaçu 2019

Construindo Progressive Web Apps - GDG Mogi Guaçu 2019

More Decks by Roger Albino

Other Decks in Programming

Featured

Transcript