✨ Add PWA Support

package.json

@@ -19,6 +19,7 @@
     "eslint": "^8.5.0",
     "eslint-plugin-vue": "^8.2.0",
     "prettier": "^2.5.1",
-    "vite": "^2.9.5"
+    "vite": "^2.9.5",
+    "vite-plugin-pwa": "^0.12.0"
   }
 }

public/favicon.svg

@@ -0,0 +1 @@
+<svg id="screenshot" viewBox="0 0 512 511.9999999999999" width="512" height="511.9999999999999" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="-webkit-print-color-adjust: exact;"><g id="shape-881e7b40-cbde-11ec-b1da-f1565ad79f08" clip-path="url(#frame-clip-881e7b40-cbde-11ec-b1da-f1565ad79f08-c54471c0-cbe1-11ec-98cd-6dc23a2e2ce9)"><defs><clipPath id="frame-clip-881e7b40-cbde-11ec-b1da-f1565ad79f08-c54471c0-cbe1-11ec-98cd-6dc23a2e2ce9" class="frame-clip"><rect x="0" y="0" width="512" height="512"/></clipPath></defs><g id="shape-8db28d31-cbde-11ec-b1da-f1565ad79f08"><rect rx="50" ry="50" x="0" y="0" transform="matrix(1,0,0,1,0,0)" width="512" height="512" style="fill: rgb(53, 53, 53); fill-opacity: 1;"/></g><g id="shape-90cb4970-cbdf-11ec-b1da-f1565ad79f08"><g id="shape-40af0440-cbdf-11ec-b1da-f1565ad79f08"><g id="shape-2d3a8c40-cbdf-11ec-b1da-f1565ad79f08"><g id="shape-2d3a8c41-cbdf-11ec-b1da-f1565ad79f08"><rect rx="5" ry="5" x="147.25" y="340.56163194444434" transform="matrix(1,0,0,1,0,0)" width="319" height="77" style="fill: rgb(20, 88, 126); fill-opacity: 1;"/></g><g id="shape-2d3a8c42-cbdf-11ec-b1da-f1565ad79f08"><rect rx="5" ry="5" x="46.25" y="340.56163194444434" transform="matrix(1,0,0,1,0,0)" width="77" height="77" style="fill: rgb(20, 88, 126); fill-opacity: 1;"/></g></g></g><g id="shape-7a8b2e50-cbdf-11ec-b1da-f1565ad79f08"><g id="shape-7a8b2e51-cbdf-11ec-b1da-f1565ad79f08"><g id="shape-7a8b2e52-cbdf-11ec-b1da-f1565ad79f08"><rect rx="5" ry="5" x="146.75" y="216.36979166666652" transform="matrix(1,0,0,1,0,0)" width="319" height="77" style="fill: rgb(20, 88, 126); fill-opacity: 1;"/></g><g id="shape-7a8b2e53-cbdf-11ec-b1da-f1565ad79f08"><rect rx="5" ry="5" x="45.75" y="216.36979166666652" transform="matrix(1,0,0,1,0,0)" width="77" height="77" style="fill: rgb(20, 88, 126); fill-opacity: 1;"/></g></g></g><g id="shape-7d7a37f0-cbdf-11ec-b1da-f1565ad79f08"><g id="shape-7d7a37f1-cbdf-11ec-b1da-f1565ad79f08"><g id="shape-7d7a37f2-cbdf-11ec-b1da-f1565ad79f08"><rect rx="5" ry="5" x="146.75" y="93.68489583333314" transform="matrix(1,0,0,1,0,0)" width="319" height="77" style="fill: rgb(125, 43, 45); fill-opacity: 1;"/></g><g id="shape-7d7a37f3-cbdf-11ec-b1da-f1565ad79f08"><rect rx="5" ry="5" x="45.75" y="93.68489583333314" transform="matrix(1,0,0,1,0,0)" width="77" height="77" style="fill: rgb(125, 43, 45); fill-opacity: 1;"/></g></g></g></g></g></svg>

src/assets/base.css

@@ -9,6 +9,11 @@
   --bottomnav-active-color: #7ca74b;
 }
 
+html,
+body {
+  height: 100%;
+}
+
 body {
   margin: 0;
   padding: 0;

src/main.js

@@ -1,9 +1,14 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import { registerSW } from "virtual:pwa-register";
 
 const app = createApp(App);
 
 app.use(router);
 
 app.mount("#app");
+
+registerSW({
+  onOfflineReady() {},
+});

vite.config.js

@@ -2,10 +2,41 @@ import { fileURLToPath, URL } from "url";
 
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: "autoUpdate",
+      manifest: {
+        name: "Timetable",
+        description: "Timetable and Substitution plan viewer",
+        theme_color: "#212121",
+        background_color: "#353535",
+        display: "standalone",
+        icons: [
+          {
+            src: "/favicon.svg",
+            sizes: "512x512",
+            type: "image/svg+xml",
+          },
+          {
+            src: "/icon.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "/icon.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+        ],
+      },
+    }),
+  ],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),