0

Library Affected: workbox-sw 4.3.1

Browser & Platform: all browsers

Issue or Feature Request Description: globPatterns not working

workbox-config.js:

module.exports = {
  globDirectory: "dist/",
  globPatterns: [
    "**/*.{txt,svg,png,ico,html,js,json,css}"
  ],
  globIgnores: [
    '3rdpartylicenses.txt',
    'favicon.ico',
    'manifest.json',
    'assets/icons/**',
    'assets/images/**',
    'pdfjsWorker.**.js',
    'favicon-16x16.png',
    'favicon-32x32.png',

  ],
  swSrc: "sw/sw-default.js",
  swDest:"sw/sw-injected.js"

};

workbox-build-inject.js:

const {injectManifest} = require('workbox-build');

// We reuse the configuration from Workbox CLI
var workboxConfig = require('./workbox-config.js');

// Adding one extra property
workboxConfig.swSrc = 'sw/sw-default.js';

// Deleting unneeded property
delete workboxConfig.runtimeCaching;

// Genrate manifest file ang inject them into the precache entry of the sw-default.js file
injectManifest(workboxConfig)
  .then(({count, size}) => {
    console.log(`Generated ${workboxConfig.swDest}, which will precache ${count} files, totaling ${size} bytes.`)
  });

running this command:

npm run workbox-build-inject

gives me:

Generated sw/sw-injected.js, which will precache 46 files, totaling 2464057 bytes.

If i remove the globPatterns array from workbox-config.js and run the command again, it gives me:

Generated sw/sw-injected.js, which will precache 8 files, totaling 2362657 bytes.

globPatterns array adds 38 files to the cahce.

However, some of the svg-files that is supposed to be cached results in the following error if i take my PWA application offline: console output from browser:

polyfills-es2015.660…617b89c20560bc.js:1 GET https://<domain here>/assets/closeIcon.svg net::ERR_INTERNET_DISCONNECTED

How can i solve this? To me it looks like the workbox-config has been properly set to cache all svg files? Why did this not work for the file "closeIcon.svg" ? Other svg-files work just fine.

closeIcon.svg and all the other svg-files are inside the precaching.precacheAndRoute array inside sw-injected.js

Please advice.

Turbolego
  • 9
  • 1
  • 5
  • Are you sure that you're testing when the service worker is in control of the current page? Normally, unless you're using `clientsClaim: true`, the newly registered service worker won't take control until the _next_ time you visit a page under its scope. – Jeff Posnick Mar 02 '21 at 14:59
  • @JeffPosnick the SVG file that gives me an error, "closeIcon.svg", is the icon for the close button of a dialog in the app. I have noticed that if i open the dialog while offline, the error occurs. But if i open the dialog one time while online and then go offline and open the dialog again, i get the icon and no error. Perhaps this is the behaviour you are talking about in regards to "the _next_ time you visit a page" ? Is it intended that the user must open the dialog at least 1 time while online before it can work while offline? To cache the SVG-icon for the close-button? Thanks! :D – Turbolego Mar 02 '21 at 17:10
  • It's explained at https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#the_first_service_worker – Jeff Posnick Mar 02 '21 at 17:15

0 Answers0