Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Construindo Progressive Web Apps - GDG Mogi Gua...

Construindo Progressive Web Apps - GDG Mogi Guaçu 2019

Roger Albino

January 26, 2019
Tweet

More Decks by Roger Albino

Other Decks in Programming

Transcript

  1. App • Câmera / Galeria de Fotos • Microfone •

    Geolocalização • Contatos • Bluetooth • Outros… • Push Notifications • Icone de acesso • Splash Screen • Processos rodando em Background (service workers) • Offline
  2. // index.html <!DOCTYPE html> <html> <head> ... </head> <body> <header

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

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

    class="header"> ... </header> <main class="main"> ... </main> <div class="content"> ... </div> </body> </html>
  5. // index.html <!DOCTYPE html> <html> <head> ... </head> <body> <header

    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>
  6. // index.html <!DOCTYPE html> <html> <head> ... </head> <body> <header

    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>
  7. { "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
  8. { "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
  9. // 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>
  10. 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
  11. // 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' ];
  12. // 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(); });
  13. // 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); }) ); });
  14. 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', }) );
  15. 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, }) ], }) );