Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mischnic/parcel-plugin-sw-cache
📦👷 Parcel plugin for caching using a service worker
https://github.com/mischnic/parcel-plugin-sw-cache
offline-first parcel parcel-plugin precache progressive-web-app service-worker workbox
Last synced: about 2 months ago
JSON representation
📦👷 Parcel plugin for caching using a service worker
- Host: GitHub
- URL: https://github.com/mischnic/parcel-plugin-sw-cache
- Owner: mischnic
- License: mit
- Created: 2018-01-22T19:46:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:41:57.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T21:57:22.579Z (about 2 months ago)
- Topics: offline-first, parcel, parcel-plugin, precache, progressive-web-app, service-worker, workbox
- Language: JavaScript
- Homepage: https://npm.im/parcel-plugin-sw-cache
- Size: 1.34 MB
- Stars: 47
- Watchers: 4
- Forks: 6
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-parcel - parcel-plugin-sw-cache - Run workbox-build after every build. (Plugins / Other)
- awesome - parcel-plugin-sw-cache - Parcel plugin for caching using a service worker, run workbox-build after every build. (PWA)
- awesome - parcel-plugin-sw-cache - Parcel plugin for caching using a service worker, run workbox-build after every build. (PWA)
README
# Parcel plugin for sw-caching
A [Parcel](https://parceljs.org/) plugin to run [workbox-build](https://github.com/GoogleChrome/workbox) after every build.
```sh
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](example/package.json)).
Configuration keys used by the plugin (default options first):
```js
{
"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):
```js
{
globDirectory: outDir,
globPatterns: ["**/*.{html,js,css,jpg,png}"],
swDest: swDest,
navigateFallback: publicURL + "/index.html",
clientsClaim: true,
skipWaiting: true,
templatedURLs: {
"/": ["index.html"]
}
}
```
and with `inject`:
```js
{
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`).
```js
runtimeCaching: [
{
urlPattern: /my-match\/api\.[0-9]+/i
}
]
```
becomes
```json
"runtimeCaching": [
{
"urlPattern": ["my-match\/api\\.[0-9]+", "i"]
}
]
```