Service Worker

Rocket does come with a default service worker that will

• cache already visited pages
• cache assets of visited pages (up to 100 files then it replaces older entries)
• reload the page if a newer html page version is available on service worker activation

Adjusting the file name

Changing the service worker file name can be quite a hassle so you can adjust generate file name via a config.

👉 config/rocket.config.js

/** @type {import('rocket/cli').RocketCliConfig} */
export default {
  serviceWorkerName: 'my-service-worker-name.js',
  serviceWorkerSourcePath: new URL('../src/service-worker.js', import.meta.url).href,
};

Meet the Service Worker

The default service worker will work for many scenarios however your needs my vary. To enable different service worker strategies you can replace the default service worker code by providing a file at _assets/service-worker.js. This file will be auto transformed and generated in the root of the website using the defined serviceWorkerName.

For inspiration, you can take a look at the default config.

/* eslint-disable no-undef */
import { registerRoute } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { BroadcastUpdatePlugin } from 'workbox-broadcast-update';
import { ExpirationPlugin } from 'workbox-expiration';

addEventListener('install', () => {
  // @ts-ignore
  skipWaiting();
  /* eslint-enable @typescript-eslint/ban-ts-comment */
});

// addEventListener('activate', () => {
//   console.log('activate');
// });

const cacheFirst = new CacheFirst({
  cacheName: 'assets',
  plugins: [
    new ExpirationPlugin({
      maxEntries: 100,
    }),
  ],
});
const staleWhileRevalidate = new StaleWhileRevalidate({
  cacheName: 'pages',
  plugins: [new BroadcastUpdatePlugin()],
});

registerRoute(/(\/|\.html)$/, staleWhileRevalidate);
registerRoute(/\.(css|m?js|svg|woff2|png|jpg|gif|json|xml)$/, cacheFirst);

Be sure to check out workbox for more service worker magic.

And if you wanna have a 30 minutes crash course we highly recommend the talk Service Workers For The Rest Of Us by Philip Walton.

Registration

The registration happens via

<script type="module" src="resolve:@rocket/launch/js/register-service-worker.js"></script>

Below you'll find its implementation

(async () => {
  if ('serviceWorker' in navigator) {
    const { Workbox } = await import('workbox-window');

    // @ts-ignore
    const url = window.__rocketServiceWorkerUrl || '/service-worker.js';
    const wb = new Workbox(url);
    wb.addEventListener('message', event => {
      if (event.data.type === 'CACHE_UPDATED') {
        const { updatedURL } = event.data.payload;
        console.log(`Reloading as a newer version of ${updatedURL} became available!`);
        window.location.reload();
      }
    });
    wb.register()
      .then(function () {
        console.log('ServiceWorker registered.');
      })
      .catch(function (err) {
        console.log('ServiceWorker registration failed: ', err);
      });
  }
})();