nuxt-community/pwa-module

Zero config PWA solution for Nuxt.js

PWA Module

Zero config PWA solution for Nuxt.js

📖 Read Documentation

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c) - Nuxt Community

pwa-module's Issues

How to set Workbox Cache Expiration?

Hi!

How to add to the runtimeCaching cache expiration (like maxAgeSeconds)?
Now I have:

  workbox: {
    runtimeCaching: [
      {
        urlPattern: 'http://127.0.0.1/client/.*',
        handler: 'cacheFirst',
        method: 'GET'
      }
    ]
  }

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

Workbox Broadcast Cache Update usage

Hi! I want to notify my clients to upgrade their application when the website is updated. I noticed that there is a Workbox module called Workbox Broadcast Cache Update. Is there any standard way to use it on Nuxt pwa?

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

[NUXT, PWA] Icons are not found

Hi,

I am using module https://github.com/Aerolab/nextjs-pwa

I have problem with this module. I added icon.png to /static folder and after I ran "yarn build" it shows that icons are created but then in Chrome Console in Application tab (im Manifest section) I have 7 blank icons (64x64, 120x120 etc.). This working well on dev and when I build locally (which is more weirder) and start with 'nuxt start'.

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

Official extension for manifest file is .webmanifest, not .json

https://www.w3.org/TR/appmanifest/#media-type-registration

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

sw.js not created when installing

Hello,

I keep receiving sw.js 404 not found. It's not in the static folder either with the install. Installed it with npm install.

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

Hot Reload make page not load anything till restart of server

Version

v2.4.0

Reproduction link

https://github.com/nuxt/nuxt.js

Steps to reproduce

In chrome after some hot reloads page stop loading at all and only anonymous window work.
Terrible developing experience.

What is expected ?

No stuck page behaviour

What is actually happening?

stuck page behaviour

_{This bug report is available on Nuxt community (#c63)}

Add package in nuxtjs README

This template package should be in https://github.com/nuxt/nuxt.js/blob/dev/README.md with the others (starter, express, koa, etc)!
If you want i could make a PR for them to added, but it seemed right to first propose it here.

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

The workbox is caching my landing page

Version

2

Reproduction link

https://example.com/NOT_APPLICABLE

Steps to reproduce

Just add @nuxt/pwa to your nuxt app

What is expected ?

The / page is not offline cached, or at least uses "netowrkFirst" strategy.

What is actually happening?

My landing page is somewhat dynamic. It must not be cached for offline use.

I couldn't find a way to override the default caching strategy (which is "offlineFirst") for my landing page and any other non-nuxt assets.

_{This bug report is available on Nuxt community (#c58)}

README improvement request around Workbox

First of all I must say this module is freaking awesome, makes starting PWA easier, but I'd like to see improvement to the README around workbox section, any example with this?

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

"minimal-ui" viewport property was removed on iOS8

Safari's inspector shows an alert about this.

I think the default value of the viewport should be width=device-width, initial-scale=1.

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

Warnings in workbox 2.0

There are several warnings in console after upgrade to v2.0:

🔧 [Warn] registerRoute() was called with a string containing an Express-style wildcard character. In the next version of Workbox, Express-style wildcards won't be supported, and strings will be treated a exact matches. Please switch to regular expressions for equivalent behavior.
workbox-sw.prod.v2.1.2.js:23 Path String:  /**
workbox-sw.prod.v2.1.2.js:23 Wildcard Character:  *
workbox-sw.prod.v2.1.2.js:23 Learn More:  https://goo.gl/xZMKEV
workbox-sw.prod.v2.1.2.js:sourcemap:23 🔧 [Warn] registerRoute() was called with a string containing an Express-style wildcard character. In the next version of Workbox, Express-style wildcards won't be supported, and strings will be treated a exact matches. Please switch to regular expressions for equivalent behavior.
workbox-sw.prod.v2.1.2.js:23 Path String:  /_nuxt/**
workbox-sw.prod.v2.1.2.js:23 Wildcard Character:  *
workbox-sw.prod.v2.1.2.js:23 Learn More:  https://goo.gl/xZMKEV

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

Changes to add to home screen behavior

What problem does this feature solve?

See: https://developers.google.com/web/updates/2018/06/a2hs-updates

There are incoming changes to the Chrome browser, for the install prompt.. It will be possible to manually trigger the install prompt.

What does the proposed changes look like?

Maybe implement this code as feature, to automatically show or not show the prompt.

_{This feature request is available on Nuxt community (#c49)}

AMP integration, PWAMP?

Hello. Somebody interested in AMP integration? It's combine PWA and AMP.

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

WorkBox configuration problem

When I configure pwa workbox module，runtimeCaching configuration urlPattern is a resource picture of the site, this site and my official domain name is not consistent.

Example:

runtimeCaching: [{
  urlPattern: 'localhost:3000/.*',
  handler: 'cacheFirst',
  method: 'GET'
},{
  urlPattern: 'https://assets.***.net/.*',
  handler: 'cacheFirst',
  method: 'GET'
}]

https: //assets.***.net/ related to the picture of the API, I would like to save some pictures through this website api (in the service worker)
Unfortunately, when I build and start nuxtjs-start-demo, the workbox module gives an error on the chrome console: The response does not meet the criteria for being added to the cache.
And application has no related image caches.

This is because https: //assets.***.net/ is an external link which need cross-domain, so workbox can not cache the site's picture?
there are other ways to solve this problem？

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

Set Cache-control to no-cache to sw.js

What problem does this feature solve?

I recently added pwa-module to my existing site built with Nuxt.js. I set the Cache-control header of my static assets to expire in one year, but after adding the pwa-module I had to add an exception for sw.js, so it wasn't cached.

Would it be possible that pwa-module added this exception atuomatically (e.g. by overriding the setHeaders method from config's render -> static)?

What does the proposed changes look like?

The approach I'm thinking of is something like:

this.options.render.static.setHeaders = (res, path) => {
	if (path.match(/sw\.js$/)) {
		// Prevent caching service worker
		res.setHeader('Cache-Control', 'no-cache')
	} else {
		// Call the user defined setHeaders, if any
	}
}

_{This feature request is available on Nuxt.js community (#c41)}

Customize sw.js path/name

What problem does this feature solve?

Writing directly to srcDir+'/static' folder with fixed name violating buildDir (and generate.dir) isolation and corrupting parallel builds.
How to generate few different sites with different routes in same time on same nuxt instance (with different buildDir and generate.dir)?

_{This feature request is available on Nuxt community (#c47)}

How to precache only some pages?

I am trying to precache just some of the pages of my application. It seemed to work correctly running the application in local (using build + start), but in production with https seems to not work correctly. This is my config:

    workbox: {
        globIgnores: [
            'node_modules/**/*',
            '**/*lang-*', // Not precaching languages
        ]
    }

When I inspect the html in prod it adds this:

 <link rel="prefetch" href="/_nuxt/lang-it.49931b3009b5bfe75c7b.js">

In local it does not, it just precaches using the workbox the expected ones.

What shall I do?

_{This question is available on Nuxt community (#c57)}

Upgrade workbox version on pwa-module

What problem does this feature solve?

Now workbox module on pwa module still using version 2.x.
Will be good to upgrade to v.3 because it have a lot improvement from workbox in those release.

_{This feature request is available on Nuxt community (#c51)}

Only caches visited routes

I've been playing around with the workbox component of the pwa module for a couple of days and have got it working with my hosting environment, but I seem to have a configuration problem.

For some reason only routes that I visit are being cached and then available offline. As far as I am concerned, this is not offline support as trying to navigate to other routes produces a browser error page.

This is strange, as in the sw.js file I can see that all of the nuxt js files for each route are being precached. However, trying to navigate to a route that I didn't visit while online gives the standard browser error (even though the corresponding nuxt js file is cached).

Is this the expected behaviour or is my configuration incorrect?

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

Extending workbox

How to extend workbox in this module, so I can use other service worker features such as background sync and push notification?

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

Uncaught TypeError: self.WorkboxSW is not a constructor

I just installed the pwa-module and my service worker is not registering. I only the get error "Uncaught TypeError: self.WorkboxSW is not a constructor" and when I check the error using google development code it shows me this block of code. Can anyone tell me why I am getting this error?

const workboxSW = new self.WorkboxSW({
  "cacheId": "TestApp",
  "clientsClaim": true,
  "directoryIndex": "/"
})

This is my nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: TestApp',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },z
      { name: "apple-mobile-web-app-capable", content: 'yes'},
      { name: 'apple-mobile-web-app-title', content: 'TestApp},
      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'}
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'apple-touch-icon', href: 'images/static/compass-192x192', size: '192x192'}
    ],
    script: [

    ]
  },

  manifest: {
    name: 'Example App',
    short_name: "ExampleApp",
    description: "A test app!",
    background_color: "#1C8847",
    theme_color: "#6EB450",
    start_url: "/",
    scope: "/",
    display: "standalone",
    lang: "en-GB",
    orientation: "any",
    icons: [
      {
        src: "/images/icons/compass-48x48.png",
        sizes: "48x48",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-72x72.png",
        sizes: "72x72",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-96x96.png",
        sizes: "96x96",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-192x192.png",
        sizes: "192x192",
        type: "image/png"
      },
      {
        src: "/images/icons/compass-512x512.png",
        sizes: "512x512",
        type: "image/png"
      }
    ]
  },

  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },

  /**
   *  External Libraries
   */
  modules: [
      '@nuxtjs/axios',
      '@nuxtjs/dotenv',
      '@nuxtjs/font-awesome',
      '@nuxtjs/bulma',
      'nuxt-buefy',
      ['@nuxtjs/pwa', { icon: false }]
  ],

  css: [
    'node_modules/bulma/bulma.sass',
    '@/assets/scss/main.scss'
  ],

  axios: {
      baseURL: process.env.BASE_URL
  },

  router: {
      middleware: [
        'clearValidationErrors',
        'clearImage',
        'clearForm'
      ]
  },

  plugins: [
    './plugins/mixins/user.js',
    './plugins/mixins/validation.js',
    './plugins/axios.js',
    './plugins/mixins/messages.js',
    './plugins/mixins/googlemaps.js',
    './plugins/mixins/vue-carousel.js',
    {src: '~/plugins/mixins/vue-hellojs.js', ssr: false},
    './plugins/init.js',
    './plugins/functions/axios/LocationAxiosFunctions.js',
    './plugins/functions/axios/ProfileAxiosFunction.js',
    './plugins/functions/axios/AdminLocationAxiosFunction.js'
  ],

  /*
  ** Build configuration
  */
  build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    },

    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

and my package.json file

{
  "name": "TestApp",
  "version": "1.0.0",
  "description": "At test",
  "private": true,
  "engines": {
    "node": "8.11.1",
    "npm": "5.6.0"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "heroku-postbuild": "npm run build"
  },
  "dependencies": {},
  "devDependencies": {
    "@nuxtjs/auth": "^4.0.1",
    "@nuxtjs/axios": "^5.3.1",
    "@nuxtjs/bulma": "^1.2.0",
    "@nuxtjs/dotenv": "^1.1.1",
    "@nuxtjs/font-awesome": "^1.0.3",
    "@nuxtjs/icon": "^2.1.0",
    "@nuxtjs/manifest": "^2.1.0",
    "@nuxtjs/meta": "^2.2.1",
    "@nuxtjs/pwa": "^2.0.8",
    "@nuxtjs/workbox": "^2.2.0",
    "axios": "^0.18.0",
    "babel-eslint": "^8.2.1",
    "body-parser": "^1.18.2",
    "bulma": "^0.7.1",
    "bulma-extensions": "^1.0.14",
    "clone": "^1.0.4",
    "cookie": "^0.3.1",
    "debug": "^3.1.0",
    "dotenv": "^5.0.1",
    "dotprop": "^1.0.2",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0",
    "font-awesome": "^4.7.0",
    "hash-sum": "^1.0.2",
    "hellojs": "^2.0.0-4",
    "hover.css": "^2.3.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.5",
    "moment": "^2.22.0",
    "node-sass": "^4.8.3",
    "nuxt": "latest",
    "nuxt-buefy": "0.0.4",
    "postcss-custom-properties": "^7.0.0",
    "sass-loader": "^7.0.1",
    "vue": "^2.5.17",
    "vue-carousel": "^0.7.3",
    "vue-hellojs": "0.0.4",
    "vue-meta": "^1.5.0",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.5.17",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17",
    "vue2-google-maps": "^0.8.12",
    "vuejs-datepicker": "^0.9.29",
    "vuex": "^3.0.1",
    "workbox-sw": "^3.4.1"
  }
}

_{This question is available on Nuxt community (#c67)}

PWA cause live site to stuck on loading files/api calls

Version

v2.4.0

Reproduction link

https://github.com/nuxt/nuxt.js

Steps to reproduce

Here some example screenshot https://i.imgur.com/hQe6ppA.png ( 5h for request xD ) https://i.imgur.com/575szHF.png https://i.imgur.com/OkF2uo9.png
File loading just stuck until that page manually opened in new tab. As soon as it opened - query finished. As long as it dont open - query in pending state and running.
Another fix is to open developer tools in chrome go to application and push sync button - then request will finish too. https://i.imgur.com/OCjjv3E.png
Same happens in FF.
Maybe somewhere race condition happens

What is expected ?

queries from service worker get stuck

What is actually happening?

queries finished without stucking

_{This bug report is available on Nuxt community (#c65)}

[NUXT, PWA] Icons target Directory Option

What problem does this feature solve?

Some hosting providers (like godaddy) do not allow the "icons" directory in which the Nuxt PWA Icon module puts the icons. This results in a 404 error.
https://ch.godaddy.com/help/warum-werden-dateien-in-meinem-symbole-verzeichnis-nicht-angezeigt-261?lang=en

What does the proposed changes look like?

Let's define a targetDir with icons as a default value enabling a different directory name.

Following changes should make it:

File packages/icons/index.js
line 28: add const targetDir = options.targetDir || 'icons';
line 55: replace with const fileName = '${targetDir}/icon_${size}.${hash}.png'

File docs/modules/icon.md
line 21: add

**targetDir**
- Default: `icons`

_{This feature request is available on Nuxt community (#c70)}

Web app banners

What problem does this feature solve?

Support for iOS 11.3, where web app banners are not shown and partial PWA support. I think that we need some support for those browsers which don't support everything yet.

What does the proposed changes look like?

Detect if when the browser is on iOS, and show a install prompt for the PWA the second the the user visits.

_{This feature request is available on Nuxt community (#c48)}

Default iconSrc should use assets, not static

Putting it in static cause it to be copied to the destination, creating a stale file for most cases. Instead assets should be preferred.

A fallback could be added for backward compatibility.

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

sw.js 404 when using publicPath

Hi, i'm using github pages to host and I got 404 error on sw.js.

A bad HTTP response code (404) was received when fetching the script.
/sw.js Failed to load resource: net::ERR_INVALID_RESPONSE
(index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

Nuxt config:

module.exports = {
  /*
  ** Build configuration
  */
  build: {
    publicPath: 'https://derevandal.github.io/idepead-subscription-frontend/',
  }
}

I believe this happens because the script is not injected into the page with publicPath.

Could anyone help me?
Thanks

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

Use app shell as the primary response of the service worker

What problem does this feature solve?

App shell is described in https://developers.google.com/web/updates/2015/11/app-shell

After the initial load, SSR basically takes as much time as the client to just render them. Unless nuxtServerInit is used, we can just take the SPA file and respond with it. It can be cached longer and is network resource efficient.

What does the proposed changes look like?

• Expose an endpoint (with middleware) to get the SPA template (only for SSR server, already handled by generate)
• Cache the SPA template (need to mess with revision, I don't know how)
• Configure workbox to respond with it.

_{This feature request is available on Nuxt community (#c71)}

IndexedDB: how to ?

Hello and many thanks for this great module !
It works automagically for caching JS files, but i try to understand how to cache JSON datas like this : https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker

Is there a Workbox module option for that, or can i modify static/sw.js ?

thx

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

Workbox module gives errors

I tried two projects, both give me this error multiple times (for different files):

Uncaught (in promise) WorkboxError: The request fpr 'http://localhost:5000/_nuxt/pages/channels/_id.e42804cd97f511c7a4d6.js' failed the criteria to be cached. By default, only responses with 'response.ok = true' are cached.
at http://localhost:5000/_nuxt/workbox.dev.c21f51f2.js:169:1358
at Generator.throw ()
at step (http://localhost:5000/_nuxt/workbox.dev.c21f51f2.js:95:30)
at http://localhost:5000/_nuxt/workbox.dev.c21f51f2.js:108:13
at

If I actually access the referenced file, it opens fine in the browser, giving a status 200.

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

Workbox and HTML5 video on iOS Safari

Version

2.0.8

Reproduction link

https://264-education-heitbuiyfy.now.sh/

Steps to reproduce

Visit the reproduction link in any browser / OS combination and the video plays without problems. Do so on Mobile Safari on iOS and the video freezes after 1–3s and / or doesn’t load at all.

This only happens when the pwa-module (the workbox part of it) is used. The video then plays only the very first time and often freezes after 1–3s, often it doesn’t load / play at all.

This issue looks very similar to this angular/angular#23447 Angular issue, so it might be a core problem inside iOS / their SW implementation? I am not sure, I just ran into this.

I have tried explicitly ignoring the file with globIgnores and/or exclude, but wasn’t successful.

Thank you in advance, I appreciate it and the work you have put into this. :)

What is expected ?

Video should play when SW is activated in any browser / on any OS.

What is actually happening?

Video freezes after 1–3s and / or doesn’t play on Mobile Safari on iOS when SW is activated.

_{This bug report is available on Nuxt.js community (#c42)}

yarn add @nuxtjs/pwa error

Hello!

If I try run yarn add @nuxtjs/pwa

I get this error:

yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
warning nuxt > [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=6.11".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

and after update my babel, i still get same error.

this is my package.json:

{
  "name": "try1",
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author": "Andrew Karnegy <[email protected]>",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "axios": "^0.17.0",
    "nuxt": "^1.0.0-rc9",
    "@nuxtjs/pwa": "latest",
    "typed.js": "^2.0.6",
    "vue-awesome": "^2.3.3",
    "vue-carousel": "^0.6.5"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-preset-env": "^1.6.1",
    "coffee-loader": "^0.9.0",
    "coffee-script": "^1.12.7",
    "eslint": "^4.3.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "node-sass": "^4.5.3",
    "pug": "^2.0.0-rc.4",
    "pug-loader": "^2.3.0",
    "sass-loader": "^6.0.6"
  }
}

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

A way to test workbox locally

Is there any guidelines how to run workbox in dev mode?

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

Disable not override some default meta?

Hi there,

so I am using the module, mainly for the icon.
Regarding the meta, I am getting the meta I need from my endpoints in my application and I set them in head.

I want to disable some of the meta that the module applies and not override them.
Specifically the og:type og:title og:description, the module inserts them as meta name, while they should be meta property.

Here is the output on my page

And this is my nuxt config

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

This is a bug or my configuration problem ?

modules: [
    ['@nuxtjs/pwa', {icon: false}],
],
manifest: {
    name: 'myname',
    short_name: 'myname',
    start_url: '/',
    theme_color: '#ffffff',
    background_color: '#505050'
}

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

Compatibiliy issues with [email protected]

Hi,

I'm getting the current error during the Nuxt build, because of the pwa module.
It does not seem to be compatible with the new hook system, as described in the release note.

We have a new internal hook system now, some modules can be broken with 1.0 if they were relying on this.nuxt.plugin(), instead, they will have to use this.hook(), see module hooks documentation.

The error:

  ERROR  Nuxt error

  Error: nuxt.plugin('build',..) is not supported. Use new hooks system.
  
  - nuxt.js:88 Nuxt.plugin
    [app_front]/[nuxt]/lib/core/nuxt.js:88:13
  
  - index.js:54 ModuleContainer.nuxtWorkbox
    [app_front]/[@nuxtjs]/workbox/index.js:54:13
  
  - module.js:155 Promise
    [app_front]/[nuxt]/lib/core/module.js:155:30
  
  - Promise
  
  - module.js:139 ModuleContainer.addModule
    [app_front]/[nuxt]/lib/core/module.js:139:12
  
  - module.js:90 ModuleContainer.requireModule
    [app_front]/[nuxt]/lib/core/module.js:90:17
  
  - index.js:7 module
    [app_front]/[@nuxtjs]/pwa/index.js:7:17
  
  - index.js:1 promise.then
    [app_front]/[@nuxtjs]/pwa/index.js:1:146
  
  
  - next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7

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

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

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

AutoRegister false not working

Iam implementing a custom notification with vue . Everything works fine but the permissionPrompt is displaying while the page loads ... Any help required.

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

hot reload will re-inject icons

Hot reload will re-inject the icons in the manifest. I think it's pretty minor but will report it either way.

Reproduce:

• nuxt dev
• reload page
• result:

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

How to use meta for pages?

Hello,

As per default options og:title, og:description will be set as per the package.json or from nuxt.config, but if set the title & description from page the og:title & og:description remains the same, is there any options by which it will take default values for og:title from title & og:description from description from pages?

head () {
  return {
    title: `Foo`,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'page foo'
      }
    ]
  }
}

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

Netlify Deployment fails with jimp Version 0.3.5

pwa-module/packages/icon/package.json

Line 13 in ef670b8

"jimp": "^0.3.5"

It fails with the error: "Cannot find module 'jpgjs'"
I guess this will happen on every AWS environment.

If i add the following to my package.json, everything works fine:
"jimp": "0.3.4"

Related: jimp-dev/jimp#560

_{This question is available on Nuxt community (#c61)}

Example for custom workbox cache

@pi0 can you provide example for customizing workbox ServiceWorker cache for cdn media and external API requests?

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

Access icon names

Hey all!

Is there a way to access the created icon from the icon module through code? For example to use them as a logo in the nav bar?

Now there will be one 😛

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

Quick setup config edit?

The config provided in the setup didn't work for me.

instead of this:

modules: { '@nuxtjs/pwa' },

I used:

modules: [ '@nuxtjs/pwa' ],

Thanks!

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

plugin7?

 ERROR  Failed to compile with 1 errors                                              1:44:18 p.m.

This dependency was not found:

* plugin7 in ./.nuxt/index.js

To install it, you can run: npm install --save plugin7

Got this after adding the pwa module

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

Incorrect publicPath in the manifest.json

Hi!

In the generated manifest.xxxx.json the path is has Double //:

"publicPath":"//_nuxt/"

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

WorkboxError on fresh install

Version

v0.4.0

Reproduction link

https://github.com/nuxt-community/pwa-template

Steps to reproduce

1. Install:

$ vue init nuxt-community/pwa-template my-project  
$ cd my-project                     
# install dependencies
$ npm install # Or yarn install
$ npm run build
$ npm start

2. Navigate to localhost:3000

What is expected ?

Error-less PWA application.

What is actually happening?

Error in browser console when entering /:

workbox.3de3418b.js:158 Uncaught (in promise) WorkboxError: An error was thrown by workbox with error code: ;'request-not-cached' with extras: '{"url":"http://localhost:3000/_nuxt/layouts_default.061f990e7d3f96dc329e.js","error":{}}'
    at http://localhost:3000/_nuxt/workbox.3de3418b.js:160:1358
    at Generator.throw (<anonymous>)
    at step (http://localhost:3000/_nuxt/workbox.3de3418b.js:83:30)
    at http://localhost:3000/_nuxt/workbox.3de3418b.js:96:13
WorkboxError @ workbox.3de3418b.js:158
(anonymous) @ workbox.3de3418b.js:160
step @ workbox.3de3418b.js:83
(anonymous) @ workbox.3de3418b.js:96

_{This bug report is available on Nuxt.js community (#c46)}

manifest cross-origin issues

Hi all,
I ran into some troubles with the manifest json since I changed the publicPath to a cdn.
If i run lighthouse it complains about same-origin policy for the manifest file. Even though I found w3c/manifest#360 and it tunrs out cross origin should work just fine, the browser and several testing scenarios complain about it if the manifest is delivered by a different host.

I think it would be a easy fix if I can overwrite the publicPath within manifest module (I did the same for workbox ;), unfortantuly as I checked the source code of the manifest module I couldn't figure it out how to apply a different publicPath in this case.

Would be great to add an option to overwrite the public path, If you want me to I can create a PR and try to fix it up?

Thanks
Simon

Lighthouse report - 1 failed Audit:
User can be prompted to Install the Web App
Browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. Learn more.
Warnings: ERROR: start_url must be same-origin as document

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

Why this lib such awesome ?

Sorry but I had to leave some ❤️ to contributors here,

This module is working great, my web app PWA audit goes from 12% to 82% after just installing and following the setup guide

Thanks all & great job 👍

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

Service Worker not registered

Hi!

I have started using this package and I set it up like this:

  modules: [
      '@nuxtjs/dotenv',
      '@nuxtjs/axios',
      '@nuxtjs/toast',
      '@nuxtjs/pwa',
    ['nuxt-validate', {
      lang: 'en',
    }]
  ],

  workbox: {
    runtimeCaching: [
      {
        // Should be a regex string. Compiles into new RegExp('https://my-cdn.com/.*')
        urlPattern: 'https://cdn.timeandattendance/.*',
        // Defaults to `networkFirst` if omitted
        handler: 'cacheFirst',
        // Defaults to `GET` if omitted
        method: 'GET'
        }
      ]
  },

However when I use google chrome audits test it says that

It does not register Service worker and that it does not respond with 200 when offline, and as far as I am aware, this is what this package is supposed to do?

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

Enable offline GA through workbox

Hey,

I've learned today that GA can be enabled to track offline user actions as well with workbox. It'd be great if this could be integrated (and auto-enabled when the nuxt analytics module [or GA] is present)

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