ハマったのでメモ。
状況
- FCM (firebase cloud messaging) を使ってwebpush機能を実装＆実環境で動作確認済み
- その際によくネットに転がっている以下の書き方でserviceworkerを登録していない（ファイル名を
firebase-messaging-sw.jsにすると自動で読み込んでくれるのでこちらを利用した）
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceWorker.js");
}
- webpushが動作しているのでpwaには対応しているはずなのに、pcのchromeのアドレスバーにプラスボタンが表示されないし、androidのchromeでは「このサイトをホームに追加」のバナーが表示されない。また、androidのchromeで設定からホームに追加した際にアイコンの右下にchromeのマークが表示されてださい
- 開発者ツールのapplicationのタブにて
"No matching service worker detected. You may reload the page,or check that the service worker for the current page also controls the start URL from the manifest. "と表示されている。
対処法
-
serviceWoker.jsを作成し上記のコードにて読み込む。
serviceWorker.js
self.addEventListener('fetch', function(event) {
});
- fetchイベントが登録されていないと認識されないみたいなので空の関数を登録しておく
なぜこれで解決するかはわからないがとりあえず動いた