-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
264 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
.notification-wrapper { | ||
position: fixed; | ||
z-index: 1000; | ||
top: 20px; | ||
right: 20px; | ||
background: var(--color-header-background); | ||
box-shadow: 0 0 10px var(--color-hover-shadow); | ||
border-radius: 5px; | ||
padding: 10px 20px; | ||
margin-left: 20px; | ||
opacity: 0; | ||
visibility: hidden; | ||
transition: .5s; | ||
color: var(--grey-7); | ||
|
||
&.show { | ||
opacity: 1; | ||
visibility: visible; | ||
} | ||
|
||
h1 { | ||
padding: 10px 0; | ||
} | ||
|
||
p { | ||
padding: 10px 0; | ||
} | ||
|
||
.notification-btn { | ||
display: flex; | ||
justify-content: flex-end; | ||
gap: 15px; | ||
padding: 10px 0; | ||
} | ||
|
||
button { | ||
background: #ff7777; | ||
border-radius: 5px; | ||
color: #fff; | ||
padding: 5px 10px; | ||
font-family: 'Noto Serif SC', 'Noto Serif JP', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; | ||
border: none; | ||
transition: .2s; | ||
|
||
&:hover { | ||
background: rgb(255, 77, 77); | ||
} | ||
|
||
&:active { | ||
background: #ff2e2e; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
if ("serviceWorker" in navigator && window.siteConfig.swPath) { | ||
_$("#notification-update-btn").onclick = () => { | ||
try { | ||
navigator.serviceWorker.getRegistration().then((reg) => { | ||
reg.waiting.postMessage("skipWaiting"); | ||
}); | ||
} catch (e) { | ||
window.location.reload(); | ||
} | ||
}; | ||
|
||
_$("#notification-close-btn").onclick = () => { | ||
_$(".notification-wrapper").classList.remove("show"); | ||
} | ||
|
||
function emitUpdate() { | ||
_$(".notification-wrapper").classList.add("show"); | ||
} | ||
|
||
navigator.serviceWorker | ||
.register(siteConfig.swPath) | ||
.then((registration) => { | ||
console.log("Service Worker 注册成功: ", registration); | ||
if (registration.waiting) { | ||
emitUpdate(); | ||
return; | ||
} | ||
registration.onupdatefound = () => { | ||
console.log("Service Worker 更新中..."); | ||
const installingWorker = registration.installing; | ||
installingWorker.onstatechange = () => { | ||
if (installingWorker.state === "installed") { | ||
if (navigator.serviceWorker.controller) { | ||
emitUpdate(); | ||
} | ||
} | ||
}; | ||
}; | ||
}) | ||
.catch((error) => { | ||
console.log("Service Worker 注册失败: ", error); | ||
}); | ||
|
||
let refreshing = false; | ||
navigator.serviceWorker.addEventListener("controllerchange", () => { | ||
if (refreshing) { | ||
return; | ||
} | ||
refreshing = true; | ||
window.location.reload(); | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
const VERSION = "{{ time.Now.Unix }}"; | ||
|
||
const preCache = [ | ||
'{{ "images/taichi.png" | relURL }}', | ||
'{{ "images/taichi-fill.png" | relURL }}', | ||
'{{ "css/loader.css" | relURL }}', | ||
'{{ "css/main.css" | relURL }}', | ||
'{{ "js/main.js" | relURL }}', | ||
'{{ .Site.Params.banner | relURL }}', | ||
]; | ||
|
||
const cacheDomain = [ | ||
"fonts.googleapis.com", | ||
"npm.webcache.cn", | ||
"unpkg.com", | ||
"fastly.jsdelivr.net", | ||
"cdn.jsdelivr.net", | ||
]; | ||
|
||
// 安装时预加载必要内容 | ||
self.addEventListener("install", (event: ExtendableEvent) => { | ||
console.log(`Service Worker ${VERSION} installing.`); | ||
event.waitUntil(caches.open(VERSION).then((cache) => cache.addAll(preCache))); | ||
}); | ||
|
||
async function cacheRequest(request, options?) { | ||
try { | ||
const responseToCache = await fetch(request); | ||
const cache = await caches.open(VERSION); | ||
if (!/^https?:$/i.test(new URL(request.url).protocol)) | ||
return responseToCache; | ||
cache.put(request, responseToCache.clone()); | ||
return responseToCache; | ||
} catch (e) { | ||
const responseToCache = await fetch(request, options); | ||
const cache = await caches.open(VERSION); | ||
if (!/^https?:$/i.test(new URL(request.url).protocol)) | ||
return responseToCache; | ||
cache.put(request, responseToCache.clone()); | ||
return responseToCache; | ||
} | ||
} | ||
|
||
async function respondRequest(request, options?) { | ||
const response = await caches.match(request); | ||
if (response) { | ||
return response; | ||
} | ||
return cacheRequest(request, options); | ||
} | ||
|
||
self.addEventListener("fetch", (event) => { | ||
const url = new URL(event.request.url); | ||
// 检查请求的域名是否在 CacheDomain 中 | ||
if (cacheDomain.includes(url.hostname)) { | ||
event.respondWith(respondRequest(event.request)); | ||
} else { | ||
// 检查请求是否为 POST 或带有查询参数的 GET 这样可避免错误缓存 | ||
if ( | ||
event.request.method === "POST" || | ||
(event.request.method === "GET" && url.search) | ||
) { | ||
try { | ||
event.respondWith(fetch(event.request)); | ||
} catch (e) { | ||
event.respondWith(fetch(event.request, { mode: "no-cors" })); | ||
} | ||
} else { | ||
event.respondWith(respondRequest(event.request, { mode: "no-cors" })); | ||
} | ||
} | ||
}); | ||
|
||
self.addEventListener("activate", (event) => { | ||
event.waitUntil( | ||
caches.keys().then((cacheNames) => { | ||
return Promise.all( | ||
cacheNames.map((cacheName) => { | ||
if (VERSION !== cacheName) { | ||
console.log(`Service Worker: deleting old cache ${cacheName}`); | ||
return caches.delete(cacheName); | ||
} | ||
}) | ||
); | ||
}) | ||
); | ||
console.log(`Service Worker ${VERSION} activated.`); | ||
}); | ||
|
||
self.addEventListener("message", (event) => { | ||
console.log("Service Worker: message received"); | ||
if (event.data === "skipWaiting") { | ||
(self as unknown as ServiceWorkerGlobalScope).skipWaiting(); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,30 @@ | ||
{{ $source := .source }} | ||
{{ $temp := .source }} | ||
{{ $pjax := .pjax }} | ||
{{ $target := .target }} | ||
{{ $inline := .inline | default true }} | ||
{{ $ctx := .ctx }} | ||
|
||
{{- with resources.Get $source }} | ||
{{- if eq hugo.Environment "development" }} | ||
{{- with . | js.Build }} | ||
{{ $ts := . | resources.ExecuteAsTemplate $temp $ctx }} | ||
{{- $opts := dict "targetPath" $target }} | ||
{{- with $ts | js.Build $opts }} | ||
{{ if $inline }} | ||
<script src="{{ .RelPermalink }}" {{ if $pjax }}data-pjax{{ end }}></script> | ||
{{ else }} | ||
<!-- {{ .RelPermalink }} --> | ||
{{ end }} | ||
{{- end }} | ||
{{- else }} | ||
{{- $opts := dict "minify" true }} | ||
{{- with . | js.Build $opts | fingerprint }} | ||
{{ $ts := . | resources.ExecuteAsTemplate $temp $ctx }} | ||
{{- $opts := dict "minify" true "targetPath" $target }} | ||
{{- with $ts | js.Build $opts }} | ||
{{ if $inline }} | ||
<script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous" {{ if $pjax }}data-pjax{{ end }}></script> | ||
{{ else }} | ||
<!-- {{ .RelPermalink }} --> | ||
{{ end }} | ||
{{- end }} | ||
{{- end }} | ||
{{- end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters