
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
service-worker-webpack
Advanced tools
A Webpack Plugin to generate a Service Worker. Powered by Workbox
A Webpack plugin that generates a Service Worker. Powered by Workbox.
A minimal wrapper around Workbox to quickly add a service worker via your webpack build process.
Compatible with Webpack 4 and Webpack 5.
Add this package to your project:
npm install --save dev service-worker-webpack
or yarn add --dev service-worker-webpack
Update your webpack.config.js
:
const path = require('path');
+ const { ServiceWorkerPlugin } = require("service-worker-webpack");
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
+ plugins: [new ServiceWorkerPlugin()],
};
That's it! A service worker that precaches all of your build's static assets will be generated. Static assets will be served from the service worker's cache instead of making network calls, speeding up your page views and enabling offline viewing 🙌.
next build && next start
.Application
tab and then clicking the Service Workers
tab.Name | Description | Type |
---|---|---|
enableInDevelopment |
Enable the service worker in local development. Depending on your service worker configuration, this can be problematic for developer workflows where you end up serving outdated cached files. If Defaults to | boolean | undefined |
enableWorkboxLogging |
Enable workbox logging. Workbox logging is both very helpful and very chatty. By default, workbox will use the webpack mode to determine whether or not to enable workbox logging. When the mode is Setting this to Note: This option is only relevant when using the service worker generated by workbox. It does not apply to the development service worker generated when Defaults to | boolean | undefined |
registration.autoRegister |
Autoregister the service worker. If
Defaults to | boolean | undefined |
registration.entry |
The webpack entry to inject the auto registration code into. The resulting bundle must be present on all pages that expect to register the service worker. Defaults to | string | undefined |
registration.path |
The registration path tells the browser where your service worker is located. Defaults to | string | undefined |
registration.scope |
The scope of the service worker determines which files the service worker controls, in other words, from which path the service worker will intercept requests. The default scope is the location of the service worker file, and extends to all directories below. So if service-worker.js is located in the root directory, the service worker will control requests from all files at this domain. Defaults to | string | undefined |
workbox |
Options passed to Defaults to | InjectManifestOptions | GenerateSWOptions |
Check out the service-worker-webpack-example.
You must serve your application over HTTPS in production environments. Service Workers must be served from the site's origin over HTTPS.
Some browsers special case localhost
, so this may not be necessary during local development. HTTPS is not handled by this library. You can use a reverse proxy like Nginx or Caddy if you want to setup HTTPS for local development.
The service worker origin constraint means that service workers can not control pages on a different subdomain. Eg mysite.com
can not be controlled by a service worker if that was served from a subdomain such as mycdn.mysite.com
. To learn more about how service workers work in general, read MDN's documentation.
Workbox is great -- it's well documented and straightforward to customize your service worker. workbox-webpack-plugin makes caching your webpack assets simple, but I found myself reimplementing the same patterns across projects. Specifically:
PR's and issues welcomed! For more guidance check out CONTRIBUTING.md
See the project's MIT License.
1.0.0
service-worker-webpack
is now 1.0! This library will now follow semantic versioning.FAQs
A Webpack Plugin to generate a Service Worker. Powered by Workbox
The npm package service-worker-webpack receives a total of 0 weekly downloads. As such, service-worker-webpack popularity was classified as not popular.
We found that service-worker-webpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.