From 6125e26cfdce0655badfb5e408ebc52436818d3a Mon Sep 17 00:00:00 2001 From: Lokuyow <94349922+Lokuyow@users.noreply.github.com> Date: Tue, 28 Nov 2023 17:20:35 +0900 Subject: [PATCH] fix: checkForUpdates --- main.js | 67 +++++++++++++++++++++++++++--------------------------- styles.css | 15 +++++++----- sw.js | 65 +++++++++++++++++++++++++++++++--------------------- 3 files changed, 81 insertions(+), 66 deletions(-) diff --git a/main.js b/main.js index 5bc6c4c..ad814f3 100644 --- a/main.js +++ b/main.js @@ -677,17 +677,27 @@ function shareViaWebAPI(originalShareText, queryParams) { // サービスワーカー let newVersionAvailable = false; +// サービスワーカーからのメッセージリスナー navigator.serviceWorker.addEventListener('message', (event) => { - if (event.data && event.data.type === 'NEW_VERSION_ACTIVE') { - newVersionAvailable = true; + const updateButton = getDomElementById('checkForUpdateBtn'); + const buttonText = getDomElementById('buttonText'); + const spinnerWrapper = updateButton.querySelector('.spinner-wrapper'); - const updateUI = getDomElementById('buttonText'); - if (updateUI) { - updateUI.textContent = '更新があります'; + console.log('Message from Service Worker:', event.data); + + if (event.data && event.data.type === 'NEW_VERSION_INSTALLED') { + newVersionAvailable = true; + if (buttonText) { + buttonText.textContent = '更新があります'; } + spinnerWrapper.style.display = 'none'; + } else if (event.data && event.data.type === 'NO_UPDATE_FOUND') { + showNotification('最新です', lastClickEvent); + spinnerWrapper.style.display = 'none'; } }); + async function registerAndHandleServiceWorker() { if (!('serviceWorker' in navigator)) { console.warn("Service Worker is not supported in this browser."); @@ -705,6 +715,7 @@ async function registerAndHandleServiceWorker() { newVersionAvailable = true; const updateUI = getDomElementById('buttonText'); if (updateUI) { + console.log("Updating UI from Service Worker installation"); updateUI.textContent = '更新があります'; } } @@ -721,48 +732,36 @@ function delay(ms) { // サイト更新ボタン async function checkForUpdates(event) { + lastClickEvent = event; // クリックイベントを保存 const updateButton = getDomElementById('checkForUpdateBtn'); - const buttonText = getDomElementById('buttonText'); const spinnerWrapper = updateButton.querySelector('.spinner-wrapper'); + spinnerWrapper.style.display = 'block'; // スピナーを表示 - buttonText.style.display = 'none'; - spinnerWrapper.style.display = 'block'; + // 新しいバージョンが利用可能な場合、ページをリロード + if (newVersionAvailable) { + window.location.reload(); + return; // 以降の処理を実行させない + } try { - await delay(250); // 最低250ミリ秒の遅延を保持 + await delay(300); const registration = await navigator.serviceWorker.getRegistration(); if (!registration) throw new Error("No active service worker registration found"); - await registration.update(); - - if (registration && registration.waiting) { - registration.waiting.postMessage('skipWaiting'); - - navigator.serviceWorker.addEventListener('controllerchange', () => { - if (newVersionAvailable) { - buttonText.textContent = '更新があります'; // ここでUIを更新 - spinnerWrapper.style.display = 'none'; // スピナーを非表示にする - window.location.reload(); - } - }); - } else if (newVersionAvailable) { - buttonText.textContent = '更新があります'; // UI更新 - spinnerWrapper.style.display = 'none'; // スピナー非表示 - window.location.reload(); + // サービスワーカーの状態を確認 + if (registration.installing || registration.waiting) { + // サービスワーカーがインストール中または待機中であれば、更新状態をチェック + navigator.serviceWorker.controller.postMessage('CHECK_UPDATE_STATUS'); } else { - console.log('No update found.'); - showNotification('最新です', event); // 更新がない場合の通知 + // それ以外の場合は、更新を試みる + await registration.update(); + // 更新状態をチェック + navigator.serviceWorker.controller.postMessage('CHECK_UPDATE_STATUS'); } } catch (error) { console.error("An error occurred while checking for updates:", error); - buttonText.textContent = '更新エラー'; - spinnerWrapper.style.display = 'none'; // エラー時にスピナーを非表示 - } finally { - if (!newVersionAvailable) { - spinnerWrapper.style.display = 'none'; // 更新がない場合にスピナーを非表示 - } - buttonText.style.display = ''; + spinnerWrapper.style.display = 'none'; } } diff --git a/styles.css b/styles.css index 5b1ae3b..ff03c28 100644 --- a/styles.css +++ b/styles.css @@ -318,11 +318,11 @@ button>* { .grid-settings { display: grid; - grid-template-columns: 120px minmax(auto, 330px); + grid-template-columns: 120px minmax(200px, 330px); grid-template-rows: auto auto auto; justify-content: center; align-items: center; - gap: 6px 26px; + gap: 6px 18px; margin: 0 26px; } @@ -338,7 +338,9 @@ button>* { border: 0; cursor: pointer; border-radius: 6px; - padding: 8px 10px; + height: 42px; + line-height: 42px; + padding: 0; } #checkForUpdateBtn { @@ -350,7 +352,8 @@ button>* { border: 0; cursor: pointer; min-width: 160px; - min-height: 42px; + height: 42px; + line-height: 42px; border-radius: 6px; padding: 0; } @@ -368,9 +371,9 @@ button>* { .spinner-wrapper { display: none; position: absolute; + right: 10px; top: 50%; - left: 50%; - transform: translate(-50%, -50%); + transform: translateY(-50%); } .spinner { diff --git a/sw.js b/sw.js index 99a25d2..3693c80 100644 --- a/sw.js +++ b/sw.js @@ -31,22 +31,29 @@ const urlsToCache = [ './images/angle-down-solid.svg' ]; -const VERSION = '1.40.2'; +const VERSION = '1.40.3'; let CACHE_NAME = 'sats-rate-caches-' + VERSION; const MY_CACHES = new Set([CACHE_NAME]); -self.addEventListener('install', (ev) => ev.waitUntil((async () => { - const cache = await caches.open(CACHE_NAME); - await cache.addAll(urlsToCache); +self.addEventListener('install', (event) => { + event.waitUntil((async () => { + const cache = await caches.open(CACHE_NAME); + await cache.addAll(urlsToCache); - const keys = await caches.keys(); - await Promise.all( - keys - .filter(key => !MY_CACHES.has(key)) - .map(key => caches.delete(key)) - ); - return self.skipWaiting(); -})())); + // 新しいバージョンがインストールされたことをクライアントに通知 + self.clients.matchAll({ includeUncontrolled: true, type: 'window' }).then((clients) => { + clients.forEach(client => client.postMessage({ type: 'NEW_VERSION_INSTALLED' })); + }); + + const keys = await caches.keys(); + await Promise.all( + keys + .filter(key => !MY_CACHES.has(key)) + .map(key => caches.delete(key)) + ); + return self.skipWaiting(); + })()); +}); self.addEventListener('fetch', (ev) => void ev.respondWith((async () => { const url = new URL(ev.request.url); @@ -67,22 +74,28 @@ self.addEventListener('fetch', (ev) => void ev.respondWith((async () => { return cacheResponse || fetch(requestToFetch); })())); -self.addEventListener('activate', (event) => { - event.waitUntil((async () => { - const clientsList = await self.clients.matchAll({ includeUncontrolled: true, type: 'window' }); - for (const client of clientsList) { - client.postMessage({ type: 'NEW_VERSION_ACTIVE' }); - } - - return self.clients.claim(); - })()); - }); - self.addEventListener('message', (event) => { - if (event.data.action === 'getVersion') { - event.ports[0].postMessage({ version: VERSION }); - } if (event.data === 'skipWaiting') { self.skipWaiting(); } + if (event.data === 'CHECK_UPDATE_STATUS') { + if (self.registration.waiting) { + // 新しいバージョンがインストールされ、待機中であれば NEW_VERSION_INSTALLED を送信 + event.source.postMessage({ type: 'NEW_VERSION_INSTALLED' }); + } else if (self.registration.installing) { + // 新しいバージョンが現在インストール中であれば、インストールの完了を待機 + const worker = self.registration.installing; + worker.addEventListener('statechange', () => { + if (worker.state === 'installed') { + event.source.postMessage({ type: 'NEW_VERSION_INSTALLED' }); + } + }); + } else { + // 更新がない場合、あるいはまだ新しいバージョンが準備されていない場合は NO_UPDATE_FOUND を送信 + event.source.postMessage({ type: 'NO_UPDATE_FOUND' }); + } + } + if (event.data.action === 'getVersion') { + event.ports[0].postMessage({ version: VERSION }); + } }); \ No newline at end of file