新しいオファーが DB に追加されたときに通知を受け取る React を使用したプログレッシブ Web アプリを開発しています。すべて正常に動作し、Web を開き、ユーザーに通知を有効にする権限を付与するように依頼し、それらを許可し、PWA をインストールして実行し、DB に新しいオファーを追加すると、新しいオファーの通知が表示されます (Chrome + Windows 10)。
しかし、問題は、PWA が実行されていない場合、通知が届かないことです。PWA が閉じていても、Service Worker がバックグラウンドで実行されていると思っていたでしょう。私は何が欠けていますか?
これが私の notifications.ts ファイルの notifyNewOffer 関数です
function notifyNewOffer(newOffer: Offer) {
if ('serviceWorker' in navigator) {
const options = {
body: newOffer.subheading,
icon: './logo192.png',
image: './static/media/placeholder-offer.1bcbf040.png',
vibrate: [100, 50, 200],
badge: './favicon.ico',
tag: 'new-offers',
renotify: true,
actions: [
{ action: 'confirm', title: 'Check offer', icon: '' },
],
};
navigator.serviceWorker.ready.then(swreg => {
swreg.showNotification(newOffer.heading, options);
});
} else {
console.log('no serviceWorker');
}
}
そして、これは私がそれを呼ぶ方法です:
function addedOfferSubs<T>(setOffers: (offers:any) => void) {
// @ts-ignore
const subscription = API.graphql(graphqlOperation(addedOffer)).subscribe({
next: async (eventData: SubscriptionValue<T>) => {
const newOffer = (eventData.value.data as any).addedOffer;
await indexedDb.createObjectStore('offers', 'id'); // Opens db. Will create the table offers only if it doesnt already exist
await indexedDb.putValue('offers', newOffer); // Adds new offer
// Push notification
notifyNewOffer(newOffer);
// Set offers
const offersData = await getOffersFromIdb();
setOffers(offersData);
},
});
return () => subscription.unsubscribe()
}
何か案は ?どうもありがとう