Not loading cached vuetify material icons when offline

[kfung21]

• [x ] I have read the troubleshooting section before opening an issue.
• [x ] I have tried upgrading iles and vite.

Description 📖

Vuetify material icons load correctly when online. When offline, the material icons aren't displaying despite being correctly cached.

Reproduction 🐞

https://www.penpublic.com/

</details>

### Logs 📜

_If not providing a reproduction:_

<details>
<summary>Output</summary>

_Run `DEBUG=iles:* npm run dev` or `DEBUG=iles:* npm run build` and provide the output:_

</details>

### Screenshots 📷

_Provide console or browser screenshots of the problem_.

[TechAkayy]

Are you able to share your repo? Hard to debug without code. I'm guessing you are referring to pwa?

[kfung21]

I can share a few modules but rather not disclose the entire app if that's ok . Here are some screenshots of offline pwa vs online. Thanks Kevin

…

---------- Forwarded message --------- From: Akayy ***@***.***> Date: Thu, Sep 5, 2024, 3:39 AM Subject: Re: [ElMassimo/iles] Not loading cached vuetify material icons when offline (Issue #278) To: ElMassimo/iles ***@***.***> Cc: kfung21 ***@***.***>, Author ***@***.***> Are you able to share your repo? Hard to debug without code. I'm guessing you are referring to pwa? — Reply to this email directly, view it on GitHub <#278 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFRTLLI4UIA3DSKAKLGIG7TZVAYHJAVCNFSM6AAAAABNVYGG7GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZRGE4TANZZG4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ouuan]

I can share a few modules but rather not disclose the entire app if that's ok .

You are encouraged to provide as little code as possible, as long as it is self-contained and the bug can be reproduced. i.e. You can provide a Minimal, Reproducible Example

[kfung21]

how do you recommend sharing reproducible code since it needs to be deployed in production in order to replicate? Attached are my vite config, vuetify js, and index.html files. Let me know if you need anything else. Thanks

On Thu, 5 Sept 2024 at 06:49, Yufan You ***@***.***> wrote: I can share a few modules but rather not disclose the entire app if that's ok . You are encouraged to provide as little code as possible, as long as it is self-contained and the bug can be reproduced. i.e. You can provide a Minimal, Reproducible Example <https://stackoverflow.com/help/minimal-reproducible-example> — Reply to this email directly, view it on GitHub <#278 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFRTLLJEAAHRYT5JR76HOC3ZVBOM3AVCNFSM6AAAAABNVYGG7GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZRG4ZTINRWGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

// Plugins import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import Fonts from 'unplugin-fonts/vite' import Vue from ***@***.***/plugin-vue' import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify' import { VitePWA } from 'vite-plugin-pwa' // Utilities import { defineConfig } from 'vite' import { fileURLToPath, URL } from 'node:url' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ Vue({ template: { transformAssetUrls } }), // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme Vuetify({ autoImport: true, styles: { configFile: 'src/styles/settings.scss', }, }), Components(), Fonts({ google: { families: [{ name: 'Roboto', styles: ***@***.***;300;400;500;700;900', }], }, }), AutoImport({ imports: [ 'vue', 'vue-router', ], eslintrc: { enabled: true, }, vueTemplate: true, }), VitePWA({ registerType: 'autoUpdate', injectRegister: 'auto', includeAssets: [ 'favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg', ], manifest: { name: 'PenPublic', short_name: 'PenPublic', description: 'Public Sector Jobs with a Pension', theme_color: '#ffffff', icons: [ { src: 'android-chrome-192x192.png', sizes: '192x192', type: 'image/png' }, { src: 'android-chrome-512x512.png', sizes: '512x512', type: 'image/png' }, { src: 'android-chrome-maskable-192x192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' }, { src: 'android-chrome-maskable-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }, { src: '/img/icons/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }, { src: '/img/icons/favicon-16x16.png', sizes: '16x16', type: 'image/png' }, { src: '/img/icons/favicon-32x32.png', sizes: '32x32', type: 'image/png' }, { src: '/favicon.ico', sizes: '64x64 32x32 24x24 16x16', type: 'image/x-icon' } ], start_url: '/', display: 'standalone', background_color: '#ffffff' }, workbox: { globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2,woff,ttf,eot,otf}'], runtimeCaching: [ { // Caching locally served Material Design Icons urlPattern: /^\/assets\/materialdesignicons-webfont\/.*$/, handler: 'CacheFirst', options: { cacheName: 'mdi-font-cache', expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year }, }, }, { // Caching all other local fonts and icons urlPattern: /\.(?:woff2|woff|ttf|eot|otf)$/, handler: 'CacheFirst', options: { cacheName: 'fonts-cache', expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365, }, }, }, ], }, }), ], define: { 'process.env': {} }, resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, extensions: [ '.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue', ], }, server: { port: 3000, }, }) /** * plugins/vuetify.js * * Framework documentation: https://vuetifyjs.com` */ // Styles import ***@***.***/font/css/materialdesignicons.css' // Ensure you are using css-loader // import '../css/material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader import 'vuetify/styles' // Composables import { createVuetify } from 'vuetify' import { aliases, mdi } from 'vuetify/iconsets/mdi' // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides export default createVuetify({ theme: { defaultTheme: 'dark', }, icons: { defaultSet: 'mdi', aliases, sets: { mdi, }, } })

[TechAkayy]

Thanks for sharing. Next time, when sharing code, please select your code block & wrap it within a pair of triple tilde's (new lines before and after your code block like below image), this helps with code highlight & makes it's scrollable when you submit your comment.

I notice that yours is a Vite based project, as you have shared a vite config, and not an Iles one? I don't see any Iles specific code in what you have shared, can you please confirm if it's an Iles project?

Even if it's still an Iles project and somehow vite config is getting used instead of iles config file, there is a better chance of getting any help on this if you raise this issue in the vite-plugin-pwa repo, as this is a pwa related query, and you were able to share only certain configs here.

[kfung21]

My apologies. Yes this is a vite-pwa issue. I'm not sure how I was routed to Iles unless it's the same owner. I'll repost accordingly thanks

…

On Fri, Sep 6, 2024, 1:33 AM Akayy ***@***.***> wrote: Thanks for sharing. Next time, when sharing code, please select your code block & wrap it within a pair of triple tilde's (new lines before and after your code block like below image), this helps with code highlight & make it's scrollable when you submit your comment. image.png (view on web) <https://github.com/user-attachments/assets/6ae0976c-04d3-48c2-a053-0e0262309c8a> I notice that yours is a Vite based project, as you have shared a vite config, and not an Iles one? I don't see any Iles specific code in what you have shared, can you please confirm if it's an Iles project? Even if it's still an Iles project and somehow vite config is getting used instead of iles config file, there is a better chance to get any help on this if you raise this issue in the vite-plugin-pwa <https://github.com/vite-pwa/vite-plugin-pwa> repo, as this is a pwa related query with you're able to share only certain configs here. — Reply to this email directly, view it on GitHub <#278 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFRTLLPOATCTJN6NBGLGCMTZVFSGJAVCNFSM6AAAAABNVYGG7GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZTGUZTGNBTGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[userquin]

if you're using íles + pwa check https://iles-docs.netlify.app/guide/pwa

[TechAkayy]

@kfung21, no worries. By the way, I would recommend dropping materialdesignicons.css and instead use css icons with unocss. You might end up using say 10 icons when using materialdesignicons.css, but the whole css will be included in your built bundle, and it's not treeshaken.

Here is a very simple vue-vuetify template that does it - https://github.com/pinegrow/pg-vue-vuetify. It uses a small hack to use unocss icons for vuetify components as well - https://github.com/Pinegrow/pg-vue-vuetify/blob/main/vuetify.config.ts#L101. Unocss nicely treeshakes unused icons.

You will be surprised to find how much weight you shed in your final bundle. Not sure if this solves your current issue (I guess it will 😉), but give it a shot.