Skip to content

Use workbox-cli to generate the service worker #5681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mstange merged 2 commits into from
Nov 18, 2025
Merged

Use workbox-cli to generate the service worker #5681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f30a98
Use workbox-cli to generate the service worker.
mstange Sep 3, 2025
3fa962c
Merge branch 'main' into workbox-cli
mstange Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@
"build:clean": "rimraf dist && mkdirp dist",
"build:quiet": "yarn build:clean && cross-env NODE_ENV=development webpack",
"build": "yarn build:quiet --progress",
"build-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production webpack",
"build-prod": "yarn build-prod:quiet --progress",
"build-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production webpack && yarn build-sw",
"build-prod": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production webpack --progress && yarn build-sw",
Comment on lines +16 to +17
Copy link
Member

@canova canova Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, we need to call build-sw at the end because it depends on the webpack outputs, right?

Copy link
Contributor Author

@mstange mstange Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's right.

"build-l10n": "yarn build:clean && cross-env NODE_ENV=development L10N=1 webpack --progress",
"build-l10n-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production L10N=1 webpack",
"build-l10n-prod": "yarn build-l10n-prod:quiet --progress",
"build-l10n-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production L10N=1 webpack && yarn build-sw",
"build-l10n-prod": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production L10N=1 webpack --progress && yarn build-sw",
"build-photon": "webpack --config res/photon/webpack.config.js",
"build-sw": "workbox generateSW workbox-config.js",
"build-symbolicator-cli": "yarn build-symbolicator-cli:quiet --progress",
"build-symbolicator-cli:quiet": "yarn build:clean && cross-env NODE_ENV=production webpack --config src/symbolicator-cli/webpack.config.js",
"lint": "node bin/output-fixing-commands.js run-p lint-js lint-css prettier-run",
Expand Down Expand Up @@ -187,7 +188,7 @@
"webpack": "^5.102.1",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2",
"workbox-webpack-plugin": "^7.3.0",
"workbox-cli": "^7.3.0",
"yargs": "^18.0.0"
},
"resolutions": {
Expand Down
62 changes: 0 additions & 62 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ const path = require('path');
const webpack = require('webpack');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { GenerateSW } = require('workbox-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const includes = [path.join(__dirname, 'src'), path.join(__dirname, 'res')];
Expand Down Expand Up @@ -113,65 +112,4 @@ const config = {
},
};

if (config.mode === 'production') {
// For an easier debugging with an unminified service worker, add this plugin
// in development mode as well.
config.plugins.push(
new GenerateSW({
// All navigation that's not in the cache will respond the entry for /index.html. ("SPA" mode)
navigateFallback: '/index.html',
// Cleanup the caches from old workbox installations. This isn't useful
// for us _now_ but this can be later for future versions.
cleanupOutdatedCaches: true,
// Our biggest asset in production is currently 1.34MB. Therefore 2MB in
// production looks sensible (this is the default too).
// If it's not cached then index.html is answered instead because of
// navigateFallback, then everything it's broken.
// In development we want to use a higher limit so that we don't hit the
// limit. This isn't normally used but can be used when debugging the
// service worker.
maximumFileSizeToCacheInBytes:
config.mode === 'development' ? 10 * 1024 * 1024 : 2 * 1024 * 1024,
// All scripts, including imported scripts, will be requested bypassing
// HTTP cache, to determine if an update is needed, because we use
// `updateViaCache: none` during the register. That's why we don't need to
// use a hash or version in this file name.
// For more information and background, see:
// - discussion in https://github.com/w3c/ServiceWorker/issues/106
// - chrome update in https://developer.chrome.com/blog/fresher-sw/
// - step 8.21 in https://w3c.github.io/ServiceWorker/#update-algorithm
importScripts: ['/service-worker-compat.js'],
navigateFallbackDenylist: [
// requests to docs and photon example pages shouldn't be redirected to
// the index file as they're not part of the SPA
/^\/docs(?:\/|$)/,
/^\/photon(?:\/|$)/,
// Allow navigating to source maps. This is not necessary, but it is
// more developer friendly.
/^\/[^/?]+\.map$/,
// While excluding the service worker file isn't necessary to work, it's
// convenient that we can just access it from a browser.
/^\/sw\.js/,
],
exclude: [
// exclude user docs and photon from the cache
'docs',
'photon',
// exclude also the netlify-specific files that aren't actually served
// because this would fail the service worker installation
'_headers',
'_redirects',
// do not cache source maps
/\.map$/,
// nor the service worker imported script
'service-worker-compat.js',
],
// This is the service worker file name. It should never change if we want
// that the browser updates it. If this changes it will never be updated
// and the user will be stuck with an old version.
swDest: 'sw.js',
})
);
}

module.exports = config;
59 changes: 59 additions & 0 deletions workbox-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
module.exports = {
// All navigation that's not in the cache will respond the entry for /index.html. ("SPA" mode)
navigateFallback: '/index.html',
// Cleanup the caches from old workbox installations. This isn't useful
// for us _now_ but this can be later for future versions.
cleanupOutdatedCaches: true,
// Our biggest asset in production is currently 1.34MB. Therefore 2MB in
// production looks sensible (this is the default too).
// If it's not cached then index.html is answered instead because of
// navigateFallback, then everything it's broken.
// In development we want to use a higher limit so that we don't hit the
// limit. This isn't normally used but can be used when debugging the
// service worker.
maximumFileSizeToCacheInBytes:
process.env.NODE_ENV === 'development' ? 10 * 1024 * 1024 : 2 * 1024 * 1024,
// Don't append cache busting query strings to files whose filenames contain
// hashes from the bundler.
dontCacheBustURLsMatching: /\b[0-9a-f]{20}\./,
// All scripts, including imported scripts, will be requested bypassing
// HTTP cache, to determine if an update is needed, because we use
// `updateViaCache: none` during the register. That's why we don't need to
// use a hash or version in this file name.
// For more information and background, see:
// - discussion in https://github.com/w3c/ServiceWorker/issues/106
// - chrome update in https://developer.chrome.com/blog/fresher-sw/
// - step 8.21 in https://w3c.github.io/ServiceWorker/#update-algorithm
importScripts: ['/service-worker-compat.js'],
navigateFallbackDenylist: [
// requests to docs and photon example pages shouldn't be redirected to
// the index file as they're not part of the SPA
/^\/docs(?:\/|$)/,
/^\/photon(?:\/|$)/,
// Allow navigating to source maps. This is not necessary, but it is
// more developer friendly.
/^\/[^/?]+\.map$/,
// While excluding the service worker file isn't necessary to work, it's
// convenient that we can just access it from a browser.
/^\/sw\.js/,
],
globDirectory: 'dist',
globPatterns: ['**/*'],
globIgnores: [
// exclude user docs and photon from the cache
'docs/**',
'photon/**',
// exclude also the netlify-specific files that aren't actually served
// because this would fail the service worker installation
'_headers',
'_redirects',
// do not cache source maps
'**/*.map',
// nor the service worker imported script
'service-worker-compat.js',
],
// This is the service worker file name. It should never change if we want
// that the browser updates it. If this changes it will never be updated
// and the user will be stuck with an old version.
swDest: 'dist/sw.js',
};
Loading