feat: add pre pwa approach

.gitignore

@@ -41,3 +41,8 @@ next-env.d.ts
 
 # sentry Config File
 .env.sentry-build-plugin
+
+# pwa
+/public/workbox*
+/public/sw*
+/public/fallback-development*

app/layout.tsx

@@ -5,7 +5,7 @@ import localFont from 'next/font/local'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 
-import { APP_NAME } from '@/config/constants/main'
+import { APP_DESCRIPTION, APP_NAME } from '@/config/constants/main'
 
 import './globals.css'
 import Providers from './providers'
@@ -27,13 +27,17 @@ const fracktif = localFont({
   display: 'swap',
 })
 
+const _APP_NAME = APP_NAME.FULL
+const APP_DEFAULT_TITLE = APP_NAME.SHORT
+const APP_TITLE_TEMPLATE = `%s | ${APP_NAME.FULL}`
+
 export const metadata: Metadata = {
+  applicationName: _APP_NAME,
   title: {
-    template: `%s | ${APP_NAME.FULL}`,
+    template: APP_TITLE_TEMPLATE,
     default: APP_NAME.FULL,
   },
-  description: 'Stop wondering where your money goes. Track Income & Expense.',
-  applicationName: APP_NAME.FULL,
+  description: APP_DESCRIPTION,
   manifest: '/manifest.json',
   icons: {
     icon: '/icons/favicon.ico',
@@ -48,11 +52,32 @@ export const metadata: Metadata = {
       url: '/icons/apple-touch-icon.png',
     },
   },
+  formatDetection: {
+    telephone: false,
+  },
+  openGraph: {
+    type: 'website',
+    siteName: _APP_NAME,
+    title: {
+      default: APP_DEFAULT_TITLE,
+      template: APP_TITLE_TEMPLATE,
+    },
+    description: APP_DESCRIPTION,
+  },
+  twitter: {
+    card: 'summary',
+    title: {
+      default: APP_DEFAULT_TITLE,
+      template: APP_TITLE_TEMPLATE,
+    },
+    description: APP_DESCRIPTION,
+  },
 }
 
 export const viewport: Viewport = {
   themeColor: '#FFFFFF',
 }
+
 export default function RootLayout({
   children,
 }: Readonly<{

app/ui/sign-in/sign-in.tsx

@@ -25,7 +25,11 @@ import {
 } from '@/app/lib/types'
 import { Accordion, AccordionItem, Divider } from '@nextui-org/react'
 
-import { APP_NAME, DEFAULT_ICON_SIZE } from '@/config/constants/main'
+import {
+  APP_DESCRIPTION,
+  APP_NAME,
+  DEFAULT_ICON_SIZE,
+} from '@/config/constants/main'
 import { ROUTE } from '@/config/constants/routes'
 
 import ClientButton from '../default-button'
@@ -135,9 +139,7 @@ function SignIn() {
         <h1 className='mb-2 text-3xl font-bold md:text-4xl'>
           Welcome to {APP_NAME.FULL}
         </h1>
-        <p className='text-default-500 md:text-lg'>
-          {`Stop wondering where your money goes. Track Income & Expense.`}
-        </p>
+        <p className='text-default-500 md:text-lg'>{APP_DESCRIPTION}</p>
         <Divider className='my-4 w-full bg-divider md:w-1/2' />
         <div className='flex flex-col items-center space-y-3'>
           <p className='text-lg font-semibold md:text-lg'>

config/constants/main.ts

@@ -27,3 +27,6 @@ export const enum APP_NAME {
   FULL = 'Explend App',
   SHORT = 'Explend',
 }
+
+export const APP_DESCRIPTION: string =
+  'Stop wondering where your money goes. Track Income & Expense.'

next.config.mjs

@@ -1,4 +1,5 @@
 // @ts-check
+import withPWAInit from '@ducanh2912/next-pwa'
 import { withSentryConfig } from '@sentry/nextjs'
 
 /** @type {import('next').NextConfig} */
@@ -36,7 +37,12 @@ const nextConfig = {
   },
 }
 
-export default withSentryConfig(nextConfig, {
+const withPWA = withPWAInit({
+  dest: 'public',
+  disable: process.env.NODE_ENV === 'development',
+})
+
+const sentryConfig = {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options
 
@@ -69,4 +75,6 @@ export default withSentryConfig(nextConfig, {
   // https://docs.sentry.io/product/crons/
   // https://vercel.com/docs/cron-jobs
   // automaticVercelMonitors: true,
-})
+}
+
+export default withSentryConfig(withPWA(nextConfig), sentryConfig)

package.json

@@ -13,6 +13,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@ducanh2912/next-pwa": "^10.2.7",
     "@internationalized/date": "^3.5.4",
     "@nextui-org/react": "^2.4.2",
     "@sentry/nextjs": "^8.14.0",
@@ -51,6 +52,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.3",
+    "webpack": "^5.92.1"
   }
 }

public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Explend App",
+  "name": "Explend",
   "short_name": "Explend",
   "description": "Stop wondering where your money goes. Track Income & Expense.",
   "icons": [
@@ -9,11 +9,6 @@
       "type": "image/png",
       "purpose": "any maskable"
     },
-    {
-      "src": "/icons/android-chrome-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
     {
       "src": "/icons/icon-512x512.png",
       "sizes": "512x512",