From b9333b12efe4d01317e986bea0cdb71191641509 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Thu, 22 Sep 2022 20:43:23 +0200 Subject: [PATCH 1/3] fix(pwa): registration URL on development --- pwa/src/lib/registration.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pwa/src/lib/registration.js b/pwa/src/lib/registration.js index 4e9e43769..0a4d4d542 100644 --- a/pwa/src/lib/registration.js +++ b/pwa/src/lib/registration.js @@ -133,7 +133,7 @@ export function register(config) { window.addEventListener('load', () => { // By compiling the dev SW to the 'public' dir, this URL works in // both dev and production modes - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js` + const swUrl = new URL('service-worker.js', publicUrl) if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. From 462e33bcf7858f6542de791a55e9d0745bed0691 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Thu, 22 Sep 2022 20:45:00 +0200 Subject: [PATCH 2/3] fix(pwa): cache static assets network-first in dev env --- pwa/src/service-worker/service-worker.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/pwa/src/service-worker/service-worker.js b/pwa/src/service-worker/service-worker.js index 65c9f1ecd..018260b2a 100644 --- a/pwa/src/service-worker/service-worker.js +++ b/pwa/src/service-worker/service-worker.js @@ -154,8 +154,12 @@ export function setUpServiceWorker() { ) // Network-first caching by default + // (and for static assets while in development) + // * NOTE: there may be lazy-loading errors while offline in dev mode registerRoute( - ({ url }) => urlMeetsAppShellCachingCriteria(url), + ({ url }) => + urlMeetsAppShellCachingCriteria(url) || + (!PRODUCTION_ENV && fileExtensionRegexp.test(url.pathname)), new NetworkFirst({ cacheName: 'app-shell' }) ) From 67beebb5735aa8b120cdda1e387456b38509e11b Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Mon, 26 Sep 2022 22:22:42 +0200 Subject: [PATCH 3/3] fix(plugin): asset loader for fonts; file loader for others --- cli/src/lib/plugin/webpack.config.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/cli/src/lib/plugin/webpack.config.js b/cli/src/lib/plugin/webpack.config.js index 1a09fd9ac..dba2ef4f6 100644 --- a/cli/src/lib/plugin/webpack.config.js +++ b/cli/src/lib/plugin/webpack.config.js @@ -276,23 +276,34 @@ module.exports = ({ env: webpackEnv, config, paths }) => { }, }), }, + // 'asset/resource' fixes fonts, but 'file-loader' breaks css modules + // when used for all asset types. So use each for respective files + { + test: /\.(woff|woff2|eot|ttf|otf)$/i, + type: 'asset/resource', + generator: { + filename: 'static/media/[name].[hash][ext]', + }, + }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. // This loader doesn't use a "test" so it will catch all modules // that fall through the other loaders. { + loader: require.resolve('file-loader'), // Exclude `js` files to keep "css" loader working as it injects // its runtime that would otherwise be processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. exclude: [ - /^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, ], - type: 'asset/resource', + options: { + name: 'static/media/[name].[hash:8].[ext]', + }, }, ], },