From b040ac6373b65d9c1836f1fe3e5a0d45b9ce8878 Mon Sep 17 00:00:00 2001 From: tamaina Date: Fri, 27 Sep 2019 05:12:56 +0900 Subject: [PATCH] PWA Fix (#5432) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * PWA Fix * SWが/api/へのリクエストに関与しないように * fix semicolon * Update base.pug * Update base.pug --- assets/icons/512.png | Bin 0 -> 10231 bytes assets/icons/icon.svg | 91 ++++++++++++++++++++++++++++++++++ src/client/app/boot.js | 13 ++--- src/client/app/sw.js | 46 +++++++++++++++-- src/server/web/views/base.pug | 2 + 5 files changed, 140 insertions(+), 12 deletions(-) create mode 100644 assets/icons/512.png create mode 100644 assets/icons/icon.svg diff --git a/assets/icons/512.png b/assets/icons/512.png new file mode 100644 index 0000000000000000000000000000000000000000..66abba2d0d39af63c816e1b9bb8a8f497fe01312 GIT binary patch literal 10231 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 literal 0 HcmV?d00001 diff --git a/assets/icons/icon.svg b/assets/icons/icon.svg new file mode 100644 index 0000000000..842a5a885f --- /dev/null +++ b/assets/icons/icon.svg @@ -0,0 +1,91 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + 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("/"); + }) + ); }); // プッシュ通知を受け取ったとき diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug index 16bea853e7..97c7a87e1b 100644 --- a/src/server/web/views/base.pug +++ b/src/server/web/views/base.pug @@ -12,7 +12,9 @@ html meta(name='referrer' content='origin') meta(name='theme-color' content='#105779') meta(property='og:site_name' content= instanceName || 'Misskey') + meta(name='viewport' content='width=device-width, initial-scale=1') link(rel='icon' href= icon || '/favicon.ico') + link(rel='apple-touch-icon' href= icon || '/apple-touch-icon.png') link(rel='manifest' href='/manifest.json') title