new PWA implementation
Bastien Wirtz
@ -2,10 +2,12 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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="robots" content="noindex">
|
||||
<title>Homer</title>
|
||||
<meta name="description" content="Home Server Dashboard">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "homer",
|
||||
"version": "21.09.1",
|
||||
"version": "22.07.1",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
@ -12,19 +12,18 @@
|
||||
"bulma": "^0.9.4",
|
||||
"js-yaml": "^4.1.0",
|
||||
"lodash.merge": "^4.6.2",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"vue": "^3.2.33"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.1.0",
|
||||
"@vitejs/plugin-vue": "^2.3.1",
|
||||
"@vue/cli-plugin-pwa": "^5.0.4",
|
||||
"@vue/eslint-config-prettier": "^7.0.0",
|
||||
"eslint": "^8.5.0",
|
||||
"eslint-plugin-vue": "^8.2.0",
|
||||
"eslint-plugin-vue": "^9.1.1",
|
||||
"prettier": "^2.5.1",
|
||||
"sass": "^1.52.2",
|
||||
"vite": "^2.9.9"
|
||||
"vite": "^2.9.9",
|
||||
"vite-plugin-pwa": "^0.12.2"
|
||||
},
|
||||
"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 { defineConfig } from "vite";
|
||||
@ -5,7 +6,35 @@ import vue from "@vitejs/plugin-vue";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
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: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
|
||||