Examples sw.js

caching-sw.js

/* Example using caching */
import { ExpirationPlugin } from 'workbox-expiration';
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// Inject workbox in Service Worker
precacheAndRoute(self.__WB_MANIFEST);

// Enable navigation preload (work in Chrome)
navigationPreload.enable();

registerRoute(
  /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-font-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 16,
        maxAgeSeconds: 60 * 60 * 24 * 7, // 7 days
        purgeOnQuotaError: true,
      }),
    ],
  }),
  'GET',
);

registerRoute(
  /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-image-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 64,
        maxAgeSeconds: 60 * 60 * 24, // 1 day
        purgeOnQuotaError: true,
      }),
    ],
  }),
  'GET',
);

registerRoute(
  /\.(?:js)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-js-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 64,
        maxAgeSeconds: 60 * 60 * 24, // 1 day
        purgeOnQuotaError: true,
      }),
    ],
  }),
  'GET',
);

registerRoute(
  /\.(?:css|less)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-style-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 64,
        maxAgeSeconds: 60 * 60 * 24, // 1 day
        purgeOnQuotaError: true,
      }),
    ],
  }),
  'GET',
);

registerRoute(
  /\.(?:json|xml|csv)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-data-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 16,
        maxAgeSeconds: 60 * 60 * 24, // 1 day
        purgeOnQuotaError: true,
      }),
    ],
  }),
  'GET',
);

offline-sw.js

/* Example using offline page */
import * as navigationPreload from 'workbox-navigation-preload';
import { precacheAndRoute } from 'workbox-precaching';
import { NavigationRoute, registerRoute } from 'workbox-routing';
import { NetworkOnly } from 'workbox-strategies';

// Inject workbox in Service Worker
precacheAndRoute(self.__WB_MANIFEST);

// Enable navigation preload (work in Chrome)
navigationPreload.enable();

const CACHE_NAME = 'offline-page';
const FALLBACK_HTML_URL = '/offline'; // Url to offline page

// Add page (HTML) to cache
self.addEventListener('install', async event => {
  event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.add(FALLBACK_HTML_URL)));
});

const networkOnly = new NetworkOnly();

const navigationHandler = async params => {
  try {
    // Attempt a network request.
    const actual = await networkOnly.handle(params);
    return actual;
  } catch (error) {
    // If it fails, return the cached HTML.
    return caches.match(FALLBACK_HTML_URL, {
      cacheName: CACHE_NAME,
    });
  }
};

registerRoute(new NavigationRoute(navigationHandler));