Vue-cli: [PWA] /img/icons cache?

Created on 18 Nov 2018  路  6Comments  路  Source: vuejs/vue-cli

Version

3.1.1

Reproduction link

https://test-app-8134f.firebaseapp.com/

Node and OS info

node 10.13.0, npm 6.4.1, macOS 10.14, windows 10

Steps to reproduce

Im new in PWA plugin, so i have a question. Is "/img/icons" folder not cached by service worker by default and why?
I created new app with PWA option, deploy it to firebase and i see that any files from "/img/icons" not cached...
https://test-app-8134f.firebaseapp.com/ this is my result. Open dev console, enable Offline mode, reload page.
Screenshot: http://joxi.ru/52aR4oxSE4j1YA
Same problem with manifest.json. It is correct behavior?

What is expected?

Any files from public folder should be cached by default

What is actually happening?

/img/icons folder not cached, also manifest.json not cached


Please tell me if im wrong and explain me why this happens and how to fix(?) it.
Thanks! Sorry for my English, btw.

Most helpful comment

Because icons are excluded in the default workbox settings:

https://github.com/vuejs/vue-cli/blob/cdec606587437018644f7bcefaf1bec72b3da5c5/packages/%40vue/cli-plugin-pwa/index.js#L33-L40

https://github.com/vuejs/vue-cli/pull/769#discussion_r166075016

The request that a browser makes for either a registered favicon or for the home screen icon bypasses the service worker, so there's no benefit from caching them.

manifest.json was excluded as we followed workbox's default config. (They'll change the behavior in the upcoming v4, though. https://github.com/GoogleChrome/workbox/pull/1679)

These default options can be overridden by configuring the pwa.workboxOptions field in vue.config.js. https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration

All 6 comments

Because icons are excluded in the default workbox settings:

https://github.com/vuejs/vue-cli/blob/cdec606587437018644f7bcefaf1bec72b3da5c5/packages/%40vue/cli-plugin-pwa/index.js#L33-L40

https://github.com/vuejs/vue-cli/pull/769#discussion_r166075016

The request that a browser makes for either a registered favicon or for the home screen icon bypasses the service worker, so there's no benefit from caching them.

manifest.json was excluded as we followed workbox's default config. (They'll change the behavior in the upcoming v4, though. https://github.com/GoogleChrome/workbox/pull/1679)

These default options can be overridden by configuring the pwa.workboxOptions field in vue.config.js. https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration

@sodatea oh, thank you very much! 鉂わ笍

I'm looking into this exact issue, and while I understand the default configuration excludes these, it would be nice to know the correct way to ensure the home screen icon/favicon are properly cached so they can display in offline mode. Is there any insight on that? This issue is nearly a year and a half old, so maybe some things have changed?

@Troncoso I believe you can check this in the chrome dev tools. Go to offline mode, and you'll see that the icons are still there.

The problem I'm facing though, is that the icons aren't getting updated. The browser is still using the same icons from the cache

@ninest Yes, I see the icons there, but when running in offline mode, the browser tab stops showing the favicon.

@Troncoso so for you, the PWA is working offline, but only the icons won't show?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

joshuajohnson814 picture joshuajohnson814  路  3Comments

DrSensor picture DrSensor  路  3Comments

chasegiunta picture chasegiunta  路  3Comments

brandon93s picture brandon93s  路  3Comments

Gonzalo2683 picture Gonzalo2683  路  3Comments