pwa support (#377)

* feat: wpa support * feat: pwa support * chore: added dev-dist to gitignore * chore: delete dev-dist
SELab-2 · May 10, 2023 · 9bb554c · 9bb554c
1 parent 7a026aa
commit 9bb554c
Show file tree

Hide file tree

Showing 15 changed files with 1,522 additions and 140 deletions.
diff --git a/web/.gitignore b/web/.gitignore
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+/dev-dist
 
 # local env files
 .env.local

diff --git a/web/index.html b/web/index.html
@@ -1,9 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta charset="UTF-8" />
+      <meta name="description" content="Website van DrTrottoir">
+      <link rel="manifest" href="/manifest.webmanifest">
+      <link rel="icon" href="/favicon.ico" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+      <meta name="theme-color" content="#ffffff">
+
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dr. Trottoir - Beheer</title>
   </head>
 

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -44,6 +44,7 @@
     "ts-jest": "^29.1.0",
     "typescript": "^4.0.0",
     "vite": "^3.0.9",
+    "vite-plugin-pwa": "^0.14.7",
     "vite-plugin-vuetify": "^1.0.0-alpha.12",
     "vue-tsc": "^1.0.9"
   }

diff --git a/web/public/android-chrome-192x192.png b/web/public/android-chrome-192x192.png
diff --git a/web/public/android-chrome-512x512.png b/web/public/android-chrome-512x512.png
diff --git a/web/public/apple-touch-icon.png b/web/public/apple-touch-icon.png
diff --git a/web/public/favicon-16x16.png b/web/public/favicon-16x16.png
diff --git a/web/public/favicon-32x32.png b/web/public/favicon-32x32.png
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
diff --git a/web/public/pwa-192x192.png b/web/public/pwa-192x192.png
diff --git a/web/public/pwa-512x512.png b/web/public/pwa-512x512.png
diff --git a/web/public/robots.txt b/web/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/web/public/site.webmanifest b/web/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -1,6 +1,7 @@
 // Plugins
 import vue from "@vitejs/plugin-vue";
 import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+import { VitePWA } from 'vite-plugin-pwa'
 
 // Utilities
 import { defineConfig, loadEnv } from "vite";
@@ -19,7 +20,39 @@ export default ({ mode }) => {
       // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
       vuetify({
         autoImport: true
-      })
+      }),
+      VitePWA({
+        registerType: 'autoUpdate',
+        includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+        manifest: {
+          name: 'DrTrottoir',
+          short_name: 'DrTrottoir',
+          description: 'Website van DrTrottoir',
+          theme_color: '#ffffff',
+          start_url: '/',
+          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: 'any maskable',
+            },
+          ],
+        },
+        devOptions: {
+          enabled: true
+        }
+      }),
     ],
     define: {
       "process.env": env
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}