Let's talk about PWA

https://youtu.be/9JRd4nZ2K4s

Transcript

1. R O G E R I O A N G E L I S K I L E T ' S T A L K A B O U T P W A T H E F U T U R E I S N O W
2. W H A T I S N ' T P W A ? Native App Hybrid App Marketplace App Silver Bullet
3. W H A T I S P W A ? Progressive Web App Work Offline Better User Experience Native Resources Installable Home Screen
4. W H Y I S H O U L D U S E P W A ? Fast Improved conversions Increased engagement Work reliably, no matter the network conditions Worthy of being on the home screen No need install
5. P W A R E Q U I R E M E N T S HTTPS Responsive on mobile devices The start URL (at least) loads while offline (Service Worker) Can add to home screen (Web App Manifest) Immersive experience Google PWA Checklist
6. Service Worker Intercept Requests HTTPS Cache No Acces Browser
7. Register a Service Worker if(navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js') }
8. Install Event var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/','/styles/main.css','/script/main.js']; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });
9. Fetch Event self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { if (response) { return response; } return fetch(event.request); })); });
10. Install Banner Needs a service worker Need a Web App Manifest Browser criteria Prompt can be deferred
11. What I should cache? JS CSS HTML Static Resources Common Resources Rarely Update Resources Cache-First AppCache?
12. Progressive Think Native feeling Performance Not be dependent Mobile First
13. R O G E R I O A N G E L I S K I L E T ' S T A L K A B O U T P W A • E N D • @ a n g e l i s k i _ h t t p s : / / g i t h u b . c o m / a n g e l i s k i