π¨ Enable offline mode in your page!
https://offline-strategy.piecioshka.io/demo/
- β Use
Network only
strategy- returns response from HTTP request
- β Use
Cache only
strategy- returns resource from Cache
- β Use
Network, fallback Cache
strategy- when connection:
- works make HTTP request, and save to Cache
- is broken, return resource from Cache
- when connection:
- β Use
Cache, fallback Network
strategy- verify that resource is in Cache
- when missing make HTTP request, and save to Cache
- β
Use
Hybrid
strategy π- verify that resource is in Cache
- when connection:
- works make HTTP request, and save to Cache
- is broken, return resource from Cache
-
Check, that you site is running on HTTPS.
π‘ Hint: Add redirect from HTTP to HTTPS.
-
Create file
service-worker.js
:// Update value, when would you like to reinstall Service Worker. // HINT: Update value on every deploy. self.CACHED_NAME = 'demo-1.0.0'; // Append URL to precache. // WARNING: Cannot use wildcards. self.PRECACHE_FILES = [ '/', '/index.html' ]; if (navigator.onLine) { self.importScripts('https://offline-strategy.piecioshka.io/hybrid.js'); }
-
Register
Service Worker
by adding code in filemain.js
:// What part of app should handle Service Worker const SERVICE_WORKER_SCOPE = '/demo/'; // File, where Service Worker is defined const SERVICE_WORKER_URL = '/demo/service-worker.js'; async function setupServiceWorker() { // console.log('[App] Call setupServiceWorker()'); const isServiceWorkerSupported = ('serviceWorker' in navigator); if (!isServiceWorkerSupported) { console.warn('[App] Service Workers are not supported'); return; } const isRegistered = navigator.serviceWorker.controller && (navigator.serviceWorker.controller.state === 'activated'); if (isRegistered) { console.log('[App] Service Worker was registered yet'); return; } registerServiceWorker(); } async function registerServiceWorker() { // console.log('[App] Call registerServiceWorker()'); await navigator.serviceWorker.register(SERVICE_WORKER_URL, { scope: SERVICE_WORKER_SCOPE }); console.log(`[App] New Service Worker is register (scope: ${SERVICE_WORKER_SCOPE})`); } setupServiceWorker().catch((err) => { console.error('[App] Registration of new Service Worker failed', { err }); });
self.importScripts('https://offline-strategy.piecioshka.io/network-first.js');
self.importScripts('https://offline-strategy.piecioshka.io/cache-first.js');
self.importScripts('https://offline-strategy.piecioshka.io/network-first-fallback-cache.js');
self.importScripts('https://offline-strategy.piecioshka.io/cache-first-fallback-network.js');
self.importScripts('https://offline-strategy.piecioshka.io/hybrid.js');
- test-service-worker-offline-page β Testing Service Worker with building offline page
- test-service-worker-substitute-resource β Testing Service Worker to substitute resource
- test-service-worker-cache-mechanism β Testing Service Worker with hybrid strategy
- warsawjs-workshop-28-pwa β WarsawJS Workshop #28: Video service app with PWA principles
The MIT License @ 2019