✨ (pwa) vite pwa configuration
This commit is contained in:
Julien Calixte
@@ -4,8 +4,15 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<title>Lite note</title>
|
<title>Lite note</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Lite note for displaying beautiful notes"
|
||||||
|
/>
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
|
||||||
|
<link rel="mask-icon" href="/masked-icon.svg" color="#FFFFFF" />
|
||||||
|
<meta name="theme-color" content="#2C3A47" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
@@ -59,6 +59,7 @@
|
|||||||
"sass": "^1.63.6",
|
"sass": "^1.63.6",
|
||||||
"typescript": "~4.5.3",
|
"typescript": "~4.5.3",
|
||||||
"vite": "^4.3.9",
|
"vite": "^4.3.9",
|
||||||
|
"vite-plugin-pwa": "^0.16.4",
|
||||||
"vitest": "^0.32.2",
|
"vitest": "^0.32.2",
|
||||||
"webpack": "^5.0.0"
|
"webpack": "^5.0.0"
|
||||||
}
|
}
|
||||||
|
|||||||
2002
pnpm-lock.yaml
generated
2002
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
BIN
public/apple-touch-icon.png
Normal file
BIN
public/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
public/masked-icon.png
Normal file
BIN
public/masked-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
public/pwa-192x192.png
Normal file
BIN
public/pwa-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/pwa-512x512.png
Normal file
BIN
public/pwa-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@@ -1,4 +1,3 @@
|
|||||||
import '@/registerServiceWorker'
|
|
||||||
import 'notyf/notyf.min.css'
|
import 'notyf/notyf.min.css'
|
||||||
|
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
|||||||
@@ -1,36 +0,0 @@
|
|||||||
/* eslint-disable no-console */
|
|
||||||
|
|
||||||
import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
|
|
||||||
import { register } from 'register-service-worker'
|
|
||||||
|
|
||||||
if (import.meta.env.NODE_ENV === 'production') {
|
|
||||||
register(`${import.meta.env.BASE_URL}service-worker.js`, {
|
|
||||||
ready() {
|
|
||||||
console.log(
|
|
||||||
'App is being served from cache by a service worker.\n' +
|
|
||||||
'For more details, visit https://goo.gl/AFskqB'
|
|
||||||
)
|
|
||||||
},
|
|
||||||
registered() {
|
|
||||||
console.log('Service worker has been registered.')
|
|
||||||
},
|
|
||||||
cached() {
|
|
||||||
console.log('Content has been cached for offline use.')
|
|
||||||
},
|
|
||||||
updatefound() {
|
|
||||||
console.log('New content is downloading.')
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
console.log('New content is available; please refresh.')
|
|
||||||
serviceWorkerBusEvent.emit()
|
|
||||||
},
|
|
||||||
offline() {
|
|
||||||
console.log(
|
|
||||||
'No internet connection found. App is running in offline mode.'
|
|
||||||
)
|
|
||||||
},
|
|
||||||
error(error) {
|
|
||||||
console.error('Error during service worker registration:', error)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -3,10 +3,49 @@ import path from 'path'
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import { UserConfigExport } from 'vitest/dist/config'
|
import { UserConfigExport } from 'vitest/dist/config'
|
||||||
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
|
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
|
||||||
|
import { VitePWA } from 'vite-plugin-pwa'
|
||||||
|
|
||||||
|
const mainColor = '#2C3A47'
|
||||||
|
|
||||||
export default defineConfig(({ command }) => {
|
export default defineConfig(({ command }) => {
|
||||||
const config: UserConfigExport = {
|
const config: UserConfigExport = {
|
||||||
plugins: [vue(), VueI18nPlugin({})],
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
VueI18nPlugin({}),
|
||||||
|
VitePWA({
|
||||||
|
registerType: 'autoUpdate',
|
||||||
|
includeAssets: [
|
||||||
|
'favicon.ico',
|
||||||
|
'apple-touch-icon.png',
|
||||||
|
'masked-icon.svg'
|
||||||
|
],
|
||||||
|
manifest: {
|
||||||
|
name: 'Lite Note',
|
||||||
|
short_name: 'LiteNote',
|
||||||
|
description: 'Lite Note for note taking',
|
||||||
|
background_color: mainColor,
|
||||||
|
theme_color: mainColor,
|
||||||
|
icons: [
|
||||||
|
{
|
||||||
|
src: 'pwa-192x192.png',
|
||||||
|
sizes: '192x192',
|
||||||
|
type: 'image/png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'pwa-512x512.png',
|
||||||
|
sizes: '512x512',
|
||||||
|
type: 'image/png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'pwa-512x512.png',
|
||||||
|
sizes: '512x512',
|
||||||
|
type: 'image/png',
|
||||||
|
purpose: 'maskable'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': path.resolve(__dirname, './src'),
|
'@': path.resolve(__dirname, './src'),
|
||||||
|
|||||||
@@ -1,79 +0,0 @@
|
|||||||
const mainColor = '#2C3A47'
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
pwa: {
|
|
||||||
themeColor: mainColor,
|
|
||||||
msTileColor: mainColor,
|
|
||||||
workboxOptions: {
|
|
||||||
skipWaiting: true,
|
|
||||||
clientsClaim: true
|
|
||||||
},
|
|
||||||
name: 'Lite Note',
|
|
||||||
manifestOptions: {
|
|
||||||
background_color: mainColor,
|
|
||||||
theme_color: mainColor,
|
|
||||||
icons: [
|
|
||||||
{
|
|
||||||
src: './img/icons/android-chrome-192x192.png',
|
|
||||||
sizes: '192x192',
|
|
||||||
type: 'image/png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: './img/icons/android-chrome-512x512.png',
|
|
||||||
sizes: '512x512',
|
|
||||||
type: 'image/png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: './img/icons/apple-touch-icon-60x60.png',
|
|
||||||
sizes: '60x60',
|
|
||||||
type: 'image/png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: './img/icons/apple-touch-icon-76x76.png',
|
|
||||||
sizes: '76x76',
|
|
||||||
type: 'image/png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: './img/icons/apple-touch-icon-120x120.png',
|
|
||||||
sizes: '120x120',
|
|
||||||
type: 'image/png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: './img/icons/apple-touch-icon-152x152.png',
|
|
||||||
sizes: '152x152',
|
|
||||||
type: 'image/png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: './img/icons/apple-touch-icon-180x180.png',
|
|
||||||
sizes: '180x180',
|
|
||||||
type: 'image/png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: './img/icons/msapplication-icon-144x144.png',
|
|
||||||
sizes: '144x144',
|
|
||||||
type: 'image/png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: './img/icons/mstile-150x150.png',
|
|
||||||
sizes: '150x150',
|
|
||||||
type: 'image/png'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user