Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
workbox-webpack-plugin
Advanced tools
A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
The workbox-webpack-plugin is a plugin for webpack that simplifies the process of configuring and generating a service worker for your web application. It integrates with the webpack build process and generates a service worker that can cache assets, manage runtime caching strategies, and help make your web app work offline.
Precaching
Precaching allows you to specify which assets should be cached during the build process. This is useful for ensuring that your web app's core files are cached and available offline. The code sample shows how to exclude images from precaching and set up a runtime caching strategy for them instead.
const { GenerateSW } = require('workbox-webpack-plugin');
module.exports = {
// Other webpack config...
plugins: [
new GenerateSW({
// Do not precache images
exclude: [/.(png|jpg|jpeg)$/],
// Define runtime caching rules.
runtimeCaching: [{
// Match any request that ends with .png, .jpg, .jpeg or .svg.
urlPattern: /.\.(?:png|jpg|jpeg|svg)$/,
// Apply a cache-first strategy.
handler: 'CacheFirst',
options: {
// Use a custom cache name.
cacheName: 'images',
// Only cache 10 images.
expiration: {
maxEntries: 10,
},
},
}],
}),
],
};
Runtime Caching
Runtime caching is a strategy that allows you to specify how different types of requests are handled by the service worker. The code sample demonstrates how to set up a NetworkFirst strategy for API requests, which tries to fetch the latest data over the network but falls back to the cache if the network is unavailable.
const { GenerateSW } = require('workbox-webpack-plugin');
module.exports = {
// Other webpack config...
plugins: [
new GenerateSW({
runtimeCaching: [{
urlPattern: new RegExp('https://api.example.com'),
handler: 'NetworkFirst',
options: {
networkTimeoutSeconds: 10,
cacheName: 'api-cache',
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60 * 24 * 7, // 1 week
},
cacheableResponse: {
statuses: [0, 200],
},
},
}],
}),
],
};
Custom Service Worker
The InjectManifest plugin allows you to use a custom service worker file, into which the plugin will inject the precache manifest. This gives you full control over the service worker's behavior while still benefiting from Workbox's precaching features. The code sample shows how to specify the source and destination for the custom service worker.
const { InjectManifest } = require('workbox-webpack-plugin');
module.exports = {
// Other webpack config...
plugins: [
new InjectManifest({
swSrc: './src/sw.js',
swDest: 'service-worker.js',
}),
],
};
This is a webpack plugin that generates a service worker using sw-precache that caches webpack's output assets. It is similar to workbox-webpack-plugin but is less feature-rich and is no longer actively maintained.
offline-plugin is another webpack plugin for creating a service worker that makes your application work offline. It offers similar functionalities to workbox-webpack-plugin but with a different API and configuration options. It is also not as actively maintained as Workbox.
This module's documentation can be found at https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
FAQs
A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
The npm package workbox-webpack-plugin receives a total of 2,939,460 weekly downloads. As such, workbox-webpack-plugin popularity was classified as popular.
We found that workbox-webpack-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers 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.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.