Socket
Socket
Sign inDemoInstall

workbox-webpack-plugin

Package Overview
Dependencies
Maintainers
6
Versions
100
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

workbox-webpack-plugin

A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.


Version published
Weekly downloads
3.5M
increased by3.1%
Maintainers
6
Weekly downloads
 
Created

What is workbox-webpack-plugin?

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.

What are workbox-webpack-plugin's main functionalities?

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',
    }),
  ],
};

Other packages similar to workbox-webpack-plugin

Keywords

FAQs

Package last updated on 23 Apr 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc