[proposal] PWA module

[pi0]

Preface

Nuxt project's goal is providing best PWA practices out-of-the box to users without need to complex project config and extra maintenance. Several attempts are already made to take such approach. We have two options for this, making nuxt.js a fully optioned framework which implements one solution for each part, this has advantage of easier first implementation, but also as a disadvantage that we need to force users only use what provided to them. To resolve this problem we have introduced modules, modules are basically enhancer functions which can access and modify almost all of nuxt internal configurations and optionally generate files using lodash templates. They are published as npm packages so community can help us to grow & have many more integrations. Another point is that easier usage that every functionality can be added by just adding module to config file.

Current PWA State

As one of first attempts we have created a PWA template nuxt-starter-pwa (not working now). (Modules were not available so i was using a wrapper function to emulate that in nuxt config). Then we integrated modules system right into nuxt core and ported modules to this system.

Manifest

This module helps automatically generate manifest.json file for projects so easier and without any pain.

Optimize

Nuxt is already providing best practices to optimize projects out-of-the-box such as minification, code splitting and gzip support. However we may provide more optional optimizations to users like cssnano and webpack-lodash-plugin. We have to convert this module into a preset (~meta module) to have better maintenance of different modules.

Offline

This is our most challenging and not yet complete part. Many options are available for service workers:

• NekR/offline-plugin
  • Currently added to nuxt core by a PR and used but we may have to remove it from core.
  • Only asset caching works.
• GoogleChrome/sw-precache and sw-precache-webpack-plugin
  • Seems it was heavily stablized by chrome team and is being used in vue-pwa template, hn and ...
  • There are already good implementations for vue to use as a reference
  • Seems page caching for true offline support is working
  • Only does one job!
• GoogleChrome/workbox
  • Seems is heavily under development
  • Seems is Successor of sw-* (?)
  • What's the difference? Should we use both sw and wb ? :D

HTTP2 & Push

• Appropriate prefetch and preload links added to header of page thanks to vue-loader and client-manifest.json.
• We have a partial header parser which extracts preload links and adds HTTP2 Link headers (This is a workaround for web-servers like nginx that don't support push but only HTTP2)

PRPL

We have SSR and inlined critical path CSS thanks to vue-loader :))

/cc @addyosmani @Atinux @alexchopin

_{This question is available on Nuxt.js community (#c11)}