feat: nextjs pwa (#9757)

* feat: nextjs pwa

* feat: nextjs pwa

* chore: update nextjs sentry dep

* fix: temporary config for sentry error

* Revert "fix: temporary config for sentry error"

This reverts commit c8aec35.

* fix: pwa and sentry config

* feat: pwa use profile page

* fix: pwa redirect

* fix: remove profile redirect

* feat: offline page

* fix: remove offline file

.github/workflows/vercel-preview.yml

@@ -6,7 +6,7 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - feat-custom-domain
+      - feat-pwa
 
 jobs:
   deploy:

.gitignore

@@ -41,3 +41,7 @@ test-results/
 
 # Sentry Auth Token
 .sentryclirc
+
+# PWA
+public/sw.js*
+public/workbox-*.js*

components/PageHead.js

@@ -24,6 +24,8 @@ export default function PageHead(props) {
       <meta property="og:type" content={ogType} />
       <meta property="og:url" content={ogUrl} />
       <meta property="og:image" content={ogImage} />
+      <link rel="manifest" href="/manifest.json" />
+
       {children}
     </Head>
   );

next.config.mjs

@@ -2,6 +2,10 @@ import { withSentryConfig } from "@sentry/nextjs";
 import remarkGfm from "remark-gfm";
 import remarkPrism from "remark-prism";
 import createMDX from "@next/mdx";
+import withPWA from "next-pwa";
+import runtimeCaching from "next-pwa/cache.js";
+
+const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -49,37 +53,43 @@ const withMDX = createMDX({
   },
 });
 
-export default withSentryConfig(
-  withMDX(nextConfig),
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
+export default withPWA({
+  dest: "public",
+  disable: !isProduction,
+  runtimeCaching,
+})(withSentryConfig(
 
-    // Suppresses source map uploading logs during build
-    silent: true,
-    org: process.env.SENTRY_ORG,
-    project: process.env.SENTRY_PROJECT,
-  },
-  {
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+    withMDX(nextConfig),
+    {
+      // For all available options, see:
+      // https://github.com/getsentry/sentry-webpack-plugin#options
 
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
+      // Suppresses source map uploading logs during build
+      silent: true,
+      org: process.env.SENTRY_ORG,
+      project: process.env.SENTRY_PROJECT,
+    },
+    {
+      // For all available options, see:
+      // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: true,
+      // Upload a larger set of source maps for prettier stack traces (increases build time)
+      widenClientFileUpload: true,
 
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-    tunnelRoute: "/monitoring",
+      // Transpiles SDK to be compatible with IE11 (increases bundle size)
+      transpileClientSDK: true,
 
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
+      // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+      tunnelRoute: "/monitoring",
 
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
+      // Hides source maps from generated client bundles
+      hideSourceMaps: true,
 
-    // custom
-    automaticVercelMonitors: false,
-  },
+      // Automatically tree-shake Sentry logger statements to reduce bundle size
+      disableLogger: true,
+
+      // custom
+      automaticVercelMonitors: false,
+    },
+  ),
 );