offline-strategy

🔨 Enable offline mode in your page!

Preview 🎉

https://offline-strategy.piecioshka.io/demo/

Features

• ⛔ 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
• ⛔ 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

Installation

1. Check, that you site is running on HTTPS.

   💡 Hint: Add redirect from HTTP to HTTPS.

2. 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');
   }

3. Register Service Worker by adding code in file main.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 });
   });

Available strategies

(TODO) Network first strategy

self.importScripts('https://offline-strategy.piecioshka.io/network-first.js');

(TODO) Cache first strategy

self.importScripts('https://offline-strategy.piecioshka.io/cache-first.js');

(TODO) Network first, fallback Cache strategy

self.importScripts('https://offline-strategy.piecioshka.io/network-first-fallback-cache.js');

(TODO) Cache first, fallback Network strategy

self.importScripts('https://offline-strategy.piecioshka.io/cache-first-fallback-network.js');

Hybrid strategy

self.importScripts('https://offline-strategy.piecioshka.io/hybrid.js');

Related

• 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

License

The MIT License @ 2019