zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript WEBアプリのプッシュ通知の許可を取り消す方法

WEBアプリでプッシュ通知を実装するでWEBアプリでプッシュ通知を実装する手順を紹介しましたが、ここでは逆にプッシュ通知削除する方法を紹介します。

先のページで紹介したように、ページロード時に以下のようにService Workerが登録されていることを前提とします。

window.addEventListener('load', async () => {
  if ('serviceWorker' in navigator) {
    window.sw = await navigator.serviceWorker.register('/service-worker.js', { scope: '/' });
  }
});

プッシュ通知を許可しているかどうか判定する

プッシュ通知を解除するにはまず、Service WorkerpushManager.getSubscriptionメソッドを実行して、プッシュ通知の情報を取得します。

情報が取得できる場合はプッシュ通知を登録(許可)しているということになります。

const subscription = await window.sw.pushManager.getSubscription();
if (subscription) {
  // プッシュ通知を許可している場合
}

プッシュ通知の許可を取り消す

情報を取得できた場合は、取得したオブジェクト(subscription変数)のunsubscribeメソッドを実行します。

また、取得したオブジェクトからendpointが取得できますので、この情報をキーにサーバー側のプッシュ通知の情報を削除するなどの処理が必要になります。

const subscription = await window.sw.pushManager.getSubscription();
if (subscription) {
  // プッシュ通知を許可している場合
  subscription.unsubscribe();
  const request = {
    endpoint: subscription.endpoint
  };
}

関連記事