I setup a Vue 3 project with command npm create vue@latest
. Then to add PWA I installed vite-plugin-pwa, updated vite.config.js and made some changes to other files, see below.
Now I get error about manifest.json, which is an empty file:
The icons in the icons array in vite.config.js are correctly cached as far as I can see.
Now:
- Menu item to install the app on the mobile device doesn't work (now only possible to add to startscreen (browser icon instead of app icon). How can I fix that?
- Under 'Service workers' I can see that serviceworker sw.js is started, but the message in sw.js is not displayed in the console. Is there something I must do to make that message in sw.js appear?
vite.config.js:
import { fileURLToPath, URL } from 'node:url'
import { VitePWA } from 'vite-plugin-pwa';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'auto',
includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
manifest: {
name: 'WKB PWA',
short_name: 'WKB P',
theme_color: '#01bd7e',
start_url: '/',
display: 'standalone',
background_color: "#fff",
icons: [
{
"src": "/img/icons/maskable_icon.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/icons/maskable_icon_x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/icons/maskable_icon_x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/icons/windows11/SmallTile.scale-100.png",
"sizes": "71x71"
},
{
"src": "/img/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-80.png",
"sizes": "80x80"
},
{
"src": "/img/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png",
"sizes": "96x96"
},
{
"src": "/img/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png",
"sizes": "256x256"
},
{
"src": "/img/icons/android/android-launchericon-512-512.png",
"sizes": "512x512"
},
{
"src": "/img/icons/android/android-launchericon-192-192.png",
"sizes": "192x192"
},
{
"src": "/img/icons/android/android-launchericon-144-144.png",
"sizes": "144x144"
},
etc
],
},
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
manifest: true,
}
})
main.js look like this:
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './registerServiceWorker'
// main.js
const app = createApp(App)
app.use(router)
app.mount('#app')
No registerServiceWorker.js file since as I understand it Vite should take care of that.
Package.json:
{
"name": "wkb-app",
"version": "1.0.6",
"type": "module",
"private": true,
"author": "",
"scripts": {
"build": "vite build",
"test:unit": "vitest",
"test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
"dev": "vite",
"preview": "vite preview",
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'"
},
"dependencies": {
"express": "^4.18.2",
"register-service-worker": "^1.7.2",
"vue": "^3.4.15",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.6.2",
"@vue/test-utils": "^2.4.3",
"cypress": "^13.6.3",
"jsdom": "^23.0.1",
"start-server-and-test": "^2.0.3",
"vite": "^5.0.10",
"vite-plugin-pwa": "^0.17.4",
"vitest": "^1.0.4"
}
}
service-worker.js , for now:
console.log("Message from SW")
Don't know what to do to fix this.