Skip to content

Commit c07faaf

Browse files
mstangemstange
authored
Use workbox-cli to generate the service worker (#5681)
[Production](https://profiler.firefox.com/) | [Deploy preview](https://deploy-preview-5681--perf-html.netlify.app/) This replaces the webpack plugin with an invocation of the `workbox` CLI binary.
2 parents 723ef00 + 3fa962c commit c07faaf

File tree

4 files changed

+736
-116
lines changed

4 files changed

+736
-116
lines changed

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@
1313
"build:clean": "rimraf dist && mkdirp dist",
1414
"build:quiet": "yarn build:clean && cross-env NODE_ENV=development webpack",
1515
"build": "yarn build:quiet --progress",
16-
"build-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production webpack",
17-
"build-prod": "yarn build-prod:quiet --progress",
16+
"build-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production webpack && yarn build-sw",
17+
"build-prod": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production webpack --progress && yarn build-sw",
1818
"build-l10n": "yarn build:clean && cross-env NODE_ENV=development L10N=1 webpack --progress",
19-
"build-l10n-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production L10N=1 webpack",
20-
"build-l10n-prod": "yarn build-l10n-prod:quiet --progress",
19+
"build-l10n-prod:quiet": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production L10N=1 webpack && yarn build-sw",
20+
"build-l10n-prod": "yarn build:clean && yarn build-photon && cross-env NODE_ENV=production L10N=1 webpack --progress && yarn build-sw",
2121
"build-photon": "webpack --config res/photon/webpack.config.js",
22+
"build-sw": "workbox generateSW workbox-config.js",
2223
"build-symbolicator-cli": "yarn build-symbolicator-cli:quiet --progress",
2324
"build-symbolicator-cli:quiet": "yarn build:clean && cross-env NODE_ENV=production webpack --config src/symbolicator-cli/webpack.config.js",
2425
"lint": "node bin/output-fixing-commands.js run-p lint-js lint-css prettier-run",
@@ -187,7 +188,7 @@
187188
"webpack": "^5.102.1",
188189
"webpack-cli": "^6.0.1",
189190
"webpack-dev-server": "^5.2.2",
190-
"workbox-webpack-plugin": "^7.3.0",
191+
"workbox-cli": "^7.3.0",
191192
"yargs": "^18.0.0"
192193
},
193194
"resolutions": {

‎webpack.config.js‎

Lines changed: 0 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ const path = require('path');
22
const webpack = require('webpack');
33
const fs = require('fs');
44
const HtmlWebpackPlugin = require('html-webpack-plugin');
5-
const { GenerateSW } = require('workbox-webpack-plugin');
65
const CopyWebpackPlugin = require('copy-webpack-plugin');
76
const CircularDependencyPlugin = require('circular-dependency-plugin');
87
const includes = [path.join(__dirname, 'src'), path.join(__dirname, 'res')];
@@ -113,65 +112,4 @@ const config = {
113112
},
114113
};
115114

116-
if (config.mode === 'production') {
117-
// For an easier debugging with an unminified service worker, add this plugin
118-
// in development mode as well.
119-
config.plugins.push(
120-
new GenerateSW({
121-
// All navigation that's not in the cache will respond the entry for /index.html. ("SPA" mode)
122-
navigateFallback: '/index.html',
123-
// Cleanup the caches from old workbox installations. This isn't useful
124-
// for us _now_ but this can be later for future versions.
125-
cleanupOutdatedCaches: true,
126-
// Our biggest asset in production is currently 1.34MB. Therefore 2MB in
127-
// production looks sensible (this is the default too).
128-
// If it's not cached then index.html is answered instead because of
129-
// navigateFallback, then everything it's broken.
130-
// In development we want to use a higher limit so that we don't hit the
131-
// limit. This isn't normally used but can be used when debugging the
132-
// service worker.
133-
maximumFileSizeToCacheInBytes:
134-
config.mode === 'development' ? 10 * 1024 * 1024 : 2 * 1024 * 1024,
135-
// All scripts, including imported scripts, will be requested bypassing
136-
// HTTP cache, to determine if an update is needed, because we use
137-
// `updateViaCache: none` during the register. That's why we don't need to
138-
// use a hash or version in this file name.
139-
// For more information and background, see:
140-
// - discussion in https://github.com/w3c/ServiceWorker/issues/106
141-
// - chrome update in https://developer.chrome.com/blog/fresher-sw/
142-
// - step 8.21 in https://w3c.github.io/ServiceWorker/#update-algorithm
143-
importScripts: ['/service-worker-compat.js'],
144-
navigateFallbackDenylist: [
145-
// requests to docs and photon example pages shouldn't be redirected to
146-
// the index file as they're not part of the SPA
147-
/^\/docs(?:\/|$)/,
148-
/^\/photon(?:\/|$)/,
149-
// Allow navigating to source maps. This is not necessary, but it is
150-
// more developer friendly.
151-
/^\/[^/?]+\.map$/,
152-
// While excluding the service worker file isn't necessary to work, it's
153-
// convenient that we can just access it from a browser.
154-
/^\/sw\.js/,
155-
],
156-
exclude: [
157-
// exclude user docs and photon from the cache
158-
'docs',
159-
'photon',
160-
// exclude also the netlify-specific files that aren't actually served
161-
// because this would fail the service worker installation
162-
'_headers',
163-
'_redirects',
164-
// do not cache source maps
165-
/\.map$/,
166-
// nor the service worker imported script
167-
'service-worker-compat.js',
168-
],
169-
// This is the service worker file name. It should never change if we want
170-
// that the browser updates it. If this changes it will never be updated
171-
// and the user will be stuck with an old version.
172-
swDest: 'sw.js',
173-
})
174-
);
175-
}
176-
177115
module.exports = config;

‎workbox-config.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
module.exports = {
2+
// All navigation that's not in the cache will respond the entry for /index.html. ("SPA" mode)
3+
navigateFallback: '/index.html',
4+
// Cleanup the caches from old workbox installations. This isn't useful
5+
// for us _now_ but this can be later for future versions.
6+
cleanupOutdatedCaches: true,
7+
// Our biggest asset in production is currently 1.34MB. Therefore 2MB in
8+
// production looks sensible (this is the default too).
9+
// If it's not cached then index.html is answered instead because of
10+
// navigateFallback, then everything it's broken.
11+
// In development we want to use a higher limit so that we don't hit the
12+
// limit. This isn't normally used but can be used when debugging the
13+
// service worker.
14+
maximumFileSizeToCacheInBytes:
15+
process.env.NODE_ENV === 'development' ? 10 * 1024 * 1024 : 2 * 1024 * 1024,
16+
// Don't append cache busting query strings to files whose filenames contain
17+
// hashes from the bundler.
18+
dontCacheBustURLsMatching: /\b[0-9a-f]{20}\./,
19+
// All scripts, including imported scripts, will be requested bypassing
20+
// HTTP cache, to determine if an update is needed, because we use
21+
// `updateViaCache: none` during the register. That's why we don't need to
22+
// use a hash or version in this file name.
23+
// For more information and background, see:
24+
// - discussion in https://github.com/w3c/ServiceWorker/issues/106
25+
// - chrome update in https://developer.chrome.com/blog/fresher-sw/
26+
// - step 8.21 in https://w3c.github.io/ServiceWorker/#update-algorithm
27+
importScripts: ['/service-worker-compat.js'],
28+
navigateFallbackDenylist: [
29+
// requests to docs and photon example pages shouldn't be redirected to
30+
// the index file as they're not part of the SPA
31+
/^\/docs(?:\/|$)/,
32+
/^\/photon(?:\/|$)/,
33+
// Allow navigating to source maps. This is not necessary, but it is
34+
// more developer friendly.
35+
/^\/[^/?]+\.map$/,
36+
// While excluding the service worker file isn't necessary to work, it's
37+
// convenient that we can just access it from a browser.
38+
/^\/sw\.js/,
39+
],
40+
globDirectory: 'dist',
41+
globPatterns: ['**/*'],
42+
globIgnores: [
43+
// exclude user docs and photon from the cache
44+
'docs/**',
45+
'photon/**',
46+
// exclude also the netlify-specific files that aren't actually served
47+
// because this would fail the service worker installation
48+
'_headers',
49+
'_redirects',
50+
// do not cache source maps
51+
'**/*.map',
52+
// nor the service worker imported script
53+
'service-worker-compat.js',
54+
],
55+
// This is the service worker file name. It should never change if we want
56+
// that the browser updates it. If this changes it will never be updated
57+
// and the user will be stuck with an old version.
58+
swDest: 'dist/sw.js',
59+
};

0 commit comments

Comments
 (0)