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

Created on 31 Aug 2020  路  3Comments  路  Source: vuejs/vue-cli

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)

Most helpful comment

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.

All 3 comments

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

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.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

yyx990803 picture yyx990803  路  34Comments

xrei picture xrei  路  40Comments

ghenry picture ghenry  路  40Comments

dimavolo picture dimavolo  路  75Comments

AegirLeet picture AegirLeet  路  38Comments