I'm currently working on turning my Vue app into a PWA using the Vite-PWA-plugin (this plugin)
However, I've encountered an issue where the page keeps reloading repeatedly when served from cache, especially when utilizing the Oauth2 protocol for authorization with the oidc-client.js library.
Some observations:
- Opening the PWA offline avoids this problem.
- Clearing the cache storage allows the page to load normally.
Below is my vite.config.ts file:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
const path = require('path')
export default defineConfig({
plugins: [
vue(),
VitePWA({
includeManifestIcons: true,
manifest: {
icons: [
{
src: 'icons/android-launchericon-512-512.png',
sizes: '512x512',
},
{
src: 'icons/android-launchericon-192-192.png',
sizes: '192x192',
},
],
},
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
functions: path.resolve(__dirname, './src/components/functions'),
},
},
server: {
port: 8000,
},
})
My manifest:
{
"name": "my-app",
"short_name": "my-app",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"lang": "en",
"scope": "/",
"icons": [
{ "src": "icons/android-launchericon-512-512.png", "sizes": "512x512" },
{ "src": "icons/android-launchericon-192-192.png", "sizes": "192x192" }
]
}