私はGoogleを初めて使用するChromeプッシュ通知で、stackoverflowでここにいくつかの質問と回答を読んでいましたが、この簡単なプッシュ通知のJavaScriptで終わりました。
navigator.serviceWorker.register('sw.js');
function notify() {
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('test notification', {
body: 'Hey I am test!',
icon: 'image.png',
});
});
}
});
}
通知は単純ですが、通知をクリックした後、別のWebページで新しいウィンドウを開く必要があります。
私はそれが可能であることを知っていますが、「serviceWorker」構文を使用した例を見つけることができません。
助けてください。ありがとう。
あなたがService Workerコンテキストにいると思います。プッシュ通知が受信される場所だからです。したがって、イベントリスナーを追加するself
オブジェクトがあり、通知のクリックに反応します。
self.addEventListener('notificationclick', function(event) {
let url = 'https://example.com/some-path/';
event.notification.close(); // Android needs explicit close.
event.waitUntil(
clients.matchAll({type: 'window'}).then( windowClients => {
// Check if there is already a window/tab open with the target URL
for (var i = 0; i < windowClients.length; i++) {
var client = windowClients[i];
// If so, just focus it.
if (client.url === url && 'focus' in client) {
return client.focus();
}
}
// If not, then open the target URL in a new window/tab.
if (clients.openWindow) {
return clients.openWindow(url);
}
})
);
});
FCMプッシュ通知またはその他のWebプッシュ通知から受信した動的URLを使用してWebサイトを開く場合は、
以下IS FCMプッシュ通知に使用されるサービスワーカーの例
messaging.setBackgroundMessageHandler(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
var notificationTitle = payload.data.title; //or payload.notification or whatever your payload is
var notificationOptions = {
body: payload.data.body,
icon: payload.data.icon,
data: { url:payload.data.click_action }, //the url which we gonna use later
actions: [{action: "open_url", title: "Read Now"}]
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
以下のコードでクリックイベントを処理します
self.addEventListener('notificationclick', function(event) {
switch(event.action){
case 'open_url':
clients.openWindow(event.notification.data.url); //which we got from above
break;
case 'any_other_action':
clients.openWindow("https://www.example.com");
break;
}
}
, false);
それが役に立てば幸い!
私も解決策を探していましたが、答えは非常に簡単でしたが、明確に言っている文書はありませんでした。 "click_action" = "your url"を通知JSON内に配置する必要があります。次に例を示します。
notification: {
title: "Come",
icon: '../../../../assets/logo.png',
vibrate: [300,100,400,100,400,100,400],
body: "some text",
click_action : "your link"
}
それが役に立てば幸い。
こちらが2つのサイトです。
最初に通知をクリック可能にする必要があります。次に、開きたいURLを添付できます
https://groups.google.com/a/chromium.org/forum/m/#!topic/chromium-extensions/nevc6nRpAlQ
https://developer.chrome.com/extensions/notifications#event-onClicked
それが役に立てば幸い :)