'ss''

config/index.js

@@ -1,3 +1,5 @@
+const { GenerateSW } = require("workbox-webpack-plugin");
+
 const config = {
   projectName: "cityh5",
 
@@ -44,6 +46,42 @@ const config = {
   },
   h5: {
     webpackChain(chain) {
+      if (
+        process.env.NODE_ENV === "production" &&
+        !chain.plugins.has("workbox")
+      ) {
+        chain.plugin("workbox").use(GenerateSW, [
+          {
+            clientsClaim: true,
+            skipWaiting: true,
+            maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 10MB
+            runtimeCaching: [
+              {
+                urlPattern: /.*\.(?:png|jpg|jpeg|svg|gif|ico)/,
+                handler: "CacheFirst",
+                options: {
+                  cacheName: "images-cache",
+                  expiration: {
+                    maxEntries: 50,
+                    maxAgeSeconds: 30 * 24 * 60 * 60,
+                  },
+                },
+              },
+              {
+                urlPattern: /.*\.(?:js|css)/,
+                handler: "StaleWhileRevalidate",
+                options: {
+                  cacheName: "static-resources",
+                  expiration: {
+                    maxEntries: 50,
+                    maxAgeSeconds: 7 * 24 * 60 * 60,
+                  },
+                },
+              },
+            ],
+          },
+        ]);
+      }
       chain.module
         .rule("markdown")
         .test(/\.md$/)

package.json

@@ -73,6 +73,7 @@
     "stylelint": "9.3.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.1.0",
-    "webpack": "^5.78.0"
+    "webpack": "^5.78.0",
+    "workbox-webpack-plugin": "^7.3.0"
   }
 }

public/manifest.json

@@ -0,0 +1,21 @@
+{
+    "name": "Youtube运营笔记",
+    "short_name": "YT笔记",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#ff0000",
+    "icons": [
+      {
+        "src": "/static/images/youtube-192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/static/images/youtube-512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
+  

src/index.html

@@ -16,6 +16,9 @@
     sizes="192x192"
     href="/static/images/images/youtube.ico"
   />
+  <!-- PWA设置 -->
+  <link rel="manifest" href="/manifest.json">
+
   <!-- <link rel="icon" type="image/x-icon" href="/static/images/youtube.ico"> -->
   <title>Youtube运营笔记</title>
   <meta name="description" content="Youtube运营笔记">

src/pages/book/index.tsx

@@ -16,6 +16,8 @@ import { AtForm, AtMessage } from "taro-ui";
 import { marked } from "marked";
 import infoText from "./info.md";
 import bookText from "./book.md";
+import youtubeIco from "../../images/youtube.ico";
+
 
 marked.setOptions({
   breaks: true, // 是否回车换行

src/pages/index/index.jsx

@@ -49,8 +49,6 @@ import ytGpt from "../../images/ytGpt.png";
 import demo from "../../images/demo.svg";
 import youtubeIco from "../../images/youtube.ico";
 
-
-
 // export default class Index extends Component {
 const Index = () => {
   const [current, setcurrent] = useState(0);
@@ -93,6 +91,19 @@ const Index = () => {
     }
   };
 
+
+  // pwa安装弹窗
+  // useEffect(() => {
+  //   window.addEventListener("beforeinstallprompt", (event) => {
+  //     event.preventDefault();
+  //     let installPrompt = event;
+  //     // 显示安装按钮
+  //     document.getElementById("install-btn").addEventListener("click", () => {
+  //       installPrompt.prompt();
+  //     });
+  //   });
+  // }, []);
+
   // 获取openid
   const getOpenid = () => {
     // let newparams = Taro.getCurrentInstance().router.params;