parcel-plugin-workbox-cache

An updated plugin for Parcel to generate a service worker with Workbox, derived from Anders Dahnielson's parcel-plugin-workbox.

Install

You can either install by running yarn (recommended)

yarn add parcel-plugin-workbox-cache --dev

or use npm

npm install parcel-plugin-workbox-cache --save-dev

Usage

When you build resources with Parcel, the plugin will generate a service worker sw.js and insert it into your project's index.html entry file.

You can customize the settings by adding a .workbox-config.js file in the root of your project. This will be the settings that will be passed to generateSW()function found in workbox-build dependency. If you don't create any config file, default settings will be passed:

    {
      importScripts: ['./worker.js'],
      globDirectory: './dist'
      globPatterns: [`**/*.{css,html,js,gif,ico,jpg,png,svg,webp,woff,woff2,ttf,otf}`]
    }

Here's an example .workbox-config.js file

module.exports = {
  importScripts: [],
  globDirectory: "./dist",
  globPatterns: [
    "**/*.{css,html,js,gif,ico,jpg,png,svg,webp,woff,woff2,ttf,otf,eot,webmanifest,manifest}"
  ],
  runtimeCaching: [
    {
      urlPattern: new RegExp("^https:\/\/firebasestorage\\.googleapis\\.com\/.*", "gi"),
      handler: "CacheFirst",
      options: {
        cacheableResponse: {
          statuses: [0, 200]
        },
        cacheName: "images"
      }
    }
  ],
  offlineGoogleAnalytics: true
};

By default, a worker.js file, where you can write the logic for your service worker, will be read from your project's root directory and imported into sw.js unless you change this setting. Additionally, a CDN version of Google Workbox is imported automatically.

Note: If you have this plugin active during development, you will need to either disable or manually delete the service worker to bypass caching.