1

新しいオファーが 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()
}

何か案は ?どうもありがとう

4

1 に答える 1