LoginSignup
0
0

More than 3 years have passed since last update.

PWAに対応したはずなのに「このサイトをホームに追加」バナーが表示されないときの対処法

Posted at

ハマったのでメモ。

状況

  • 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イベントが登録されていないと認識されないみたいなので空の関数を登録しておく

なぜこれで解決するかはわからないがとりあえず動いた

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0