caching-configs.sw.js

import { clientsClaim } from 'workbox-core';
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';
import { googleFontsCache } from 'workbox-recipes';

//////////////////////////////////////////////////////////////
//////////////////////////// Setup ///////////////////////////
//////////////////////////////////////////////////////////////
self.__WB_DISABLE_DEV_LOGS = true;

/**
 * The clientsClaim() method in workbox-core automatically adds an activate event listener to your service worker, and inside of it,
 * calls self.clients.claim(). Calling self.clients.claim() before the current service worker activates will lead to a runtime exception,
 * and workbox-core's wrapper helps ensure that you call it at the right time.
 */
clientsClaim();

// Required to fix error while building using workbox plugin
precacheAndRoute(self.__WB_MANIFEST);

// Fixes this issue
// DOMException: Registration failed - missing applicationServerKey, and manifest empty or missing
self.addEventListener('push', (event) => {
  const title = 'Get Started With Workbox';
  const options = {
    body: event.data.text()
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

//////////////////////////////////////////////////////////////
/////////////////////// Registration /////////////////////////
//////////////////////////////////////////////////////////////

// WORKBOX RECIPIES
googleFontsCache();

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200]
      }),
      new ExpirationPlugin({
        purgeOnQuotaError: true,
        maxEntries: 100,
        maxAgeSeconds: 10 * 60 // 10 mins
      })
    ]
  })
);

registerRoute(
  ({ url }) => {
    // cache coco api responses
    return new RegExp('/api/use').test(url.href);
  },
  new CacheFirst({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200]
      }),
      new ExpirationPlugin({
        maxEntries: 15,
        maxAgeSeconds: 6 * 60 * 60 // 6 hours
      })
    ]
  })
);