feat: add next-pwa / workbox

.gitignore

@@ -32,3 +32,8 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# workbox
+public/workbox-*.js*
+public/sw.js*
+public/worker-*.js*

next.config.js

@@ -1,16 +1,19 @@
 const withPlugins = require('next-compose-plugins');
+const withPWA = require('next-pwa');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
-const plugins = [withBundleAnalyzer];
+const nextPlugins = [withBundleAnalyzer, withPWA];
 
 const nextConfig = {
   swcMinify: true,
   compiler: {
-    // ssr and displayName are configured by default
     styledComponents: true,
   },
+  pwa: {
+    dest: 'public',
+  },
 };
 
-module.exports = withPlugins(plugins, nextConfig);
+module.exports = withPlugins(nextPlugins, nextConfig);

package.json

@@ -54,6 +54,7 @@
     "focus-visible": "^5.2.0",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",
+    "next-pwa": "^5.4.6",
     "normalize.css": "^8.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",

public/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "Money printer go BRRR",
+  "short_name": "BRRR.money",
+  "description": "Print it, baby!",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#FFFFFF",
+  "icons": [
+    {
+      "src": "/icons/favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

public/robots.txt

@@ -1,2 +1,2 @@
 User-agent: *
-Disallow: 
+Disallow:

src/pages/_app.tsx

@@ -52,7 +52,10 @@ class App extends NextApp {
           <meta name="description" content={description} />
           <meta name="author" content={author} />
           <link rel="canonical" href={url} />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+          />
           {/* Open Graph */}
           <meta property="og:type" content="website" />
           <meta property="og:title" content={title} />
@@ -79,6 +82,11 @@ class App extends NextApp {
           })}
           {/* Safari */}
           <meta name="apple-mobile-web-app-title" content={title} />
+          <meta name="apple-mobile-web-app-capable" content="yes" />
+          <meta
+            name="apple-mobile-web-app-status-bar-style"
+            content="default"
+          />
           <link
             rel="apple-touch-icon"
             sizes="300x300"
@@ -92,7 +100,7 @@ class App extends NextApp {
           {/* Windows */}
           <meta name="msapplication-config" content="/browserconfig..xml" />
           {/* PWA manifest */}
-          <link rel="manifest" href="/site.webmanifest" />
+          <link rel="manifest" href="/manifest.json" />
           <meta name="theme-color" content={brandColor} />
         </Head>
         <GlobalStyle />