The last official release was at the end of May and I'd like to move the project to a more regular release schedule. Let's aim to get out a new tag this week with release notes.

I've gone ahead and done a sanity check locally against master. npm run dev and npm run build are both performing as I would expect. @ragingwind @anubhav7495 could you perhaps help with a double check that working off master is functioning as intended?

Happy to write up some release notes once we know nothing is breaking :)

I just tested out this template for the first time. After a prod build and deployment, there doesn't seem to be a favicon displayed in the browser (usually the V in most vue-cli templates).

Is that intended as a feature of a PWA? I know that the other vue-cli templates definitely ship a favicon but I haven't done many PWAs so I can't determine if that's intended or not, or if I just didn't do something right. I saw something about using simple favicons in the base PWA checklist.

Where should this live?

@yyx990803 Do we want to keep the PWA template on the vuejs org or on the templates org?

What do we want the template package to be called?

vue-cli-template-pwa?

Where should we call out the template on the Vue site?

Should we add an extra note to https://vuejs.org/v2/guide/installation.html#CLI saying this is available or would a dedicated PWA page on the Vue site be better?

cc @sdras in case she has any thoughts on this too.

Cross-posting from our original discussion at vuejs/vue-cli#381. Will make a start on this shortly.

There are a few different options for what this could include:

Web Application Manifest
Default favicons (minimalist setup from realfavicongenerator.net)
Service Worker precaching + runtime caching via sw-precache-webpack-plugin
Application Shell architecture
Code-splitting by default with vue-router
If we wanted to go even more ambitious we could cover:

PRPL pattern support (using something like preload-webpack-plugin)
Simple server-side rendering + pre-fetching
CSS extraction for production
Requirements

Aim to score as close to 100/100 on Lighthouse
Must be straight-forward to use. If we make it inherently complex, it will lose value to end users.
Prior-art - PWA templates and boilerplates 🎨

https://github.com/Narkoleptika/webpack-everything
https://github.com/electricjesus/vue-pwa-template
https://github.com/BosNaufal/vue-simple-pwa
Vue.js PWAs (open-source) 👐

https://github.com/vuejs/vue-hackernews-2.0
https://github.com/GoogleChrome/jscost.org (not yet fully released)
https://github.com/mrgodhani/feedbox
https://github.com/bstavroulakis/vue-wordpress-pwa
Other references 📚

PRPL pattern with Webpack and React
Initially, I would love to get a feel for what would considered palatable for an MVP. There's technically nothing stopping us baking in everything in the above list, but let's talk and figure out a path forward 🚀

When Save to HomeScreen, the code <link rel="apple-touch-icon" href="/static/img/icons/icon-152x152.png"> do not show the intended icon. To make it work, I have to change it to <link rel="apple-touch-icon" href="/static/img/icons/apple-touch-icon-152x152.png"> .

Hi,

I'm trying to embed the HMR debug bundle in a page rendered by my python backend server. Everything works fine except the bundle is trying to get the delta from http://localhost:<my-server-port>/__webpack_hmr instead of http://localhost:<webpack-devserver-port>/__webpack_hmr

Is there a way to specify the port for HMR?

Thanks!

In the vue-webpack template I can simply declare to use scss or pug or whatever preprocessor on a per component file basis, like so:

<style lang="scss" scoped>

Is it the same for this template?

Thank you :-)

I am using this template for my vue project and i got this error after installing NEM-sdk but i don't how to solve it and it seems related to webpack configuration. #196

 warning in ./~/ajv/lib/async.js

96:20-33 Critical dependency: the request of a dependency is an expression

 warning  in ./~/ajv/lib/async.js

119:15-28 Critical dependency: the request of a dependency is an expression

 warning  in ./~/ajv/lib/compile/index.js

13:21-34 Critical dependency: the request of a dependency is an expression

Your help is highly appreciated.

Add the public path variable to the static assets in the HTML head so that if the path is changed in config/index.js the assets will resolve properly.

From

    <!-- Add to home screen for Android and modern mobile browsers -->
    <link rel="manifest" href="/static/manifest.json">
    <meta name="theme-color" content="#4DBA87">

    <!-- Add to home screen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="vuepwa">
    <link rel="apple-touch-icon" href="/static/img/icons/icon-152x152.png">
    <!-- Add to home screen for Windows -->
    <meta name="msapplication-TileImage" content="/static/img/icons/icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">

To

    <!-- Add to home screen for Android and modern mobile browsers -->
    <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">
    <meta name="theme-color" content="#4DBA87">

    <!-- Add to home screen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="vuepwa">
    <link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/icon-152x152.png">
    <!-- Add to home screen for Windows -->
    <meta name="msapplication-TileImage" content="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">

@addyosmani First off, thanks for such a great template. I managed to integrate this template with a clean ASP.NET Core 1.1 project with almost no hassle.

The only thing I haven't managed to hash out is how to handle SSR cleanly. Vue recommends using vue-server-renderer (https://ssr.vuejs.org/en/), but I've been running into issues due to the PWA requirements. In the ASP.NET Core world, SSR can be achieved with the SPAServices package (good example at http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/), and adding a pre-render tag to one of the Razor Views and all the magic happens in the background. E.g.

<div id="my-app" asp-prerender-module="VuesStuff/renderOnServer" ... ></div>

but this can't be achieved with this vue template because it builds off of index.html where the pre-rendered tags are obviously not available.

Just trying to pick the communities brain on a path forward...?

(FYI this guide in particular made it super simple to integrate with your template https://blog.kloud.com.au/2017/02/14/running-vuejs-on-aspnet-core-apps/)

I keep getting service worker errors, like all the time...any way to disable the service worker until i'm testing on the server?

thanks :-)

I know it's not directly related to vue, but I don't know where to open this issue, so if anyone can help me with that... After I updated to Node 8 and tried to npm install in the project folder using this template got the following errors:

> [email protected] install /Users/me/Projetos/testpwa/node_modules/fsevents
> node install

node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.1/fse-v1.1.1-node-v57-darwin-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI) (falling back to source compile with node-gyp) 
  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
  COPY /Users/me/Projetos/testpwa/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node
  TOUCH Release/obj.target/action_after_build.stamp

Hi,

Currently build/service-worker-prod.js is inlined into HTML file without any minification.
This results in index.html to be 4.07 KB in size.

If we minify the file with uglify-es plugin before inlining, the resulting index.html is only 2.42 KB in size.

I have used this in my hnpwa-vue app to get a much lower TTI.

I would love to open a pull request to add something like that to the template.

Few questions/suggestions about the project...

• Is there a reason why you are using the precache plugin vs the offline plugin? (https://github.com/goldhand/sw-precache-webpack-plugin vs https://github.com/NekR/offline-plugin)
  -- seems like the precache plugin doesn't support appcache (ios) while the offline one does, but maybe there's something i dont know

• we need a standard for moving files to the root instead a static folder. This is sometimes required by services like Firebase, etc... Maybe a 'root' folder alongside the 'static' one?

This boilerplate PWA works already with Notification Push by Service Worker?

For those who want to do e2e testing, the chromedriver install may fail behind a corporate proxy.

There is an opened PR on the lib that seems to fix the issue. We just need to wait for it to be merged.

If you are struggling with this, you can update the package.json to use the fix before it gets merged

-    "chromedriver": "^2.27.2",
+    "chromedriver": "Toilal/node-chromedriver.git#feature\/request",

As per the subject line, I'm not sure what version of the template I'm using, but is it easy, and even possible, to simply update the template to the latest version?

Or do I need to generate a instance of the template to get the latest version? I suppose I would then copy my src folder over, I guess...

Anyway, not clear on that aspect of the template 🤔

R

otherwise, user has to refresh twice to get the latest content. first for latest service worker, and second for latest index.html. right ?

so maybe the root page should be handle by runtime caching. only use the cache when user is offline.

Just followed this instructions:

$ npm install -g vue-cli
$ vue init pwa my-project
$ cd my-project
$ npm install
$ npm run dev

Error:

Html Webpack Plugin:
  TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
  
  - 1:5 eval
    webpack-internal:///1:5:27
  
  - 1:20 module.exports
    webpack-internal:///1:20:3
  
  - index.js:264 
    [test]/[html-webpack-plugin]/index.js:264:16
  
  - From previous event:
  
  - index.js:252 HtmlWebpackPlugin.executeTemplate
    [test]/[html-webpack-plugin]/index.js:252:6
  
  - index.js:137 
    [test]/[html-webpack-plugin]/index.js:137:18
  
  - From previous event:
  
  - index.js:132 Compiler.
    [test]/[html-webpack-plugin]/index.js:132:8
  
  - Tapable.js:188 Compiler.applyPluginsAsyncSeries
    [test]/[tapable]/lib/Tapable.js:188:13
  
  - Compiler.js:308 Compiler.emitAssets
    [test]/[webpack]/lib/Compiler.js:308:7
  
  - Compiler.js:52 onCompiled
    [test]/[webpack]/lib/Compiler.js:52:18
  
  - Compiler.js:499 
    [test]/[webpack]/lib/Compiler.js:499:13
  
  - Tapable.js:184 next
    [test]/[tapable]/lib/Tapable.js:184:11
  
  - CachePlugin.js:62 Compiler.
    [test]/[webpack]/lib/CachePlugin.js:62:5
  
  - Tapable.js:188 Compiler.applyPluginsAsyncSeries
    [test]/[tapable]/lib/Tapable.js:188:13
  
  - Compiler.js:496 
    [test]/[webpack]/lib/Compiler.js:496:10
  
  - Tapable.js:177 Compilation.applyPluginsAsyncSeries
    [test]/[tapable]/lib/Tapable.js:177:46
  
  - Compilation.js:649 self.applyPluginsAsync.err
    [test]/[webpack]/lib/Compilation.js:649:19
  
  - Tapable.js:177 Compilation.applyPluginsAsyncSeries
    [test]/[tapable]/lib/Tapable.js:177:46
  
  - Compilation.js:640 self.applyPluginsAsync.err
    [test]/[webpack]/lib/Compilation.js:640:11
  
  - Tapable.js:177 Compilation.applyPluginsAsyncSeries
    [test]/[tapable]/lib/Tapable.js:177:46
  
  - Compilation.js:635 self.applyPluginsAsync.err
    [test]/[webpack]/lib/Compilation.js:635:10
  
  - Tapable.js:177 Compilation.applyPluginsAsyncSeries
    [test]/[tapable]/lib/Tapable.js:177:46
  
  - Compilation.js:631 sealPart2
    [test]/[webpack]/lib/Compilation.js:631:9
  
  - Tapable.js:177 Compilation.applyPluginsAsyncSeries
    [test]/[tapable]/lib/Tapable.js:177:46
  
  - Compilation.js:579 Compilation.seal
    [test]/[webpack]/lib/Compilation.js:579:8

It works if I remove this section from index.html:

<% for (var chunk of webpack.chunks) {
        for (var file of chunk.files) {
          if (file.match(/\.(js|css)$/)) { %>
    <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
  

Hi!

I have noticed that the template includes static/img/icons/safari-pinned-tab.svg file but it is not referenced in the index.html.

I believe that index.html should include the following:

<link rel="mask-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/safari-pinned-tab.svg" color="#4DBA87">

Thanks Romans

Hello, my pwa is not working on android until I add the hashbang in it. I'd like to use this without hashbang on the web, don't mind much when it's installed since it's not visible.
Is there any way we can fix this?
I'm thinking of a workaround to get if it's on mobile, I switch from:

hashbang: false,
mode: 'history'

but this doesn't work when someone is clicking a link from a social media, will be redirected on the responsive web design and since the link doesn't have hashbang, the user will be redirected to the starting page.

I tried adding <style lang='sass'> but I am getting an error

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3b85b268","scoped":true,"hasInlineConfig":false}!sass-loader?{"indentedSyntax":true,"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./List.vue in ./src/components/List.vue

It will be great if it comes out of the box.

I want to show a message when a new service worker has been installed and found this comment in the service-worker-prod.js file.

It's the perfect time to display a "New content is available; please refresh." message in the page's interface.

So my question is, how do I do this the best way? Can i some how access my App.vue´s methods or is it best to use vuex store to show a message box?

I see that there is a folder called 'static' and it has logos and a json file in it, but why not put assets like logos in the assets folder? Does the static folder serve a purpose that the assets folder inside the src folder does not? Should I be using it for anything, because it does cooler stuff than the assets folder does?

Seems a little odd to name a folder based upon a state of being...?

Anyway, thanks! XD

R

pwa template not working in IE11

[vuex] vuex requires a Promise polyfill in this browser.

From @yyx990803:

FYI if we use the runtime only build we can shave off another ~7kb

From the docs, just switching over to:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

with a comment linking up to why we're doing this should do the trick.

We currently already have this kinda setup here https://github.com/vuejs/pwa/blob/prototype/template/build/webpack.base.conf.js#L23 but requires switching to a standalone build. Perhaps we should just nix the standalone check and run it by default.

See below image for subject line visualization:

I would have thought that the routing file would be labeled 'routes.js' or something similar.

So I guess I'm wondering if this folder structure is to encourage splitting up routing into multiple files, and if so, is there any documentation on how to go about doing so, and when it would be appropriate?

Thank you in advance for your assistance and clarification :-)

Soooo...deployed my vue-pwa to firebase hosting and it generally works ok, except for when I navigate to a sub route, like 'example.com/view/subview' and then hit refresh...and I get this...

So basically what is happening is if I start at the home route, then I can navigate just fine, but if I type in a subroute or just reload the page at that subroute then firebase does not seem to know that it exists.

So, I wasn't sure where to ask this, but I figured that even if this isn't the right place, somebody could at least point me in the right direction...

Anyway, thank you in advance for any help that you can spare :-)

I think that we should also have an option asking the user for whether he wants to include polyfills for fetch and promise that are loaded conditionally using webpack.

I have seen preact-cli do that and I think it would be a nice to have feature.

Or we can also put in the documentation on how to set that up manually.

@addyosmani @ragingwind What are your thoughts?

After diggin into this template I found out the SWPrecache plugin generates the service worker that's used in the build version. I have no clue how to edit this service worker when I want to edit the service worker and add push messaging. I was told maybe change de service-worker-prod.js in the build folder. But I assume files the build folder should generally not be changed? Please add a sw file where I can build my own service worker file instead of auto generating one.

I just created a new project using this template (I answered y to everything except eslint), then ran yarn followed by yarn run dev.

When I opened the Chrome console I noticed this error message:

Uncaught (in promise) TypeError: Failed to register a ServiceWorker:
A bad HTTP response code (404) was received when fetching the script.

On Windows 10, Chrome version 58.0.3029.96 (64-bit)

Edit: some additional related errors popped up after a while:

Hi all, is there an extra step necessary to push to a gh-pages branch? I get the fallback about no javascript and inspecting shows js and css assets are not loading from the static/

I've tried deploying dist/ to gh-pages branch and also using vue-gh-pages module both give same result.

Thanks!

I did a fresh install of a new project:

vue init pwa testingpwa
cd testingpwa
yarn

After that I generate the build for production:

npm run build

Then start that build using a local server:

cd dist
started my web server: http://localhost:8080

I access the app using Samsung Galaxy Tab 2 using the IP of my computer

http:10.10.10.10:8080

The web app opened and I added the application to Homescreen
After I go offline using airplane mode and try to open application using the icon on my homescreen.
The PWA not worked, It show offline. My browser is Google Chrome 58.0.3029.83

Both polymer-cli and angular-cli are planning on adding support for automatically generating a HTTP/2 Server Push manifest if the user would like one. This can be useful for filling up "server think time" for the initial push.

Polymer/polymer-cli#646 have their implementation up. We could use something like https://github.com/GoogleChrome/http2-push-manifest for the manifest generation on our side and wire it up as both a prompt question + run at build time.

hey,

I have build vue pwa and it working great in chrome browser but it is showing nothing in android default browser, ucweb and opera.

Hi,

I installed Vue PWA template and tested on Apache localhost with offline feature (Dev tool). It works as expected.
I deployed same code to the production environment on Heroku. where it is not working as expected.
Even when I reload the page old service worker is still running and cached version of app which I get in offline mode is stale.
When I force update the service worker (From dev tool) then newer version of service worker is installed and only then it fetches fresh copy of project.

Here's my production webpack config.

    new SWPrecacheWebpackPlugin({
      cacheId: 'my-vue-app',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/',
      mergeStaticsConfig: true, // if you don't set this to true, you won't see any webpack-emitted assets in your serviceworker config
      staticFileGlobsIgnorePatterns: [/\.map$/], // use this to ignore sourcemap files
    })

I have not changed service worker code in index.html

Is there anything I am missing?

When running npm test

Simple Material-style shell with Vue theme colors (raw HTML + CSS) would work here. After talking it over with Evan we're going to avoid pulling in a whole Material library for this and just keep it pretty simple.

This would be very helpful when using Bootstrap or Bulma. Significant reduction of final dist CSS file.
https://github.com/purifycss/purifycss

I have all my components in my components folder, but when i try to group them in sub folders, the whole app breaks. Not sure what I'm doing wrong here, though...

As you can see, I grouped all my view-1 content into a view-1 folder, then added that to the file path, but in the browser...

The files can no longer be found. This is odd, as this is standard behavior for vue app folder structure. The only thing that I noticed is different is the @ instead of a dot.

Any help on this issue will be much appreciated.

Thank you!

Hi, many thanks for this project,
i used it to do a test app, and i was pretty happy,
i just saw the update, and i wanted to upgrade my app to this newer version.

but i couldn't find a good way to do that ?
is there a preferred way ? a good way ? or any doc about this ?

Thanks

I got the error from Chrome 59 on console

service-worker.js:1 Uncaught (in promise) DOMException: Quota exceeded.

Can any one help, explain or solution?

Kind regards
Supachai Chaimangua (Tor)

Soooo,

...doing this:

...from this:

...and getting this:

The first row in the above pic are from the v-for version and the second row are the static hard coded HTML versions of the same things.

So I dunno why the images are not loading, when all the other data, including the alt stuff is loading...checked the file path of the images, which are fine, so I must be doing something wrong, just don't know what...🤔

Any thoughts are most welcome, thanks! XD

In IE 11, the following line from service-worker-dev.js that gets injected into index.html throws a syntax error:

self.addEventListener('install', () => self.skipWaiting());

I assume it's because IE 11 does not support arrow functions.

Will this template be in sync with webpack template updates?