PWA plugin uses Google CDN by default with no (obvious) way to turn it off

[KB1RD]

Version

4.5.4

Reproduction link

This is just the default created by vue-cli with PWAs enabled:
https://github.com/KB1RD/google-cdn-default

Environment info

  System:
    OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 77.0.1
  npmPackages:
    @ant-design-vue/babel-helper-vue-transform-on:  1.0.1 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.5.4 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.5.4 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.4 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.4 
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.4 
    @vue/cli-plugin-router:  4.5.4 
    @vue/cli-plugin-vuex:  4.5.4 
    @vue/cli-service: ~4.5.0 => 4.5.4 
    @vue/cli-shared-utils:  4.5.4 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    vue: ^2.6.11 => 2.6.12 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.3 (16.0.0-beta.5)
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.4.6

Steps to reproduce

1. Run yarn build
2. Look in @/dist/service-worker.js. Notice the importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); line.
3. Note that this still happens when building a custom worker with InjectManifest

What is expected?

1. The documentation for @vue/cli-plugin-pwa should inform users that the Google CDN will be used and provide a method for changing CDNs or switching to all-local serving
2. This method should not be too complicated

What is actually happening?

1. There seems to be no warning or note anywhere that the CDN will be used, except if the user is familiar with workbox
2. The method to change CDNs is too complicated. As far as I can tell, this would involve having a separate webpack build that builds the worker and uses InjectManifest to make it work, but I still cannot figure out how to remove the CDN (except by editing it out post-build)

[sudo-dax]

that concerns me - the reason i want to move to vue is to degooglify my apps

[grandgeorg]

The worst thing is, that it not only uses CDN but also an outdated version v4.3.1. The current version as of this writing would be v.5.1.3. There is also no easy way to update this, because @vue/cli-plugin-pwa has workbox-webpack-plugin with version ^4.3.1 as dependency (current version again would be 5.1.3) and workbox-webpack-plugin has then workbox-build with version ^4.3.1 as dependency (current version again would be 5.1.3). --- workbox-build is the package responsible for loading from CDN.

[Sharlock93]

if you are using yarn you can use the resolutions field in the package.json file to update this, it works quite well. it was mentioned here.
#5119

[ssc-hrep3]

For using a local import (no CDN), see #3361 (comment)

[KB1RD]

For using a local import (no CDN), see #3361 (comment)

This no longer works... Google removed support for it. You can see this configuration option present in 2019, when that comment was posted, but isn't there now. Just did a quick search through their repo to confirm that it isn't a hidden config option, and their unit tests ensure that it does not exist. Thank you for pointing that out, though.

[ssc-hrep3]

For using a local import (no CDN), see #3361 (comment)

This no longer works... Google removed support for it. You can see this configuration option present in 2019, when that comment was posted, but isn't there now. Just did a quick search through their repo to confirm that it isn't a hidden config option, and their unit tests ensure that it does not exist. Thank you for pointing that out, though.

I just generated the service worker with a local import using that option and can confirm that it still works (an extra folder with a dependency is generated into the /dist). Maybe vue-cli is using an old version for that purpose.

[KB1RD]

@ssc-hrep3 you're right, my bad... I forgot Vue was using an older version. As mentioned in that issue you linked, though, it would be good to make this a default or at least document it.

The one thing is the plan for Vue CLI v5 has a plan to support Workbox 6, which removes this option.

[KB1RD]

I don't mean to spam this issue, but this issue in Workbox seems relevant:

For the time being, we will still publish bundles of the Workbox runtime to the CDN, but my expectation is that it will be only be useful for injectManifest users. Longer-term, we may phase out the CDN entirely, and encourage all developers to go through a flow that produces a Workbox runtime bundle that's customized for their specific usage.

Later today I might play around with the Vue CLI dev builds to see if Workbox 6 defaults to building locally instead of using the CDN. It's a bit hard to track progress on this issue.