vuejs-templates · May 31, 2017 · Jul 14, 2017 · Aug 14, 2017 · Aug 25, 2017 · Aug 29, 2017
diff --git a/LICENCE b/LICENCE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
+## Maintenance Mode
+**The code in this repo is in maintenance mode, with limited plans for future changes. Our focus moving forward is adding PWA support to [Vue CLI 3.0](https://github.com/vuejs/vue-cli/blob/dev/README.md), using its new [`pwa` plugin](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa). We encourage this work to be used for new projects as it is being actively developed. If you have issues with the current codebase, give the new version a spin and let us know what you think.**
+
 # vue-pwa-boilerplate
 
 > A full-featured [PWA](https://developers.google.com/web/progressive-web-apps/) template with webpack, hot-reload, lint-on-save, unit testing & css extraction.
@@ -12,16 +15,32 @@
 
 This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ or [yarn](https://yarnpkg.com) for a more efficient dependency tree.**
 
-``` bash
+```bash
 $ npm install -g vue-cli
 $ vue init pwa my-project
 $ cd my-project
 $ npm install
 $ npm run dev
 ```
 
+This will scaffold the project using the `master` branch. If you wish to use the latest version of the PWA template, do the following instead:
+
+``` bash
+$ vue init pwa#development my-project
+```
+
+:warning: **The `development` branch is not considered stable and can contain bugs or not build at all, so use at your own risk.**
+
 If port 8080 is already in use on your machine you must change the port number in `/config/index.js`. Otherwise `npm run dev` will fail.
 
+## What's not Included
+
+* You should configure your web server to add HTTP headers to prevent caching of critical service worker files.
+If you don't do this, [browsers might cache the content for up to 24 hours](https://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours/38854905#38854905).
+In addition, you should add HTTP headers to prevent the contents of the static folder to be cached unintentionally long.
+
+See ["Configuring your Web server to prevent caching"](docs/prevent_caching.md) in the docs for more information.
+
 ## What's Included
 
 * Service Worker precaching of application shell + static assets (prod)
@@ -38,7 +57,7 @@ If port 8080 is already in use on your machine you must change the port number i
   - Source maps
 
 - `npm run build`: Production ready build.
-  - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).
+  - JavaScript minified with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony).
   - HTML minified with [html-minifier](https://github.com/kangax/html-minifier).
   - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano).
   - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets.
@@ -60,6 +79,16 @@ If port 8080 is already in use on your machine you must change the port number i
 
 You can fork this repo to create your own boilerplate, and use it with `vue-cli`:
 
-``` bash
+```bash
 vue init username/repo my-project
 ```
+
+## Contributing
+
+This project is a modified copy of the [`vue-webpack-boilerplate`](https://github.com/vuejs-templates/webpack) template.
+
+While we welcome contributions from the community, please note that changes to configuration that is shared between this project and `vue-webpack-boilerplate` should be made against `vue-webpack-boilerplate` *first*.
+
+Once the [upstream](https://stackoverflow.com/a/2739476/385997) PR is merged, please file an additional PR against this project making the equivalent changes. This will help ensure that the shared configuration does not diverge too much.
+
+Any changes that are specific to this project—related to service workers, or other PWA functionality—do not need an equivalent upstream PR.
diff --git a/circle.yml b/circle.yml
@@ -1,6 +1,12 @@
 machine:
   node:
-    version: 6
+    version: stable
+
+dependencies:
+  pre:
+    - sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list'
+    - sudo apt-get update
+    - sudo apt-get install google-chrome-stable
 
 test:
   override:

diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -2,6 +2,7 @@
 
 - [Project Structure](structure.md)
 - [Build Commands](commands.md)
+- [Babel Configuration](babel.md)
 - [Linter Configuration](linter.md)
 - [Pre-Processors](pre-processors.md)
 - [Handling Static Assets](static.md)

diff --git a/docs/babel.md b/docs/babel.md
@@ -0,0 +1,22 @@
+# Babel Configuration
+
+This boilerplate uses [`babel-preset-env`](https://www.npmjs.com/package/babel-preset-env) for configuring babel. You can read more about it here - http://2ality.com/2017/02/babel-preset-env.html.
+
+> A Babel preset that compiles ES2015+ down to ES5 by automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments.
+
+It uses [`browserslist`](https://github.com/ai/browserslist) to parse this information, so we can use any [valid query format supported by `browserslist`](https://github.com/ai/browserslist#queries).
+
+However there is a caveat. `browserslist` recommends defining the target in a common place like `package.json` or in a `.browserslistrc` config file. This allows tools like [`autoprefixer`](https://github.com/postcss/autoprefixer) and [`eslint-plugin-compat`](https://github.com/amilajack/eslint-plugin-compat) to share the config. For this template, `browserslist` is configured in the `package.json`:
+
+```json
+{
+  "...": "...",
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
+```
+
+But the latest stable release of `babel-preset-env`, `v1.6.1` does not support loading the config from `package.json`. So the target environment is repeated in `.babelrc`. If you wish to change your target environment, please be sure to update both `package.json` and `.babelrc`. Note that this has been fixed in the beta version([`@babel/preset-env@7.0.0-beta.34`](https://github.com/babel/babel/tree/master/packages/babel-preset-env)) and the template will be updated once it is out of beta.
diff --git a/docs/backend.md b/docs/backend.md
@@ -5,7 +5,9 @@ If you are building a purely-static app (one that is deployed separately from th
 Let's take a look at the default `config/index.js`:
 
 ``` js
-var path = require('path')
+'use strict'
+
+const path = require('path')
 
 module.exports = {
   build: {

diff --git a/docs/commands.md b/docs/commands.md
@@ -16,7 +16,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 
 > Build assets for production. See [Integrating with Backend Framework](backend.md) for more details.
 
-- JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).
+- JavaScript minified with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony).
 - HTML minified with [html-minifier](https://github.com/kangax/html-minifier).
 - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano).
 - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets.

diff --git a/docs/prerender.md b/docs/prerender.md
@@ -14,7 +14,7 @@ npm install --save-dev prerender-spa-plugin
 
 ```js
 // This line should go at the top of the file where other 'imports' live in
-var PrerenderSpaPlugin = require('prerender-spa-plugin')
+const PrerenderSpaPlugin = require('prerender-spa-plugin')
 ```
 
 3. Configure it in the `plugins` array (also in **build/webpack.prod.conf.js**):

diff --git a/docs/prevent_caching.md b/docs/prevent_caching.md
@@ -0,0 +1,63 @@
+# Configuring your Web server to prevent caching
+
+## Why you want to do this
+
+You should configure your web server to add HTTP headers to prevent caching of critical service worker files.
+If you don't do this, [browsers might cache the content for up to 24 hours](https://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours/38854905#38854905).
+
+In addition, you should add HTTP headers to prevent the contents of the static folder to be cached unintentionally long.
+
+## Mechanisms at work
+
+### Service worker
+
+When you run the production build and deploy the application to a web server, the browser will call the service worker on the first visit and will download and cache all resources. 
+When the browser accesses the site a second time, it will use the cached resources.
+To notice changes in your app it is crucial that the browser downloads the latest version `service-worker.js` from your server.
+The browser will only do this when the [Cache-Control](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) header associated with `service-worker.js` indicates that a previous download has expired or [24 hours have passed](https://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours/38854905#38854905).
+If a new service worker is available, it will download the new contents in the background.
+Once the download is complete, the default behavior is that the new content will be shown on the next visit of the site. 
+You can change the template's [`service-worker-prod.js`](../template/build/service-worker-prod.js) to display the message to the user to reload the page, or issue a `window.location.reload()` automatically to trigger an update depending on your application's needs.
+
+Depending on your setup, you might want to have a short caching time for your service worker or no caching at all.
+At minimum, you should add caching headers to disable or minimize caching for `service-worker.js` and `index.html`.
+
+### The static folder
+
+The folder [`static`](../template/static) contains the manifest and the favicons of your app.
+
+You should limit or disable caching for all files in this folder to ensure users have receive the latest version of these files.
+
+### Additional information
+
+More information about caching headers can be found in the blog post ["Caching best practices & max-age gotchas" by Jake Archibald](https://jakearchibald.com/2016/caching-best-practices/). 
+
+## How to add caching headers for your server
+
+Here are some examples that worked for other users of this template.
+See [Issue #70](https://github.com/vuejs-templates/pwa/issues/70) for a discussion.
+
+Apache: Disable all caching for the two essential files
+
+    <Files index.html|service-worker.js>
+    FileETag None
+    Header unset ETag
+    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
+    Header set Pragma "no-cache"
+    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
+    </Files>
+
+Apache: Limit caching to five minutes to all files to prevent unlimited caching also for files in static
+
+    Header set Cache-Control "max-age=300, must-revalidate"
+
+Nginx: Limit caching for the two essential files
+
+    location ~ (index.html|service-worker.js)$ {
+      # ...
+      add_header Last-Modified $date_gmt;
+      add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
+      if_modified_since off;
+      expires off;
+      etag off;
+    }
diff --git a/meta.js b/meta.js
@@ -17,7 +17,7 @@ module.exports = {
     "short_name": {
       "type": "string",
       "required": false,
-      "message": "Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name)",
+      "message": "Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name)"
     },
     "description": {
       "type": "string",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-template-pwa",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "license": "MIT",
   "description": "A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.",
   "scripts": {

diff --git a/template/.eslintignore b/template/.eslintignore
@@ -1,2 +1,7 @@
-build/*.js
-config/*.js
+/build/
+/config/
+/dist/
+/*.js
+{{#unit}}
+/test/unit/coverage/
+{{/unit}}
diff --git a/template/.gitignore b/template/.gitignore
@@ -1,14 +1,14 @@
 .DS_Store
 node_modules/
-dist/
+/dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 {{#unit}}
-test/unit/coverage
+/test/unit/coverage
 {{/unit}}
 {{#e2e}}
-test/e2e/reports
+/test/e2e/reports
 selenium-debug.log
 {{/e2e}}
 

diff --git a/template/build/build.js b/template/build/build.js
@@ -1,16 +1,18 @@
+'use strict'
+
 require('./check-versions')()
 
 process.env.NODE_ENV = 'production'
 
-var ora = require('ora')
-var rm = require('rimraf')
-var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackConfig = require('./webpack.prod.conf')
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
 
-var spinner = ora('building for production...')
+const spinner = ora('building for production...')
 spinner.start()
 
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

diff --git a/template/build/check-versions.js b/template/build/check-versions.js
@@ -1,12 +1,14 @@
-var chalk = require('chalk')
-var semver = require('semver')
-var packageConfig = require('../package.json')
-var shell = require('shelljs')
+'use strict'
+
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
 function exec (cmd) {
   return require('child_process').execSync(cmd).toString().trim()
 }
 
-var versionRequirements = [
+const versionRequirements = [
   {
     name: 'node',
     currentVersion: semver.clean(process.version),
@@ -23,9 +25,9 @@ if (shell.which('npm')) {
 }
 
 module.exports = function () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -38,8 +40,8 @@ module.exports = function () {
     console.log('')
     console.log(chalk.yellow('To use this template, you must update following to modules:'))
     console.log()
-    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
       console.log('  ' + warning)
     }
     console.log()

diff --git a/template/build/dev-client.js b/template/build/dev-client.js
@@ -1,3 +1,5 @@
+'use strict'
+
 /* eslint-disable */
 require('eventsource-polyfill')
 var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')