FireFox で service worker から見たブラウザの URL が正しくならない現象
10026 ワード
現象
webpush を実装して FireFox で動作確認をしていたところ、以下の現象に遭遇した。
- ページにアクセスする
- pushState で URL を変更する
- webpush を受信して client.url を見ると 1 の URL が参照される
Chrome では 2 の URL になってくれるのに。。。
今実装しているプロダクトでは以下の要件があるので URL を見て判定をしないといけないので困った。
- 通知された URL をアクティブなページで表示していた場合は通知を表示しない
- 通知をクリックした時に通知された URL が非アクティブなタブで開いていた場合は、それをアクティブにし、そうでない場合はタブを開く
環境
Mac 10.15 (Catalina)
FireFox 75.0
解決方法
client.url を見るのはやめた。
postMessage で URL を取得する方針に変更。
service worker からアプリに URL リクエストを postMessage して、
アプリ側ではそれを受けて location.href を postMessage で返信する。
実装は雰囲気こんな感じ。
sw.js
let resolveUrl = null;
const fetchUrl = client => {
return Promise.race([
new Promise(function (resolve) {
resolveUrl = resolve;
client.postMessage({ type: 'sw:requestUrl' });
}),
new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, 5000);
})
]);
}
self.addEventListener('push', event => {
if (!self.Notification || self.Notification.permission !== 'granted') {
return;
}
const url = event.data.json().url;
const notify = async () => {
const clientList = await self.clients.matchAll({
type: 'window'
});
for (let i = 0; i < clientList.length; i++) {
const client = clientList[i]
const clientUrl = await fetchUrl(client);
if (
client.visibilityState === 'visible'
&& clientUrl === url
) {
return;
}
}
self.registration.showNotification('通知', {});
};
event.waitUntil(notify());
});
self.onmessage = function(e) {
if (e.data.type !== 'url') return;
resolveUrl && resolveUrl(e.data.url);
};
アプリ側
const listener = (e: MessageEvent) => {
if (e.origin !== location.origin || typeof e.data !== 'object') return;
switch (e.data.type) {
case 'sw:requestUrl':
navigator.serviceWorker.controller?.postMessage({
type: 'url',
url: `${location.href}`
});
return;
default:
return;
}
};
navigator.serviceWorker.addEventListener('message', listener);
これでなんとか解決。
Author And Source
この問題について(FireFox で service worker から見たブラウザの URL が正しくならない現象), 我々は、より多くの情報をここで見つけました https://qiita.com/shate/items/26711740a46e4a7c33dc著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .