PWA icons get cached at node_modules / .cache / pwa / icon

I updated my icons in my project, but somehow this cache did not get updated. Is there any way to tell nuxt to clear this cache?

I ended up deleting this folder and generating my site again with $ npm run generate

That put the right icons in dist / _nuxt / icons

I couldn't find any documentation about where PWA icons get cached and how to clear this cache.

I found a couple other bug reports about this which allowed me to track down the source of the problem.

Here's how I created the problem:

1) Create a nuxt project to use static files and PWA.
2) Generate static files.
3) Change the icons.
4) Generate the static files again.
5) Save website as a PWA on a phone.

The icon for the PWA app is the nuxt default icon, not the new icon from step #3.

To fix, I deleted the folder at node_modules / .cache / pwa / icon then generated the static files again.

Just wanted to ask the question in case I'm missing something. Thanks!

Version

1.0.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

1. 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

Even, no service worker register when i run the template

🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Hello @pi0 , now I'm starting to play with this template and I didn't saw much difference from webpack starter template, only the module @nuxtjs/pwa enabled.

What else should I enable to get the best performance from pwa/nuxt/etc?
Should I enable SPA?
Should I disable SSR?
Any rule I should avoid to enable it?

Thanks in advance,

I see that opening braces are placed in a new line rather than the same line with a space. Please consider using the suggested style.

selector {

instead of

selector
{

I'm getting the following error when I run npm run dev.

Error: Cannot find module 'es6-promise\auto' from 'C:\workspace\nuxt-pwa'
    at Function.module.exports [as sync] (C:\workspace\nuxt-pwa\node_modules\resolve\lib\sync.js:40:15)
    at r (C:\workspace\nuxt-pwa\node_modules\vue-server-renderer\build.js:7741:44)
    at Object.<anonymous> (webpack:/external "es6-promise/auto":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 2066bdea21510cb58403:25:0)
    at Object.<anonymous> (server-bundle.js:1440:75)
    at __webpack_require__ (webpack:/webpack/bootstrap 2066bdea21510cb58403:25:0)
    at Object.<anonymous> (server-bundle.js:996:65)
    at __webpack_require__ (webpack:/webpack/bootstrap 2066bdea21510cb58403:25:0)
    at server-bundle.js:92:18
    at Object.<anonymous> (server-bundle.js:95:10)
    at evaluateModule (C:\workspace\nuxt-pwa\node_modules\vue-server-renderer\build.js:7747:21)
    at C:\workspace\nuxt-pwa\node_modules\vue-server-renderer\build.js:7805:18
    at C:\workspace\nuxt-pwa\node_modules\vue-server-renderer\build.js:7797:14
    at Object.renderToString (C:\workspace\nuxt-pwa\node_modules\vue-server-renderer\build.js:7951:9)
    at P (C:\workspace\nuxt-pwa\node_modules\pify\index.js:49:6)
    at Object.<anonymous> (C:\workspace\nuxt-pwa\node_modules\pify\index.js:11:9)

Hi everybody,

I'm getting this errors while navigating this template with only an extra page (eg: about.vue).

Steps to reproduce them:

1. Exec npm run build

1. Exec npm run start

The server cannot found the index.spa.html, index.ssr.html and vue-ssr-client-manifest.json files, but those files exists in the dist folder.

Any thoughts?

Hi,

I just ran the installation and trying to build the project as is, but got an issue.

Here are the steps:

$ vue init nuxt-community/pwa-template my-project
$ cd my-project
$ npm installl

** Everything ran well to this point. But then… **

$ npm run build

The error message is:

~/Dev/my-project $ npm run build

[email protected] build /Users/admin/Dev/my-project
nuxt build

nuxt:build Building… +0ms
nuxt:build App root: /Users/admin/Dev/my-project +950ms
nuxt:build Generating /Users/admin/Dev/my-project/.nuxt files… +0ms
TypeError: Cannot read property 'push' of undefined
at ModuleContainer.nuxtCssano (/Users/admin/Dev/my-project/nodemodules/@nuxtjs/cssnano/index.js:4:29) at /Users/admin/Dev/my-project/nodemodules/nuxt/lib/core/module.js:133:29
at ModuleContainer.callee2$ (/Users/admin/Dev/my-project/nodemodules/nuxt/lib/core/module.js:132:12)
at tryCatch (/Users/admin/Dev/my-project/nodemodules/nuxt/nodemodules/regenerator-runtime/runtime.js:65:40)
at GeneratorFunctionPrototype.invoke as invoke at GeneratorFunctionPrototype.prototype.(anonymous function) as next at step (/Users/admin/Dev/my-project/nodemodules/nuxt/dist/nuxt.js:852:30)
at /Users/admin/Dev/my-project/nodemodules/nuxt/dist/nuxt.js:863:13 at process.tickCallback (internal/process/next_tick.js:109:7)
[nuxt] Unhandled promise rejection: TypeError: Cannot read property 'push' of undefined
nuxt:build Generating files… +37ms
nuxt:build Generating routes… +8ms
nuxt:build Building files… +27ms
build [================== ] 91%Hash: fbadd386fdb09952e0d6
Version: webpack 3.4.1
Time: 8956ms
Asset Size Chunks Chunk Names
server-bundle.json 248 kB [emitted]
Build completed in 8.999s

Hash: 9b7eaba6053ecf6ff8e6
Version: webpack 3.4.1
Time: 9005ms
Asset Size Chunks Chunk Names
icons/icon16.9qid3ZBUcQn.png 484 bytes [emitted] 0.nuxt.bundle.5db9ce6220aa87a1f6ae.js 9.06 kB 0 [emitted] pages/index vendor.bundle.b2675562e4dda4754ce1.js 144 kB 2 [emitted] vendor nuxt.bundle.25f2f390166067f59e50.js 26 kB 3 [emitted] app manifest.9b7eaba6053ecf6ff8e6.js 1.54 kB 4 [emitted] manifest 0.nuxt.bundle.5db9ce6220aa87a1f6ae.js.map 4.44 kB 0 [emitted] pages/index 1.nuxt.bundle.35041c3db3229e3fe396.js.map 1.69 kB 1 [emitted] layouts/default vendor.bundle.b2675562e4dda4754ce1.js.map 228 kB 2 [emitted] vendor nuxt.bundle.25f2f390166067f59e50.js.map 41.2 kB 3 [emitted] app manifest.9b7eaba6053ecf6ff8e6.js.map 2.81 kB 4 [emitted] manifest 1.nuxt.bundle.35041c3db3229e3fe396.js 2.95 kB 1 [emitted] layouts/default icons/icon120.9qid3ZBUcQn.png 4.69 kB [emitted]
icons/icon144.9qid3ZBUcQn.png 6.09 kB [emitted] icons/icon152.9qid3ZBUcQn.png 6.53 kB [emitted]
icons/icon192.9qid3ZBUcQn.png 9.23 kB [emitted] icons/icon384.9qid3ZBUcQn.png 28.4 kB [emitted]
icons/icon_512.9qid3ZBUcQn.png 45.5 kB [emitted]
manifest.7f98320e.json 785 bytes [emitted]
index.ssr.html 132 bytes [emitted]
index.spa.html 398 bytes [emitted]
vue-ssr-client-manifest.json 7.58 kB [emitted]
nuxt:build Building done +9s

Even get 100 marks of PWA in google chrome audit analysis, but i when i use my mobile to access my website also not showing add to home screen.

I can't find a way to add custom code (eg push notifications, etc.) to the service worker when using the pwa (workbox) nuxt module. Is there a way?

How can you setup forced https redirects? Thank you!

I'm wondering if updates to the cached files are handled automatically / semi-automatically with version number?
Could this be integrated?