feat: pwa

README.md

@@ -1,12 +1,34 @@
 # SST Alumni Web App
 
-This repository contains both the web app and the API for the SST Alumni platform.
+This repository contains the following for the SST Alumni App Platform (SSTAAP):
 
-[iOS App](https://github.com/sstalumniassociation/ios)
+* Web PWA
+* Admin Dashboard
+* API
 
 ## Getting Started
 
 Please get access or set up the following services:
 
 * Turso
 * Firebase
+
+You will need to provide the following env vars in a `.env` file:
+
+| Name                             | Purpose                          |
+| -------------------------------- | -------------------------------- |
+| `FIREBASE_APP_CHECK_DEBUG_TOKEN` | Firebase App Check Debug Token   |
+| `TURSO_URL`                      | Database to connect to           |
+| `TURSO_AUTH_TOKEN`               | Token to authenticate with Turso |
+
+### Development
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+## Sibling projects
+
+[iOS App](https://github.com/sstalumniassociation/ios)

nuxt.config.ts

@@ -11,6 +11,35 @@ export default defineNuxtConfig({
   ],
 
   pwa: {
+    devOptions: { enabled: true },
+    registerType: 'autoUpdate',
+    workbox: {
+      globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
+    },
+    manifest: {
+      name: 'SSTAA',
+      short_name: 'SSTAA',
+      description: 'The SST Alumni App',
+      theme_color: '#000000',
+      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',
+        },
+
+      ],
+    },
   },
 
   vuefire: {

package.json

@@ -10,13 +10,15 @@
     "postinstall": "nuxt prepare",
     "db:generate": "drizzle-kit generate:sqlite",
     "db:push": "drizzle-kit push:sqlite",
-    "db:drop": "drizzle-kit drop"
+    "db:drop": "drizzle-kit drop",
+    "pwa:generate-assets": "pwa-assets-generator --preset minimal public/logo.png"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.42.0",
     "@libsql/client": "^0.3.4",
     "@nuxt/devtools": "latest",
     "@paralleldrive/cuid2": "^2.2.2",
+    "@vite-pwa/assets-generator": "^0.0.10",
     "@vite-pwa/nuxt": "^0.1.1",
     "dayjs": "^1.11.9",
     "dotenv": "^16.3.1",

pages/app.vue

@@ -27,8 +27,30 @@ const appRoutes = [
   },
 ]
 
+useSeoMeta({
+  description: 'The SST Alumni App',
+})
+
 useHeadSafe({
-  titleTemplate: 'SSTAA - %s',
+  titleTemplate: (titleChunk) => {
+    return titleChunk ? `${titleChunk} - SSTAA` : 'SSTAA'
+  },
+  link: [
+    {
+      rel: 'icon',
+      href: '/favicon.ico',
+    },
+    {
+      rel: 'apple-touch-icon',
+      href: '/apple-touch-icon-180x180.png',
+      sizes: '180x180',
+    },
+    {
+      rel: 'mask-icon',
+      href: '/maskable-icon-512x512.png',
+      color: '#ffffff',
+    },
+  ],
   meta: [
     {
       name: 'viewport',
@@ -46,10 +68,6 @@ useHeadSafe({
       name: 'theme-color',
       content: '#000000',
     },
-    {
-      name: 'apple-touch-icon',
-      content: 'logo.png',
-    },
   ],
 })
 

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /