Using Local Workbox Files Instead of CDN

[sebiniemann]

Feature request

Using local workbox files for the service worker, instead of loading them from a CDN.

What problem does this feature solve?

By using the CDN, any client will automatically open a connection to https://storage.googleapis.com/workbox-cdn/releases/... and inevitably transmit his IP address, which is regarded as personal information under EU law. As under the European General Data Protection Regulation, the site owner is responsible for any leak of personal information that is shared or made accessibly because of his site. Therefore, the site owner must obtain the clients permission in advance, or be able to ensure that no such information is shared/accessible.

This is especially a concern for services like workbox, since if many pages include it via a CDN, tracking a client between different sites becomes possible, which is even more restricted.

What does the proposed API look like?

Depending on the favoured solution, this would either need an additional config to let the site owner decide whether local files or the CDN should be used, or no changes at all if we could switch from CDN-only to local-only.

How should this be implemented in your opinion?

Instead of using the CDN, local files could be used as described under https://developers.google.com/web/tools/workbox/modules/workbox-sw

This would also be the easiest option compared to obtaining the clients permission beforehand. In addition, this also seems to comply with Privacy by Design and Default -- which is also a European General Data Protection Regulation requirement.

If I saw it correctly, the package workbox-build is used for this process, together with the generateSW function.

As of https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build, the source could easily be switched from CDN to local by adding importWorkboxFrom: 'local' to the function call. As stated in the documentation, this should also cover copying all needed files.

Are you willing to work on this yourself?

Sure 👍

I will gladly submit a pull request that adds importWorkboxFrom: 'local' to generateSW as well as making it configurable if required.

[sebiniemann]

There is also a privacy issue with the current inclusion of Google Analytics, as the current configuration neither anonymises the IP address nor limits tracking. Since its not configurable as of now, we simply skipped the ga config option and implemented our own solution using enhanceApp.js, to adhere to EU law.

If you think this should also be extended in Vuepress core (as I could also imagine to move this into a plugin later on), I would create another issue and will also be willing to work on this.

[sebiniemann]

Given that this is now 2 months old, I would like to bump this in order to get some feedback :)

So the main point was to make VuePress GDPR-compliant, especially the service worker implementation. On a side note, complying to modern data privacy standards could also be important to be prepared for future changes to other privacy laws. While changes are still discussed in the United States as far as I know, India for example already published a draft which was heavily inspired by the General Data Protection Regulation (GDPR).

On the bigger picture however, the default Google Analytics (GA) integration is also not up to date with current (European) standards. However, this can easily and individually be fixed by using a custom theme and enhanceApp.js. Having that said, a quick default improvement could still be to add ga('set', 'anonymizeIp', true); and forceSSL: true to the default GA integration under /lib/app/clientEntry.js.

So what are your thoughts on this? Would it be easier to achieve the aforementioned changes (seeing my first post, or the summary below) to the workbox integration after the plugin system is released, or is this independently, so that I could/should start working on the pull request immediately?

The change I have in mind is to edit /lib/build.js, and either replacing

await wbb.generateSW({

with

await wbb.generateSW({
   importWorkboxFrom: 'local',

or adding an option like

await wbb.generateSW({
   importWorkboxFrom: SW_IMPORT,

to let each user choose whether cdn, local, or any other setting is sufficient.

[anibalsanchez]

Somewhat related to this issue of using a CDN, I would like to use my CDN to load the static files.

I've tried to redefine the base to base: 'https://mycdn.com/docs/', but the SW does not load the critical files from an external domain.

It would be great to have a way to separate the content static files from the SW files that must be loaded from the domain.

[Akimyou]

May be need export a config like options.siteConfig.serviceWorkerConfig. In some country, is impossible to load Workbox Files from google cdn.

  if (options.siteConfig.serviceWorker) {
    logger.wait('\nGenerating service worker...')
    const wbb = require('workbox-build')
    await wbb.generateSW({
    await wbb.generateSW(Object.assign({
      swDest: path.resolve(outDir, 'service-worker.js'),
      globDirectory: outDir,
      globPatterns: ['**\/*.{js,css,html,png,jpg,jpeg,gif,svg,woff,woff2,eot,ttf,otf}']
    })
    }, options.siteConfig.serviceWorkerConfig || {}))
    await fs.writeFile(
      path.resolve(outDir, 'service-worker.js'),
      await fs.readFile(path.resolve(__dirname, 'service-worker/skip-waiting.js'), 'utf8'),

[ulivz]

Well, I'm still working for the next version, and this feature is simple to be implemented directly at @vuepress/plugin-pwa. if you are interest, welcome to create a PR.

Ref:

• WIP Plugin Documentation

[ulivz]

Fixed at 4640614. In 1.0.0.alpha-47 you can get this by:

module.exports = {
  plugins: [
    ['@vuepress/pwa', {
       serviceWorker: true,
       updatePopup: true,
       generateSWConfig: {
         importWorkboxFrom: 'local'
       }
    }],
  ]
}