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

DevFest Santiago 2019 - Progressive Web Apps Done Right

DevFest Santiago 2019 - Progressive Web Apps Done Right

Slides da minha apresentação em 05/10/2019 em Santiago - Chile, para a edição do GDG DevFest da cidade.

Mais detalhes aqui: https://devfestsantiago.com/speakers/felipe_cavalcante

Felipe Sousa

October 05, 2019
Tweet

More Decks by Felipe Sousa

Other Decks in Programming

Transcript

  1. CACHE MANIFEST # files index.html cache.html style.css image1.png # Use

    from network if available NETWORK: network.html # Fallback content FALLBACK: fallback.html
  2. A service worker is a script that your browser runs

    in the background, separate from the web page, enabling features that do not require a web page or user interaction.
  3. var CACHE_NAME = ‘CACHE_NAME_EXAMPLE_2’; var urlsToCache = [ '/', ‘/style.css’,

    ‘/script.js’, ‘/imagem.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(urlsToCache); }) ); });
  4. var CACHE_NAME = ‘CACHE_NAME_EXAMPLE_2’; var urlsToCache = [ '/', ‘/style.css’,

    ‘/script.js’, ‘/imagem.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)); ); }); self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(function(response) => { if(response) return response; return fetch(event.request); }) ) });
  5. self.addEventListener('fetch', function(evt) { evt.respondWith(fromCache(evt.request)); evt.waitUntil( update(evt.request) .then(refresh) ); }); function

    refresh(response) { return self.clients.matchAll().then(function (clients) { clients.forEach(function (client) { var message = { type: 'refresh', url: response.url, eTag: response.headers.get('ETag') }; client.postMessage(JSON.stringify(message)); }); }); }
  6. 1/2

  7. The web application manifest is a JSON file that lets

    you control how the web application or website is displayed to the user in areas that are typically expected to see native applications.
  8. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF−8"> <title>My Page</title> <!−−

    manifest −−> <link rel="manifest" src="/manifest.json"> </head> <body> </body> </html>
  9. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  10. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  11. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  12. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  13. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  14. { "short_name": “Application Name”, "name": “Application Full Name", "icons": [

    { "src": "launcher−icon−4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": “/index.html?app=true”, "display": “standalone", "theme_color": "#77D48A", "background_color": "#E4B0AC" }
  15. • Have a registered service worker on your site. •

    Have a manifest file with the basics properties. • Be displayed by HTTPS. • Be visited at least twice, with at least five minutes between visits. Banner - Add to Home Screen
  16. 2/2