firebaseメッセージングによってインストールされたサービスワーカーを正しく登録解除する方法

Question

Firebaseメッセージングを使用してWebアプリケーションの通知をオン/オフに切り替えるトグルを実装しようとしています。私の通知は正常に機能しますが、ユーザが通知を無効にしようとすると問題が発生します。私は単に介してサービス従事者の登録を解除した場合：

navigator.serviceWorker.getRegistrations().then((r) => { 
    return Promise.all(r.map(reg => reg.unregister())); 
}); 

その後、作業員は確かに未登録の取得んが、ユーザーが背面に通知を有効にしようとすると、Firebaseは、このエラーがスローされます。

messaging/no-sw-in-reg 

エラーになりFirebaseを不要にしたユーザのためにFirebaseを登録解除する組み込みの方法はないようです。あなたがfirebaseアプリを削除し、ユーザーが再び通知を求めた場合に/を再初期化することになっていますか？

私はfirebaseトークンを削除して自分のデータベースを忘れてしまいましたが、もう一度呼び出されることのない役に立たないサービスワーカーを残したくありません。

あなたのウェブアプリケーションでユーザーがfirebase通知を完全に無効にする正しい方法は何ですか？

Answer 1

私はまったく同じ問題を抱えていました。だから私はあなたのコードを使用してサービスワーカーを取り除き、その後、メッセージングオブジェクトを再初期化するので、ページをリロードせずにサービスワーカーの登録を解除してインストールすることができます。

メッセージングオブジェクトがデバイストークンをキャッシュするため、デバイストークンが取得されたときにトリガーされるイベントがトリガーされないため、この問題が発生していることがわかりました。 ページをリロードする必要がない場合、メッセンジャーオブジェクトを再初期化することは実行可能なオプションです。誰かがメッセージングオブジェクトのキャッシュをどのようにクリーニングするかを知ることができれば、それはさらに良い解決策になります。 それまでは、ここに私の...

例コード：

navigator.serviceWorker.getRegistrations().then((r) => { 
    return Promise.all(r.map(reg => reg.unregister())); 
}); 
this.messaging = firebase.messaging(); 

源はあなたとてもよいです。

Answer 2

他の人に役立つ場合は、ServiceWorker全体を無効にするのではなく、PushNotificationsのみを購読解除することができます。

PushSubscriptionの登録を解除するだけで、メッセージングプロパティを再割り当てする必要がなくなります。

これは私が退会てる方法です：

/* 
Returns a Promise that resolves on the PushSubscription object that controls the push notification subscription, after it finds the coresponding ServiceWorker 
*/ 
getSubscription() : Promise<any>{ 
    if(!navigator) return; 

    const subscriptions = navigator.serviceWorker.getRegistrations().then((r) => { 
     return r.map((sw) =>{ 
     if(!(sw.active && sw.active.scriptURL.includes("firebase-messaging"))) 
      return Promise.resolve(); 
     return sw.pushManager.getSubscription(); 

     }); 
    }); 

    return subscriptions.then(arr => arr ? arr[0] : Promise.resolve(null)); 
    } 

=============================== ==========================

// Unsubscribes PushNotifications 
rejectPermission() : Promise<boolean>{ 
    return this.getSubscription().then((pushSubscription : PushSubscription) =>{ 
     return pushSubscription.unsubscribe(); 
    }); 
    } 

それは私が私のアプリのためにやっていることで、すべてうまくいくようです。