mischnic/parcel-plugin-sw-cache

📦👷 Parcel plugin for caching using a service worker

Parcel plugin for sw-caching

A Parcel plugin to run workbox-build after every build.

yarn add -D parcel-plugin-sw-cache
# or
npm install -D parcel-plugin-sw-cache

The plugin is configured using the cache object inside package.json of your project. (Example). Configuration keys used by the plugin (default options first):

{
    "dependencies": {
        // ...
    },
    //...
    "cache": {
        "disablePlugin": false || true,
        "inDev": false || true,
        "strategy": "default" || "inject"
        "clearDist": true || false
    }
    //...
}

The remaining properties in this object will be passed to generateSW or injectManifest (depending on strategy). See https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build

In inject mode, occurences of __PUBLIC will be replaced with Parcel's public-url option. In this case, swSrc is also a required parameter.

No configuration options are mandatory, the default configuration will work just fine. (Creating a service worker to precache all files in the output directory without runtime caching). With strategy: "default", the default parameters passed to workbox-build are (which precaching all html, js, css, jpg and png files):

{
    globDirectory: outDir,
    globPatterns: ["**/*.{html,js,css,jpg,png}"],
    swDest: swDest,
    navigateFallback: publicURL + "/index.html",
    clientsClaim: true,
    skipWaiting: true,
    templatedURLs: {
        "/": ["index.html"]
    }
}

and with inject:

{
    globDirectory: outDir,
    globPatterns: [
        "**/*.{html,js,css,jpg,png,gif,svg,eot,ttf,woff,woff2}"
    ],
    swDest: swDest,
    templatedURLs: {
        "/": ["index.html"]
    }
}

To specify a RegExp, use an array instead (ignoreURLParametersMatching, navigateFallbackWhitelist, runtimeCaching.urlPattern, injectionPointRegexp).

runtimeCaching: [
    {
        urlPattern: /my-match\/api\.[0-9]+/i
    }
]

becomes

"runtimeCaching": [
    {
        "urlPattern": ["my-match\/api\\.[0-9]+", "i"]
    }
]