pwa test (#152)

* pwa test * update images * update images
cartridge-gg · Sep 19, 2023 · abdf954 · abdf954 · vercel · Sep 19, 2023
1 parent cfcf64b
commit abdf954
Show file tree

Hide file tree

Showing 12 changed files with 2,041 additions and 30 deletions.
diff --git a/web/.gitignore b/web/.gitignore
@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#pwa
+/public/sw.js
+/public/sw.js.map
+/public/workbox-*
diff --git a/web/next.config.js b/web/next.config.js
@@ -7,4 +7,12 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+
+const withPWA = require("next-pwa");
+
+module.exports = withPWA({
+  dest: "public",
+  register: true,
+  skipWaiting: true,
+  // disable: process.env.NODE_ENV === 'development'
+})(nextConfig);
diff --git a/web/package.json b/web/package.json
@@ -24,6 +24,7 @@
     "howler": "^2.2.3",
     "js-cookie": "^3.0.5",
     "next": "13.2.4",
+    "next-pwa": "^5.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-query": "^3.39.2",

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/manifest.json b/web/public/manifest.json
@@ -0,0 +1,21 @@
+{
+    "theme_color": "#11ED83",
+    "background_color": "#172217",
+    "display": "fullscreen",
+    "scope": "/",
+    "start_url": "/",
+    "name": "RollYourOwn",
+    "short_name": "RYO",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}
diff --git a/web/src/pages/_document.tsx b/web/src/pages/_document.tsx
@@ -3,7 +3,18 @@ import { Html, Head, Main, NextScript } from "next/document";
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        {/* icons */}
+        <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" />
+        <link rel="apple-touch-icon" href="/icon.png" />
+
+        {/* pwa */}
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="theme-color" content="#11ED83" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+      </Head>
       <body>
         <Main />
         <NextScript />

diff --git a/web/yarn.lock b/web/yarn.lock