squash! add notepad app

README.md

@@ -1,38 +1,51 @@
-这是一个记事本应用，支持离线模式和云端同步模式
+这是一个记事本PWA应用，支持离线模式和云端同步模式。
 
-## Getting Started
+## 特性
+* 离线可用
+* 云端同步
+* 笔记下载
+* 可配置自动同步
 
-First, run the development server:
+## 技术栈
+* 前端
+  * NextJS
+  * MUI
+* 后端
+  * Vercel serverless function (NodeJS)
+  * MongoDB
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## 安装应用
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+打开网址[https://notepad-nine.vercel.app/](https://notepad-nine.vercel.app/)，右上角会出现一个安装提示，点击它安装。
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+![](./screenshots/notepad-install-setp1.png)
+安装后会自动打开，可以在`chrome://apps`查看。
+![](./screenshots/notepad-install-setp2.png)
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+![](./screenshots/notepad-pwa.png)
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-## Learn More
+## 截图
+Web
+![](./screenshots/web-note.png)
 
-To learn more about Next.js, take a look at the following resources:
+移动端
+![](./screenshots/mobile-note.png)
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
+## 开发
+后端连接mangodb依赖`MONGODB_URL`变量，本地开发需要配置.env文件
+```.dotenv
+MONGODB_URI=mongodb+srv://[username]:[password]@[cluster-host]/?retryWrites=true&w=majority
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+运行开发环境
+```bash
+$ npm i
+$ npm run dev
+```
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+## 部署到vercel
+```
+$ vercel vercel -e NODE_ENV=production -e MANGODB_URL=
+```

next.config.js

@@ -1,12 +1,28 @@
-/** @type {import('next').NextConfig} */
+const isDev = process.env.NODE_ENV !== "production";
+
+
 const withPWA = require('next-pwa')({
   dest: 'public',
+  exclude: [
+    // add buildExcludes here
+    ({ asset, compilation }) => {
+      if (
+        asset.name.startsWith("server/") ||
+        asset.name.match(/^((app-|^)build-manifest\.json|react-loadable-manifest\.json)$/)
+      ) {
+        return true;
+      }
+
+      return isDev && !asset.name.startsWith("static/runtime/");
+    }
+  ],
 });
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
     appDir: true,
   },
 }
 
-module.exports = process.env.NODE_ENV === 'production' ? withPWA(nextConfig) : nextConfig;
+module.exports = isDev ? nextConfig : withPWA(nextConfig);

public/manifest.json

@@ -1,52 +1,43 @@
 {
   "name": "Notepad Progressive Web App",
   "short_name": "Notepad PWA",
-  "theme_color": "#ffffff",
-  "background_color": "#004740",
+  "theme_color": "#92869f",
+  "background_color": "#ffffff",
   "display": "fullscreen",
   "orientation": "portrait",
   "scope": "/",
   "start_url": "/",
   "icons": [
     {
-      "src": "icons/icons8-notepad-48.png",
-      "sizes": "72x72",
+      "src": "icons/notepad-48.png",
+      "sizes": "48x48",
       "type": "image/png"
     },
     {
-      "src": "icons/icons8-notepad-96.png",
+      "src": "icons/notepad-96.png",
       "sizes": "96x96",
       "type": "image/png"
     },
     {
-      "src": "icons/icons8-notepad-96.png",
-      "sizes": "128x128",
-      "type": "image/png"
-    },
-    {
-      "src": "icons/icons8-notepad-96.png",
+      "src": "icons/notepad-144.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "icons/icons8-notepad-96.png",
-      "sizes": "152x152",
+      "src": "icons/notepad-168.png",
+      "sizes": "168x168",
       "type": "image/png"
     },
     {
-      "src": "icons/icons8-notepad-96.png",
+      "src": "icons/notepad-192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "icons/icons8-notepad-96.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "icons/icons8-notepad-96.png",
+      "src": "icons/notepad-512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "splash_pages": null

src/app/layout.js

@@ -1,4 +1,5 @@
 import './globals.css'
+import Pwa from "@/app/pages/Pwa";
 
 export const metadata = {
   title: 'Notepad',
@@ -8,7 +9,34 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
+        />
+        <meta name="description" content="Description" />
+        <meta name="keywords" content="Keywords" />
+        <title>Next.js PWA Example</title>
+
+        <link rel="manifest" href="/manifest.json" />
+        <link
+          href="/icons/favicon-16x16.png"
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+        />
+        <link
+          href="/icons/favicon-32x32.png"
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+        />
+        <link rel="apple-touch-icon" href="/apple-icon.png"></link>
+      </head>
       <body>{children}</body>
+      <Pwa />
     </html>
   )
 }

src/app/page.js

@@ -1,4 +1,3 @@
-import styles from './page.module.css'
 import Notepad from "@/app/components/Notepad";
 
 

src/app/pages/Pwa.jsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { useEffect } from "react";
+
+export default function Pwa() {
+  let sw;
+  if (typeof window !== "undefined") {
+    sw = window?.navigator?.serviceWorker;
+  }
+
+  useEffect(() => {
+    if (sw) {
+      sw.register("/sw.js", { scope: "/" }).then((registration) => {
+        console.log("Service Worker registration successful with scope: ", registration.scope);
+      }).catch((err) => {
+        console.log("Service Worker registration failed: ", err);
+      });
+    }
+  }, [sw]);
+
+  return (
+    <></>
+  )
+}