feat: add PWA support

getAlby · Jan 6, 2024 · 7831021 · 7831021
1 parent 9525ba6
commit 7831021
Show file tree

Hide file tree

Showing 9 changed files with 2,330 additions and 24 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["master"]
+    branches: ["master", "feat/pwa"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
-# Alby PoS
+# BuzzPay
 
-Static HTML PoS powered by Nostr Wallet Connect
+Alby's super simple self-custodial PoS powered by Nostr Wallet Connect.
+
+Easily save to your homescreen as a PWA and share with your team with a single link or QR code.
 
 ## Development
 

diff --git a/index.html b/index.html
@@ -2,9 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Alby PoS</title>
+    <meta name="author" content="Alby" />
+    <meta name="description" content="Alby's super simple self-custodial PoS" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <meta name="theme-color" content="#FFDF6F" />
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <link rel="apple-touch-icon" href="/icon.png" sizes="512x512" />
+    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF" />
+    <link rel="shortcut icon" href="/icon.png" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <title>BuzzPay</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.6",
     "typescript": "^5.2.2",
-    "vite": "^5.0.10"
+    "vite": "^5.0.10",
+    "vite-plugin-pwa": "^0.17.4"
   }
 }
diff --git a/public/icon.png b/public/icon.png
diff --git a/public/icon.svg b/public/icon.svg
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,8 +1,29 @@
 import { defineConfig } from "vite";
+import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";
 import react from "@vitejs/plugin-react-swc";
 
+const pwaConfig: Partial<VitePWAOptions> = {
+  includeAssets: ["icon.png", "icon.svg"],
+  manifest: {
+    name: "BuzzPay",
+    short_name: "BuzzPay",
+    description: "Alby's super simple self-custodial PoS",
+    scope: "/pos/",
+    background_color: "#FFDF6F",
+    theme_color: "#FFDF6F",
+    display: "standalone",
+    icons: [
+      {
+        src: "icon.png",
+        type: "image/png",
+        sizes: "512x512",
+      },
+    ],
+  },
+};
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), VitePWA(pwaConfig)],
   base: "/pos/",
 });