new PWA implementation
Bastien Wirtz
@ -2,10 +2,12 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="assets/favicon.ico" />
|
||||||
|
<link rel="apple-touch-icon" href="assets/apple-touch-icon.png" sizes="180x180">
|
||||||
|
<meta name="theme-color" content="#3367D6">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
|
||||||
<meta name="robots" content="noindex">
|
|
||||||
<title>Homer</title>
|
<title>Homer</title>
|
||||||
|
<meta name="description" content="Home Server Dashboard">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "homer",
|
"name": "homer",
|
||||||
"version": "21.09.1",
|
"version": "22.07.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
@ -12,19 +12,18 @@
|
|||||||
"bulma": "^0.9.4",
|
"bulma": "^0.9.4",
|
||||||
"js-yaml": "^4.1.0",
|
"js-yaml": "^4.1.0",
|
||||||
"lodash.merge": "^4.6.2",
|
"lodash.merge": "^4.6.2",
|
||||||
"register-service-worker": "^1.7.2",
|
|
||||||
"vue": "^3.2.33"
|
"vue": "^3.2.33"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rushstack/eslint-patch": "^1.1.0",
|
"@rushstack/eslint-patch": "^1.1.0",
|
||||||
"@vitejs/plugin-vue": "^2.3.1",
|
"@vitejs/plugin-vue": "^2.3.1",
|
||||||
"@vue/cli-plugin-pwa": "^5.0.4",
|
|
||||||
"@vue/eslint-config-prettier": "^7.0.0",
|
"@vue/eslint-config-prettier": "^7.0.0",
|
||||||
"eslint": "^8.5.0",
|
"eslint": "^8.5.0",
|
||||||
"eslint-plugin-vue": "^8.2.0",
|
"eslint-plugin-vue": "^9.1.1",
|
||||||
"prettier": "^2.5.1",
|
"prettier": "^2.5.1",
|
||||||
"sass": "^1.52.2",
|
"sass": "^1.52.2",
|
||||||
"vite": "^2.9.9"
|
"vite": "^2.9.9",
|
||||||
|
"vite-plugin-pwa": "^0.12.2"
|
||||||
},
|
},
|
||||||
"license": "Apache-2.0"
|
"license": "Apache-2.0"
|
||||||
}
|
}
|
||||||
|
|||||||
12
public/assets/icons/README.md
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
# PWA Icons / Images
|
||||||
|
|
||||||
|
We suggest you to create a svg or png icon (if it is a png icon, with the maximum resolution possible) for your application and use it to generate a favicon package in [Favicon Generator](https://realfavicongenerator.net/).
|
||||||
|
|
||||||
|
Once generated, download the ZIP and use android-* icons for pwa-*:
|
||||||
|
|
||||||
|
- use `android-chrome-192x192.png` for `pwa-192x192.png`
|
||||||
|
- use `android-chrome-512x512.png` for `pwa-512x512.png`
|
||||||
|
- `apple-touch-icon.png` is `apple-touch-icon.png`
|
||||||
|
- `favicon.ico` is `favicon.ico`
|
||||||
|
|
||||||
|
`
|
||||||
BIN
public/assets/icons/apple-touch-icon.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 790 B |
|
Before Width: | Height: | Size: 2.3 KiB |
BIN
public/assets/icons/favicon.ico
Normal file
|
After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 124 KiB |
BIN
public/assets/icons/pwa-192x192.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
public/assets/icons/pwa-512x512.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,42 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Homer Dashboard",
|
|
||||||
"short_name": "Homer",
|
|
||||||
"theme_color": "#3367D6",
|
|
||||||
"start_url": "../",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "./icons/favicon-16x16.png",
|
|
||||||
"sizes": "16x16",
|
|
||||||
"type": "image/png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "./icons/favicon-32x32.png",
|
|
||||||
"sizes": "32x32",
|
|
||||||
"type": "image/png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "./icons/icon-any.png",
|
|
||||||
"sizes": "512x512",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "./icons/icon-any.svg",
|
|
||||||
"sizes": "any",
|
|
||||||
"type": "image/svg+xml",
|
|
||||||
"purpose": "any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "./icons/icon-maskable.png",
|
|
||||||
"sizes": "512x512",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "./icons/safari-pinned-tab.svg",
|
|
||||||
"sizes": "any",
|
|
||||||
"type": "image/svg+xml",
|
|
||||||
"purpose": "monochrome"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
BIN
public/logo.png
|
Before Width: | Height: | Size: 36 KiB |
1
public/logo.svg
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
@ -1,2 +0,0 @@
|
|||||||
User-agent: *
|
|
||||||
Disallow:
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
/* eslint-disable no-console */
|
|
||||||
|
|
||||||
import { register } from "register-service-worker";
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV === "production") {
|
|
||||||
register(`${process.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.");
|
|
||||||
},
|
|
||||||
offline() {
|
|
||||||
console.log(
|
|
||||||
"No internet connection found. App is running in offline mode."
|
|
||||||
);
|
|
||||||
},
|
|
||||||
error(error) {
|
|
||||||
console.error("Error during service worker registration:", error);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { VitePWA } from 'vite-plugin-pwa'
|
||||||
import { fileURLToPath, URL } from "url";
|
import { fileURLToPath, URL } from "url";
|
||||||
|
|
||||||
import { defineConfig } from "vite";
|
import { defineConfig } from "vite";
|
||||||
@ -5,7 +6,35 @@ import vue from "@vitejs/plugin-vue";
|
|||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
build: {
|
||||||
|
assetsDir: "resources",
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
VitePWA({
|
||||||
|
registerType: 'autoUpdate',
|
||||||
|
useCredentials: true,
|
||||||
|
manifestFilename: "assets/manifest.json",
|
||||||
|
manifest: {
|
||||||
|
name: 'Homer dashboard',
|
||||||
|
short_name: 'Homer',
|
||||||
|
description: 'Home Server Dashboard',
|
||||||
|
theme_color: '#3367D6',
|
||||||
|
icons: [
|
||||||
|
{
|
||||||
|
src: 'pwa-192x192.png',
|
||||||
|
sizes: '192x192',
|
||||||
|
type: 'image/png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'pwa-512x512.png',
|
||||||
|
sizes: '512x512',
|
||||||
|
type: 'image/png'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||||
|
|||||||