研究了一部分

index.html

@@ -16,12 +16,29 @@
 			location.href = "multi.html" + location.search; //跳到多人模式
 	}
 
-	var browser_i18n = (navigator.language||navigator.userLanguage); //获取浏览器语言
-	var hasLanguage = languageList.filter(function(l){ //筛选出符合的语言
-		return browser_i18n.indexOf(l.i18n)>=0;
-	});
-	language = hasLanguage.length?hasLanguage[hasLanguage.length-1]:languageList[0]; //没有找到指定语言的情况下，自动用默认的语言
-	document.head.querySelector("#language-css").href = "languages/"+language.i18n+".css";
+	let browser_i18n = (navigator.language||navigator.userLanguage); //获取浏览器语言
+	let currentLanguage = languageList.find(lang => { //筛选出符合的语言
+			if (lang.i18n_RegExp)
+			{
+				return lang.i18n_RegExp.test(browser_i18n); //匹配正则表达式
+			}else
+			{
+				return browser_i18n.includes(lang.i18n); //文字上的搜索包含
+			}
+		}) || languageList[0]; //没有找到指定语言的情况下，自动用第一个语言（英语）
+
+	document.head.querySelector("#language-css").href = "languages/"+currentLanguage.i18n+".css";
+
+	if ('serviceWorker' in navigator) {
+		navigator.serviceWorker.register('service-worker.js', {scope: './'})
+		.then(function(registration) {
+			console.log('service worker 注册成功',registration);
+		}).catch(function(error) {
+			console.error('servcie worker 注册失败',error);
+		});
+	} else {
+		console.error('浏览器不支持 servcie worker');
+	}
 </script>
 <style type="text/css">
 .title,.control-box{

script.js

@@ -28,6 +28,17 @@ if (location.search.includes('&')) {
 	location.search = location.search.replace(/&/ig, '&');
 }
 
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker.register('service-worker.js', {scope: './'})
+	.then(function(registration) {
+		console.log('service worker 注册成功',registration);
+	}).catch(function(error) {
+		console.error('servcie worker 注册失败',error);
+	});
+} else {
+	console.error('浏览器不支持 servcie worker');
+}
+
 //一开始就加载当前语言
 if (currentLanguage == undefined)
 {
@@ -1138,7 +1149,7 @@ function loadData(force = false)
 				checkFormationBox();
 				function checkFormationBox()
 				{
-					if (formationBox.querySelector('.teams'))
+					if (formationBox?.querySelector('.teams'))
 					{
 						reloadFormationData();
 						clearInterval(formationBoxHook);

service-worker.js

@@ -0,0 +1,67 @@
+const CACHES = new Map([
+	['font', 'font-cache-v1'],
+	['cards_ja', 'card_ja-cache-v1'],
+	['cards_en', 'card_en-cache-v1'],
+	['cards_ko', 'card_ko-cache-v1'],
+	['voice_ja', 'voice_ja-cache-v1'],
+	['voice_en', 'voice_en-cache-v1'],
+	['voice_ko', 'voice_ko-cache-v1'],
+]);
+
+self.addEventListener('install', function(event) {
+	console.debug("安装中", ENV);
+    self.skipWaiting();
+	event.waitUntil(
+		cache.open(CACHES.get("font")).then(function(cache) {
+			return cache.addAll([
+				'/PADDashFormation/fonts/fa-solid-900.woff2',
+				'/PADDashFormation/fonts/FOT-KurokaneStd-EB.woff2',
+				'/PADDashFormation/fonts/zpix.woff2',
+			]);
+		})
+	);
+});
+
+self.addEventListener('activate', function(event) {
+// You're good to go!
+	var cacheNames = new Set(CACHES.values());
+	event.waitUntil(
+		caches.keys().then(function(keyList) { //所有的现存的缓存列表
+			return Promise.all(keyList.map(function(key) {
+				console.debug("删除缓存", key);
+				if (!cacheNames.has(key)) { //如果不在当前的缓存列表里就删除
+					return caches.delete(key);
+				}
+			}));
+		})
+	);
+});
+
+self.addEventListener('fetch', function(event) {
+	event.respondWith(
+		caches.match(event.request).then(function(resp) {
+			if (resp) console.debug("找到缓存", event.request.url);
+			return resp || fetch(event.request).then(async function(response) {
+				//console.debug("正则测试",/images\/cards\w+\/CARDS_\d+\.PNG/i.test(event.request.url));
+				if (event.request.url.includes(".woff2")) { //缓存字体
+					console.debug("缓存字体", event.request.url);
+					const cache = await caches.open(CACHES.get("font"));
+					cache.put(event.request, response.clone());
+				} else if (/images\/cards_\w+\/CARDS_\d+\.PNG/i.test(event.request.url)) { //缓存卡片图
+					let regRes = /cards_(ja|en|ko)/i.exec(event.request.url);
+					let langCode = regRes[1];
+					console.debug("缓存Cards-" + langCode, event.request.url);
+					const cache = await caches.open(CACHES.get("cards_" + langCode));
+					cache.put(event.request, response.clone());
+				} else if (/sound\/voice\/\w+\/padv\d+.wav/i.test(event.request.url)) { //缓存音效
+					let regRes = /\/(ja|en|ko)\//i.exec(event.request.url);
+					let langCode = regRes[1];
+					console.debug("缓存Voice-" + langCode, event.request.url);
+					const cache = await caches.open(CACHES.get("voice_" + langCode));
+					cache.put(event.request, response.clone());
+				}
+				return response;
+			});
+		})
+	);
+});

style.css

@@ -1,38 +1,30 @@
 @charset "utf-8";
 @font-face {
 	font-family: 'FOT-KurokaneStd-EB';
-	font-style: normal;
-	/*font-weight: 400;*/
 	src:
-		url("fonts/FOT-KurokaneStd-EB.woff2") format('woff2'),
-		url("fonts/FOT-KurokaneStd-EB.woff") format('woff'),
-		url("fonts/FOT-KurokaneStd-EB.ttf") format('truetype'),
-		url("fonts/FOT-KurokaneStd-EB.eot") format('embedded-opentype'),
-		url("fonts/FOT-KurokaneStd-EB.svg") format('svg');
+		local("FOT-Kurokane Std EB"),
+		local("KurokaneStd-EB"),
+		local("FOT-くろかね Std"),
+		url("./fonts/FOT-KurokaneStd-EB.woff2") format('woff2');
+	font-style: normal;
+	font-weight: normal;
 }
 @font-face {
 	font-family: 'zpix';
 	src:
-		url("fonts/zpix.woff2") format('woff2'),
-		url("fonts/zpix.woff") format('woff'),
-		url("fonts/zpix.ttf") format('truetype'),
-		url("fonts/zpix.eot?#font-spider") format('embedded-opentype'),
-		url("fonts/zpix.svg") format('svg');
+		local("Zpix"),
+		url("./fonts/zpix.woff2") format('woff2');
 	font-weight: normal;
 	font-style: normal;
 }
 @font-face {
 	font-family: 'Font Awesome 5 Free';
+	src:
+		local("FontAwesome"),
+		url("fonts/fa-solid-900.woff2") format("woff2");
 	font-style: normal;
 	font-weight: 900;
 	font-display: block;
-	src: url("fonts/fa-solid-900.eot");
-	src:
-		url("fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
-		url("fonts/fa-solid-900.woff2") format("woff2"),
-		url("fonts/fa-solid-900.woff") format("woff"),
-		url("fonts/fa-solid-900.ttf") format("truetype"),
-		url("fonts/fa-solid-900.svg#fontawesome") format("svg");
 }
 @keyframes rotate-animate{
 	from {