feat(webapp): set up vite-plugin-pwa

Let's see if this works... It's a bit difficult to test locally. Related to #70
JoosepAlviste · Jul 16, 2023 · ccdb299 · ccdb299
1 parent 08088de
commit ccdb299
Show file tree

Hide file tree

Showing 8 changed files with 1,402 additions and 76 deletions.
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
@@ -92,6 +92,7 @@
     "tsx": "^3.12.6",
     "typescript": "^4.9.4",
     "vite": "^4.4.2",
+    "vite-plugin-pwa": "^0.16.4",
     "vitest": "^0.33.0"
   }
 }
diff --git a/apps/webapp/public/favicon.ico b/apps/webapp/public/favicon.ico
diff --git a/apps/webapp/public/pwa-192x192.png b/apps/webapp/public/pwa-192x192.png
diff --git a/apps/webapp/public/pwa-512x512.png b/apps/webapp/public/pwa-512x512.png
diff --git a/apps/webapp/public/pwa-64x64.png b/apps/webapp/public/pwa-64x64.png
diff --git a/apps/webapp/src/renderer/_default.page.server.tsx b/apps/webapp/src/renderer/_default.page.server.tsx
@@ -51,13 +51,16 @@ export async function render(pageContext: PageContextServer) {
         <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">
         <link rel="mask-icon" href="/maskable-icon-512x512.png" color="#FFFFFF">
         <meta name="theme-color" content="#6366f1">
+        <link rel="manifest" href="/manifest.webmanifest">
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="${desc}" />
         <title>${title}</title>
 
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+
+        <script src="/registerSW.js"></script>
       </head>
       <body class="${themeClass}">
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>

diff --git a/apps/webapp/vite.config.ts b/apps/webapp/vite.config.ts
@@ -5,6 +5,7 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import react from '@vitejs/plugin-react'
 import { loadEnv } from 'vite'
 import ssr from 'vite-plugin-ssr/plugin'
+import { VitePWA } from 'vite-plugin-pwa'
 import svgr from 'vite-plugin-svgr'
 import { defineConfig } from 'vitest/config'
 
@@ -33,6 +34,43 @@ export default ({ mode }: { mode: string }) => {
         authToken: process.env.SENTRY_AUTH_TOKEN,
         telemetry: false,
       }),
+      VitePWA({
+        includeAssets: [
+          'favicon.ico',
+          'apple-touch-icon-180x180.png',
+          'maskable-icon-512x512.svg',
+        ],
+        manifest: {
+          name: 'Serieslist',
+          short_name: 'Serieslist',
+          description:
+            'Always know which episode to watch next. Keep track of your series and seen episodes.',
+          theme_color: '#6366f1',
+          icons: [
+            {
+              src: 'pwa-64x64.png',
+              sizes: '64x64',
+              type: 'image/png',
+            },
+            {
+              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: {
       alias: {