Workbox, React, Typescript (configuration?)

[viinxent]

Hey guys,

I'm new to snowpack and decided to use it on my new project. I'm planning on making it PWA(fully-offline). Is there a template/configuration where i could have a head start? Can't really find much on the web.

Thanks

[openscript]

Hi @viinxent

Interesting post! I'm exactly at the same point. Unfortunately I haven't found any example.

An integration of the generateSW flow (https://developers.google.com/web/tools/workbox/modules/workbox-cli) is simple:

1. Add workbox-cli to your development dependencies
2. Create a workbox-config.js by hand or with the wizard. Mine looks currently like this:

module.exports = {
  "globDirectory": "build/",
  "globPatterns": [
    "**/*.{js,json,css,png,html,txt}"
  ],
  "swDest": "build/sw.js",
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/fonts\.googleapis\.com/,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'google-fonts-stylesheets'
      }
    },
    {
      urlPattern: /^https:\/\/fonts\.gstatic\.com/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-webfonts',
        expiration: {
          // cache fonts for 7 days
          maxAgeSeconds: 60 * 60 * 24 * 7,
          maxEntries: 30
        }
      }
    }
  ]
};

3. Register the service worker from your index.html:

    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('sw.js');
        })
      }
    </script>

4. Change your build script to "build": "snowpack build && workbox generateSW workbox-config.js",

The downside of this is that workbox is not really integrated. The injectManifest flow seems to be more flexible. I'm tinkering and brooding how this could be integrated with snowpack the best.

I would like to write my service worker with TypeScript too, so how could we make Snowpack to transpile another TypeScript file? Maybe using this build plugin?

[viinxent]

Hey @openscript,

Thanks man, this actually makes sense, also the build plugin could also work by targeting the service worker typescript then transpiling it. Will try it out, thanks a lot.

[openscript]

It would be great to hear from someone who is closer to snowpack, if it's the right way to go.

[YuukiToriyama]

I had the same problem, too. Nice instruction is this! This works well🎉 Thanks a lot, @openscript and @viinxent .

[openscript]

Just wanted to give this a follow-up as it's not that hard to integrate workbox with the injectManifest flow and TypeScript as well. The following example integrates Workbox with snowpack and TypeScript into a React project. The code listings are shortened here, but you find a link to the whole project in the end of this post. Unfold the following items to see the code.

1. Create your serviceWorker.ts in the src folder. Mine looks like this:

/* eslint-disable no-console */
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';
import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
import { NavigationRoute, registerRoute } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';

declare const self: {
  skipWaiting: () => void;
} & ServiceWorkerGlobalScope;

const SERVICE_WORKER_NAME = 'Timelet Service Worker';
const SERVICE_WORKER_VERSION = import.meta.env.SNOWPACK_PUBLIC_PACKAGE_VERSION;
// eslint-disable-next-line no-restricted-globals
const DEBUG_MODE = location.hostname === '127.0.0.1' || location.hostname === 'localhost';
const DAY_IN_SECONDS = 24 * 60 * 60;
const MONTH_IN_SECONDS = DAY_IN_SECONDS * 30;
const YEAR_IN_SECONDS = DAY_IN_SECONDS * 365;

if (DEBUG_MODE) {
  console.debug(`${SERVICE_WORKER_NAME}:: Version ${SERVICE_WORKER_VERSION} loading...`);
}

// ------------------------------------------------------------------------------------------
// Precaching configuration
// ------------------------------------------------------------------------------------------
cleanupOutdatedCaches();

// Make sure that all the assets passed in the array below are fetched and cached
// The empty array below is replaced at build time with the full list of assets to cache
// This is done by workbox-build-inject.js for the production build
// eslint-disable-next-line no-underscore-dangle
const assetsToCache = self.__WB_MANIFEST;

if (DEBUG_MODE) {
  console.trace(`${SERVICE_WORKER_NAME}:: Assets that will be cached: `, assetsToCache);
}

precacheAndRoute(assetsToCache);

// ------------------------------------------------------------------------------------------
// Routes
// ------------------------------------------------------------------------------------------

// Default page handler for offline usage,
// where the browser does not how to handle deep links
// it's a SPA, so each path that is a navigation should default to index.html
const defaultRouteHandler = createHandlerBoundToURL('/index.html');
const defaultNavigationRoute = new NavigationRoute(defaultRouteHandler, {
  // allowlist: [],
  // denylist: [],
});
registerRoute(defaultNavigationRoute);

// Cache the Google Fonts stylesheets with a stale while revalidate strategy.
registerRoute(
  /^https:\/\/fonts\.googleapis\.com/,
  new StaleWhileRevalidate({
    cacheName: 'google-fonts-stylesheets'
  })
);

// Cache the Google Fonts webfont files with a cache first strategy for 1 year.
registerRoute(
  /^https:\/\/fonts\.gstatic\.com/,
  new CacheFirst({
    cacheName: 'google-fonts-webfonts',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200]
      }),
      new ExpirationPlugin({
        maxAgeSeconds: YEAR_IN_SECONDS,
        maxEntries: 30,
        purgeOnQuotaError: true // Automatically cleanup if quota is exceeded.
      })
    ]
  })
);

// Make JS/CSS fast by returning assets from the cache
// But make sure they're updating in the background for next use
registerRoute(/\.(?:js|map|css)$/, new StaleWhileRevalidate({ cacheName: 'style-script-cache' }));

// Cache images
// But clean up after a while
registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg)$/,
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 250,
        maxAgeSeconds: MONTH_IN_SECONDS,
        purgeOnQuotaError: true // Automatically cleanup if quota is exceeded.
      })
    ]
  })
);

// eslint-disable-next-line no-restricted-globals
addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    if (DEBUG_MODE) {
      console.trace(`${SERVICE_WORKER_NAME}:: New version became active`, assetsToCache);
    }
    self.skipWaiting();
  }
});

2. It's easy to integrate the workbox-webpack-plugin. Add the following dependencies:

{
  "dependencies": {
    "workbox-cacheable-response": "^6.1.0",
    "workbox-core": "^6.1.0",
    "workbox-expiration": "^6.1.0",
    "workbox-precaching": "^6.1.0",
    "workbox-routing": "^6.1.0",
    "workbox-strategies": "^6.1.0",
    "workbox-window": "^6.1.0"
  },
  "devDependencies": {

    "@snowpack/plugin-typescript": "^1.2.0",
    "@snowpack/plugin-webpack": "^2.3.0",

    "@types/snowpack-env": "^2.3.2",

    "glob": "^7.1.6",

    "typescript": "^4.1.3",
    "workbox-build": "^6.1.0",
    "workbox-cli": "^6.1.0",
    "workbox-webpack-plugin": "^6.1.0"
  },
}

3. Configure @snowpack/plugin-webpack in snowpack.config.js to use the workbox-webpack-plugin:

const package = require('./package.json');
process.env.SNOWPACK_PUBLIC_PACKAGE_VERSION = package.version;
process.env.SNOWPACK_PUBLIC_SERVICE_WORKER = 'sw.js';

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  plugins: [
    '@snowpack/plugin-typescript',
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          const { glob } = require("glob");
          const { InjectManifest } = require('workbox-webpack-plugin');
          const additionalManifestEntries = [
            ...glob.sync("*.{png,html,json,txt}", {cwd: './build'})
          ].map((e) => ({ url: e, revision: process.env.SNOWPACK_PUBLIC_PACKAGE_VERSION}));

          config.plugins.push(
            new InjectManifest({
              "mode": "development",
              "additionalManifestEntries": additionalManifestEntries,
              "swSrc": "./dist/serviceWorker.js",
              "swDest": process.env.SNOWPACK_PUBLIC_SERVICE_WORKER
            })
        );
          return config;
        },
      },
    ]
  ]
};

4. Integrate the service worker into your project. Here an example with Material UI and React:

import { Button, Snackbar } from '@material-ui/core';
import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { Workbox, messageSW } from 'workbox-window';

export default function ServiceWorkerIntegration() {
  const intl = useIntl();
  const workbox = new Workbox(import.meta.env.SNOWPACK_PUBLIC_SERVICE_WORKER);
  const [updateNotificationOpen, setUpdateNotificationOpen] = React.useState(false);
  const [registration, setRegistration] = React.useState<ServiceWorkerRegistration>();

  const showSkipWaitingPrompt = () => {
    setUpdateNotificationOpen(true);
  };

  const updateApplication = (currentRegistration?: ServiceWorkerRegistration) => () => {
    // skip waiting until all service workers are closed to force update
    if (currentRegistration && currentRegistration.waiting) {
      messageSW(currentRegistration.waiting, { type: 'SKIP_WAITING' });
      setUpdateNotificationOpen(false);
      window.location.reload();
    }
  };

  // register service worker on first load if the browser supports it
  React.useEffect(() => {
    if ('serviceWorker' in navigator) {
      // Open update prompt because there is an update waiting
      workbox.addEventListener('waiting', showSkipWaitingPrompt);
      workbox.register().then((r) => {
        setRegistration(r);
      });
    }
  }, []);

  const reloadButton = (
    <Button onClick={updateApplication(registration)} color="primary">
      <FormattedMessage id="action.reload" defaultMessage="Reload" description="Action to reload something" />
    </Button>
  );

  return (
    <Snackbar
      anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
      message={intl.formatMessage({
        id: 'action.updateApplication',
        defaultMessage: 'Reload to update this application',
        description: 'Requests the user to update the application'
      })}
      action={reloadButton}
      open={updateNotificationOpen}
    />
  );
}

My whole project can be found here. This example helped me a lot. Don't hesitate to ask questions.

[mwmcode]

@openscript thanks for sharing this.
Any idea how to console.log the config that's being passed toextendConfig function? It seems that Snowpack is swallowing all logs (even with --verbose & { logger } from 'snowpack')

[openscript]

I've just tested it again.. and it seems like the reworked log output of Snowpack covers somehow the console.log from the config. So I also don't get any visible output too :(

[mwmcode]

Yeah, makes it very difficult to debug

[mwmcode]

My bad 🤦‍♂️ it console.logs fine on build command (which is when snowpack runs plugin-webpack