Simple Offline Web Apps using Caching files ( @ DOT TECHTALK,5 JANUARY 2018 )

Transcript

1. Simple Offline Web Apps using Caching Files Progressive Web Applications FAHMI IDRIS At DOT TECHTALK – 5 JANUARY 2018
2. Progressive Web Applications
3. What is a PWA • Progressive • Responsive • Connectivity independent • App-like • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable
4. Migrate to PWA 1. Move to HTTPS 2. Use caching strategies for performance and offline 3. Implement an app shell architecture 4. Incorporate "Add to Homescreen" 5. Add Push Notifications, Payment API, Credentials API, etc. (if relevant)
5. Real world examples of PWA's Offline Wikipedia app, a demo by Jake Archibald Flipkart Lite, an e-commerce company Voice Memos, a sample web app that records voice memos AliExpress, one of the world's largest e-commerce sites BaBe, an Indonesian news aggregator service United eXtra, a leading retailer in Saudi Arabia The Washington Post, America’s most widely circulated newspaper published in Washington, D.C.
6. Service Worker
7. Examining the Service Worker
8. Jaman Now
9. Caching files for offline
10. Combined strategies • Cache first, Network fallback • Network first, Cache fallback • Network only • Cache only • Cache-Network race
11. Building a simple application cache Service worker event Action install Build cache add initial resources activate Update cache fetch Retrieve from cache, network, or database
12. Cache static assets var filesToCache = [ './css/style.css', './css/bootstrap.css', './offline.html', './index.html' ]; var staticCacheName = 'offline-application-cache-v1'; service-worker.js
13. Cache static assets self.addEventListener('install', function(event) { console.log('Installing service worker'); event.waitUntil( caches.open(staticCacheName) .then(function(cache) { return cache.addAll(filesToCache); }) ); }); service-worker.js
14. Cache assets from network self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request); }) ); }); service-worker.js