Not loading cached vuetify material icons when offline #278
Comments
|
Are you able to share your repo? Hard to debug without code. I'm guessing you are referring to pwa? |
|
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:
***@***.***>
|
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 |
|
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,
},
}
})
|
|
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 Even if it's still an |
|
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:
***@***.***>
|
|
if you're using íles + pwa check https://iles-docs.netlify.app/guide/pwa |
|
@kfung21, no worries. By the way, I would recommend dropping 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. |
ilesandvite.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/
The text was updated successfully, but these errors were encountered: