RFC: PWA Plugin

/cc @addyosmani @jeffposnick @sudo-suhas

So, I’ve been working pretty hard on the next version of vue-cli, which uses a completely plugin-based architecture, and the PWA functionalities are now fully isolated in its own module: https://github.com/vuejs/vue-cli/tree/next/packages/%40vue/cli-plugin-pwa

A brief intro for the plugin API: index.js is the runtime plugin that will be loaded when users run npm run serve or npm run build. generator contains a module that will be invoked when the user scaffolds the project with the global vue command. The API should be pretty explanatory, and seems to cover most use cases. But any feedback is greatly appreciated.

Our previous PWA template is a fork of the main webpack template and has trouble keeping up with the upstream changes. This new setup should greatly reduce the maintenance scope for PWA-related features in the future.

After the launch of vue-cli 3.0, we should deprecate the pwa template and move all collaborations under the plugin instead.

[addyosmani]

I’m excited about this direction of encapsulating PWA functionality into a vue-cli plugin. I’ve handed maintainace of the PWA template to Jeff but am supportive of deprecating it in favor of the plugin once we can confirm feature parity.

Love the idea of no longer needing to keep in sync with the upstream changes to the webpack plugin. Thanks for looping us in, Evan. We’ll take a look.

[multiplegeorges]

I moved an existing project over to using this template with the cli beta and I found that the service worker didn’t behave as I expected with the existing configuration.

Problem:

The current configuration only returns index.html from the cache when the root of the app is called directly, as opposed to a link into the app like app.dom/login/new, for example.

This leads to “No Internet Connection” errors in the browser because nothing in the cache matches the route requested.

I expected navigation calls to always return index.html from the cache in order to support History mode routing in vue-router when the app is offline.

Proposal:

Change the workbox default settings in vue.config.js to:

workboxPluginMode: 'InjectManifest',
workboxOptions: {
  // swSrc is required in InjectManifest mode.
  swSrc: 'src/service-worker.js'
}

And the default contents of src/service-worker.js to be:

/* globals workbox */
// Workbox is automatically imported when this is built for production.
workbox.precaching.precacheAndRoute(self.__precacheManifest)
workbox.routing.registerNavigationRoute('/index.html')

// Service worker custom application code goes below this line.

I think this has two main benefits:

• Developers will expect that routing just works, even with SW caching, and this accomplishes that.
• It gives developers a location in the project to begin putting their custom SW code, such as support for push notifications.

If this sounds good, I’m happy to put together a PR with these changes.