glob patterns doesn't match any files workbox - service-worker

Question

I am trying to generate service worker for the Polymer 3 with workbox 4.3.1.
I have some specific files inside bower and node_modules I want to cache.
I tried adding "en-in/node_modules/**" to globIgnores and include specific files like - en-in/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js in globPattern.
The config I tried is giving a error. I even tried adding globStrict: false. Even that didn't help.
Below is my workbox config:
globDirectory: "dist",
globPatterns: ["en-in/**/*.{js,json,css}",
"en-in/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js"],
globIgnores: [
"en-in/sw-reg.js",
"en-in/sw-custom.js",
"en-in/rev-manifest.json",
"en-in/package.json",
"en-in/workbox-v4.3.1/**/*",
"en-in/node_modules/**"
],
globStrict: false,
I am getting the below error:
One of the glob patterns doesn't match any files. Please remove or fix the following:
{
"globDirectory": "dist",
"globPattern": "en-in/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js",
"globIgnores": [
"en-in/sw-reg.js",
"en-in/sw-custom.js",
"en-in/rev-manifest.json",
"en-in/package.json",
"en-in/workbox-v4.3.1/**/*",
"en-in/node_modules/**",
"**/service-worker.js"
]
}

Answer 1

The code that does glob-ing in Workbox looks like:
globbedFiles = glob.sync(globPattern, {
cwd: globDirectory,
follow: globFollow,
ignore: globIgnores,
strict: globStrict,
});
Because you're passing in "en-in/node_modules/**" as one of the globIgnores patterns, "en-in/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js" is never going to match anything. In the glob module, ignore always takes precedence.
You have a number of approaches that would fix this:
As part of your build process, move the custom-elements-es5-adapter.*.js file out of node_modules and into a different directory, and load it from there.
Change your "en-in/**/*.{js,json,css}" in globPatterns to something like "en-in/{dir1,dir2,dir3}/**/*.{js,json,css}" so that it does not match node_modules by default, and remove "en-in/node_modules/**" from globIgnores. You can then leave "en-in/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js" in globPatterns, and it will not longer be ignored.
Change your "en-in/node_modules/**" in globIgnores so that it doesn't match en-in/node_modules/#webcomponents. (I forget the syntax for doing that, but you might be able to figure it out if the other two options don't work.)
There are probably a few other alternatives as well. But hopefully that explains the root cause.

Answer 2

Here below the Polymer 3 notes at its page for service worker. They made easy of life :)
Service Worker
A Service Worker is loaded and registered in the index.html file. However, during development (to make debugging easier), the Service Worker does not actually exist, and only a stub file is used.
The production time Service Worker is automatically created during build time, i.e. by running npm run build or npm run build:static. This file is generated based on the polymer.json and sw-precache-config.js configuration files, and you can find it under each of the build directories:
build/
├── es5-bundled/
| └── service-worker.js
├── es6-bundled/
| └── service-worker.js
├── esm-bundled/
| └── service-worker.js
└── ...
By default, all of the source files (inside the /src directory) will be pre-cached, as specified in the sw-precache-config.js configuration file. If you want to change this behaviour, check out the sw-precache-config docs.
Source: https://pwa-starter-kit.polymer-project.org/building-and-deploying

Answer 3

I had the same issue and it was resolved when I explicitly changed the globPatterns to the following
globPatterns: [
'**/*.js',
'**/*.html',
'**/*.css',
'**/*.json',
'**/*.svg',
'**/*.png',
'**/*.gif',
'**/*.txt',
],