diff --git a/README.md b/README.md index ccf5352..6e35e30 100644 --- a/README.md +++ b/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= +``` diff --git a/next.config.js b/next.config.js index 6549067..b76cbb1 100644 --- a/next.config.js +++ b/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); diff --git a/public/icons/icons8-notepad-24.png b/public/icons/icons8-notepad-24.png deleted file mode 100644 index 9a481b5..0000000 Binary files a/public/icons/icons8-notepad-24.png and /dev/null differ diff --git a/public/icons/notepad-144.png b/public/icons/notepad-144.png new file mode 100644 index 0000000..b39b92f Binary files /dev/null and b/public/icons/notepad-144.png differ diff --git a/public/icons/notepad-168.png b/public/icons/notepad-168.png new file mode 100644 index 0000000..6608073 Binary files /dev/null and b/public/icons/notepad-168.png differ diff --git a/public/icons/notepad-192.png b/public/icons/notepad-192.png new file mode 100644 index 0000000..44a907f Binary files /dev/null and b/public/icons/notepad-192.png differ diff --git a/public/icons/icons8-notepad-48.png b/public/icons/notepad-48.png similarity index 100% rename from public/icons/icons8-notepad-48.png rename to public/icons/notepad-48.png diff --git a/public/icons/notepad-512.png b/public/icons/notepad-512.png new file mode 100644 index 0000000..a28414a Binary files /dev/null and b/public/icons/notepad-512.png differ diff --git a/public/icons/notepad-72.png b/public/icons/notepad-72.png new file mode 100644 index 0000000..fcf53e4 Binary files /dev/null and b/public/icons/notepad-72.png differ diff --git a/public/icons/icons8-notepad-96.png b/public/icons/notepad-96.png similarity index 100% rename from public/icons/icons8-notepad-96.png rename to public/icons/notepad-96.png diff --git a/public/manifest.json b/public/manifest.json index 9868fd3..93da30d 100644 --- a/public/manifest.json +++ b/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 diff --git a/screenshots/mobile-note.png b/screenshots/mobile-note.png new file mode 100644 index 0000000..7ce5925 Binary files /dev/null and b/screenshots/mobile-note.png differ diff --git a/screenshots/notepad-install-setp1.png b/screenshots/notepad-install-setp1.png new file mode 100644 index 0000000..6ac5e41 Binary files /dev/null and b/screenshots/notepad-install-setp1.png differ diff --git a/screenshots/notepad-install-setp2.png b/screenshots/notepad-install-setp2.png new file mode 100644 index 0000000..a0822de Binary files /dev/null and b/screenshots/notepad-install-setp2.png differ diff --git a/screenshots/notepad-pwa.png b/screenshots/notepad-pwa.png new file mode 100644 index 0000000..9c8f5a8 Binary files /dev/null and b/screenshots/notepad-pwa.png differ diff --git a/screenshots/web-note.png b/screenshots/web-note.png new file mode 100644 index 0000000..4934b54 Binary files /dev/null and b/screenshots/web-note.png differ diff --git a/src/app/layout.js b/src/app/layout.js index e7fa37e..f0b4103 100644 --- a/src/app/layout.js +++ b/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 ( + + + + + + + Next.js PWA Example + + + + + + {children} + ) } diff --git a/src/app/page.js b/src/app/page.js index a5dee31..1e519d7 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,4 +1,3 @@ -import styles from './page.module.css' import Notepad from "@/app/components/Notepad"; diff --git a/src/app/page.module.css b/src/app/page.module.css deleted file mode 100644 index cca6319..0000000 --- a/src/app/page.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} diff --git a/src/app/pages/Pwa.jsx b/src/app/pages/Pwa.jsx new file mode 100644 index 0000000..0fca565 --- /dev/null +++ b/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 ( + <> + ) +}