PWA Fix (#5432)

* PWA Fix

* SWが/api/へのリクエストに関与しないように

* fix semicolon

* Update base.pug

* Update base.pug

2 files changed, 47 insertions, 12 deletions

diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 583cc4fc8b..c244050a54 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -98,15 +98,10 @@
 
 	// If mobile, insert the viewport meta tag
 	if (isMobile) {
-		const meta = document.createElement('meta');
-		meta.setAttribute('name', 'viewport');
-		meta.setAttribute('content',
-			'width=device-width,' +
-			'initial-scale=1,' +
-			'minimum-scale=1,' +
-			'maximum-scale=1,' +
-			'user-scalable=no');
-		head.appendChild(meta);
+		const viewport = document.getElementsByName("viewport").item(0);
+		viewport.setAttribute('content',
+			`${viewport.getAttribute('content')},minimum-scale=1,maximum-scale=1,user-scalable=no`);
+		head.appendChild(viewport);
 	}
 
 	// Switch desktop or mobile version
diff --git a/src/client/app/sw.js b/src/client/app/sw.js
index 92f2ac8284..d080130e3d 100644
--- a/src/client/app/sw.js
+++ b/src/client/app/sw.js
@@ -4,13 +4,53 @@
 
 import composeNotification from './common/scripts/compose-notification';
 
+// eslint-disable-next-line no-undef
+const version = _VERSION_;
+const cacheName = `mk-cache-${version}`;
+
+const apiUrl = `${location.origin}/api/`;
+
 // インストールされたとき
 self.addEventListener('install', ev => {
 	console.info('installed');
 
-	ev.waitUntil(Promise.all([
-		self.skipWaiting(), // Force activate
-	]));
+  ev.waitUntil(
+		caches.open(cacheName)
+			.then(cache => {
+				return cache.addAll([
+					"/",
+					`/assets/desktop.${version}.js`,
+					`/assets/mobile.${version}.js`,
+					"/assets/error.jpg"
+				]);
+			})
+			.then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', ev => {
+	ev.waitUntil(
+		caches.keys()
+			.then(cacheNames => Promise.all(
+				cacheNames
+					.filter((v) => v !== cacheName)
+					.map(name => caches.delete(name))
+			))
+			.then(() => self.clients.claim())
+	);
+});
+
+self.addEventListener('fetch', ev => {
+	if (ev.request.method !== 'GET' || ev.request.url.startsWith(apiUrl)) return;
+	ev.respondWith(
+		caches.match(ev.request)
+			.then(response => {
+				return response || fetch(ev.request);
+			})
+			.catch(() => {
+				return caches.match("/");
+			})
+	);
 });
 
 // プッシュ通知を受け取ったとき