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

- 更新HTML文件中的PWA相关meta标签和图标路径
- 调整Service Worker缓存资源路径为相对路径
- 增强Service Worker fetch事件处理逻辑
- 升级缓存版本号以确保更新生效
- 优化Google Analytics脚本加载方式
- 整理HTML文件结构,提升可读性
This commit is contained in:
hehh
2025-11-25 18:36:52 +08:00
parent f1d4207e35
commit af27d9575b
3 changed files with 93 additions and 79 deletions

View File

@@ -450,10 +450,10 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <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-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Honesty"> <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支持 --> <!-- 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-TileColor" content="#6c5ce7">
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">

View File

@@ -22,7 +22,8 @@
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://www.hehouhui.cn/"> <meta property="og:url" content="https://www.hehouhui.cn/">
<meta property="og:title" content="Honesty的主页 - Java后端 & AI工程师"> <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:image" content="images/avatar.jpeg">
<meta property="og:site_name" content="Honesty的主页"> <meta property="og:site_name" content="Honesty的主页">
@@ -30,14 +31,16 @@
<meta property="twitter:card" content="summary_large_image"> <meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.hehouhui.cn/"> <meta property="twitter:url" content="https://www.hehouhui.cn/">
<meta property="twitter:title" content="Honesty的主页 - Java后端 & AI工程师"> <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:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
<meta property="twitter:site" content="@Honesty861024"> <meta property="twitter:site" content="@Honesty861024">
<!-- 微信小程序/朋友圈分享 --> <!-- 微信小程序/朋友圈分享 -->
<meta property="wechat:image" content="https://www.hehouhui.cn/images/avatar.jpeg"> <meta property="wechat:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
<meta property="wechat:title" content="Honesty的主页 - Java后端 & AI工程师"> <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> <title>Honesty的主页</title>
<link rel="stylesheet" type="text/css" href="./css/style.css?version=3"> <link rel="stylesheet" type="text/css" href="./css/style.css?version=3">
@@ -58,7 +61,6 @@
media="all"> media="all">
<!--IE淘汰计划--> <!--IE淘汰计划-->
<script> <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); 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> </head>
<body oncontextmenu=self.event.returnValue=false onselectstart="return false"> <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"> <header id="panel" class="panel-cover">
<!--星空背景-->
<!-- <canvas id="bg"></canvas>-->
<!--天气-->
<!-- <div id="he-plugin-simple"></div> -->
<script> <script>
WIDGET = { WIDGET = {
"CONFIG": { "CONFIG": {
@@ -376,64 +373,77 @@
</script> </script>
<!-- Google Analytics --> <!-- Google Analytics -->
<script> <script type="text/javascript">
// 定义 gtag 函数作为安全兜底 // 定义 gtag 函数作为安全兜底
<script type="text/javascript">
try { try {
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { function gtag() {
dataLayer.push(arguments); dataLayer.push(arguments);
} }
gtag('js', new Date()); gtag('js', new Date());
} catch (e) { } catch (e) {
console.log("Google Analytics Init 错误", e); console.log("Google Analytics Init 错误", e);
} }
</script> </script>
<!-- 再异步加载 Google 的 gtag.js --> <!-- 再异步加载 Google 的 gtag.js -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
<!-- 可选:继续调用 config --> <!-- 可选:继续调用 config -->
<script type="text/javascript"> <script type="text/javascript">
try { try {
gtag('config', 'G-DYWDEVKDP0'); gtag('config', 'G-DYWDEVKDP0');
} catch (e) { } catch (e) {
console.error("Google Analytics config 失败", e); console.error("Google Analytics config 失败", e);
} }
</script> </script>
<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) {
</script> "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注册 --> <!-- PWA注册 -->
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', function() { window.addEventListener('load', function () {
navigator.serviceWorker.register('./js/sw.js') navigator.serviceWorker.register('./js/sw.js')
.then(function(registration) { .then(function (registration) {
console.log('SW registered: ', registration); console.log('SW registered: ', registration);
}) })
.catch(function(registrationError) { .catch(function (registrationError) {
console.log('SW registration failed: ', registrationError); console.log('SW registration failed: ', registrationError);
}); });
}); });
} }
</script> </script>
<!-- Apple PWA支持 --> <!-- Apple PWA支持 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <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-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Honesty"> <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="/apple-touch-icon.png">
<!-- Windows PWA支持 --> <!-- 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-TileColor" content="#6c5ce7">
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">
<!-- 其他PWA相关meta标签 --> <!-- 其他PWA相关meta标签 -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
</body> </body>
</html> </html>

View File

@@ -1,15 +1,14 @@
// Service Worker for PWA // Service Worker for PWA
const CACHE_NAME = 'honesty-home-v1.0.0'; const CACHE_NAME = 'honesty-home-v1.0.1';
const urlsToCache = [ const urlsToCache = [
'/', './index.html',
'/index.html', './about.html',
'/about.html', './css/style.css',
'/css/style.css', './css/about.css',
'/css/about.css', './css/artalk.css',
'/css/artalk.css', './js/config.js',
'/js/config.js', './js/main.js',
'/js/main.js', './js/about.js'
'/js/about.js'
]; ];
// 安装事件 - 缓存资源 // 安装事件 - 缓存资源
@@ -25,6 +24,11 @@ self.addEventListener('install', event => {
// 获取事件 - 拦截网络请求 // 获取事件 - 拦截网络请求
self.addEventListener('fetch', event => { self.addEventListener('fetch', event => {
// 对于非GET请求或者不是同源请求直接跳过
if (event.request.method !== 'GET' || !event.request.url.startsWith(self.location.origin)) {
return;
}
event.respondWith( event.respondWith(
caches.match(event.request) caches.match(event.request)
.then(response => { .then(response => {