feat(pwa): 优化PWA配置和缓存策略

- 更新HTML文件中的PWA相关meta标签和图标路径 - 调整Service Worker缓存资源路径为相对路径 - 增强Service Worker fetch事件处理逻辑 - 升级缓存版本号以确保更新生效 - 优化Google Analytics脚本加载方式 - 整理HTML文件结构，提升可读性
2025-11-25 18:36:52 +08:00
parent f1d4207e35
commit af27d9575b
3 changed files with 93 additions and 79 deletions
--- a/about.html
+++ b/about.html
@@ -450,10 +450,10 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="apple-mobile-web-app-title" content="Honesty">
-<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<link rel="apple-touch-icon" href="./images/avatar.jpeg">

 <!-- Windows PWA支持 -->
-<meta name="msapplication-TileImage" content="/images/avatar.jpeg">
+<meta name="msapplication-TileImage" content="./images/avatar.jpeg">
 <meta name="msapplication-TileColor" content="#6c5ce7">
 <meta name="msapplication-tap-highlight" content="no">

--- a/index.html
+++ b/index.html
@@ -22,7 +22,8 @@
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.hehouhui.cn/">
    <meta property="og:title" content="Honesty的主页 - Java后端 & AI工程师">
-    <meta property="og:description" content="我是Honesty，一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
+    <meta property="og:description"
+          content="我是Honesty，一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
    <meta property="og:image" content="images/avatar.jpeg">
    <meta property="og:site_name" content="Honesty的主页">

@@ -30,14 +31,16 @@
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://www.hehouhui.cn/">
    <meta property="twitter:title" content="Honesty的主页 - Java后端 & AI工程师">
-    <meta property="twitter:description" content="我是Honesty，一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
+    <meta property="twitter:description"
+          content="我是Honesty，一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
    <meta property="twitter:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
    <meta property="twitter:site" content="@Honesty861024">

    <!-- 微信小程序/朋友圈分享 -->
    <meta property="wechat:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
    <meta property="wechat:title" content="Honesty的主页 - Java后端 & AI工程师">
-    <meta property="wechat:description" content="我是Honesty，一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。">
+    <meta property="wechat:description"
+          content="我是Honesty，一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。">

    <title>Honesty的主页</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css?version=3">
@@ -58,7 +61,6 @@
          media="all">


-
    <!--IE淘汰计划-->
    <script>
        if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href = "https://imsyy.top/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);
@@ -66,12 +68,7 @@
 </head>

 <body oncontextmenu=self.event.returnValue=false onselectstart="return false">
-<!-- style="background: url(https://blog-file.hehouhui.cn/bj/1.jpg) center center / cover no-repeat rgb(102, 102, 102);" -->
 <header id="panel" class="panel-cover">
-    <!--星空背景-->
-    <!--    <canvas id="bg"></canvas>-->
-    <!--天气-->
-    <!-- <div id="he-plugin-simple"></div> -->
    <script>
        WIDGET = {
            "CONFIG": {
@@ -376,14 +373,15 @@
 </script>

 <!-- Google Analytics -->
-<script>
-    // 定义 gtag 函数作为安全兜底
 <script type="text/javascript">
+    // 定义 gtag 函数作为安全兜底
    try {
        window.dataLayer = window.dataLayer || [];
+
        function gtag() {
            dataLayer.push(arguments);
        }
+
        gtag('js', new Date());
    } catch (e) {
        console.log("Google Analytics Init 错误", e);
@@ -404,7 +402,19 @@
 </script>

 <script>
-        !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"3OBGjwDdEIRS7XZ1",ck:"3OBGjwDdEIRS7XZ1"});
+    !function (p) {
+        "use strict";
+        !function (t) {
+            var s = window, e = document, i = p,
+                c = "".concat("https:" === e.location.protocol ? "https://" : "http://", "sdk.51.la/js-sdk-pro.min.js"),
+                n = e.createElement("script"), r = e.getElementsByTagName("script")[0];
+            n.type = "text/javascript", n.setAttribute("charset", "UTF-8"), n.async = !0, n.src = c, n.id = "LA_COLLECT", i.d = n;
+            var o = function () {
+                s.LA.ids.push(i)
+            };
+            s.LA ? s.LA.ids && o() : (s.LA = p, s.LA.ids = [], o()), r.parentNode.insertBefore(n, r)
+        }()
+    }({id: "3OBGjwDdEIRS7XZ1", ck: "3OBGjwDdEIRS7XZ1"});
 </script>

 <!-- PWA注册 -->
--- a/js/sw.js
+++ b/js/sw.js
@@ -1,15 +1,14 @@
 // Service Worker for PWA
-const CACHE_NAME = 'honesty-home-v1.0.0';
+const CACHE_NAME = 'honesty-home-v1.0.1';
 const urlsToCache = [
-  '/',
-  '/index.html',
-  '/about.html',
-  '/css/style.css',
-  '/css/about.css',
-  '/css/artalk.css',
-  '/js/config.js',
-  '/js/main.js',
-  '/js/about.js'
+  './index.html',
+  './about.html',
+  './css/style.css',
+  './css/about.css',
+  './css/artalk.css',
+  './js/config.js',
+  './js/main.js',
+  './js/about.js'
 ];

 // 安装事件 - 缓存资源
@@ -25,6 +24,11 @@ self.addEventListener('install', event => {

 // 获取事件 - 拦截网络请求
 self.addEventListener('fetch', event => {
+  // 对于非GET请求或者不是同源请求，直接跳过
+  if (event.request.method !== 'GET' || !event.request.url.startsWith(self.location.origin)) {
+    return;
+  }
+
  event.respondWith(
    caches.match(event.request)
      .then(response => {