furoblog’s blog

妻と一緒にはじめました。1日1更新が目標です。

PWAについておさらい

PWAのおさらい

PWAのおさらい

PWAの準備

仕事でPWAを扱うことになりそうなので予習

 

  • SSL(https対応が必要になる)
  • マニュフェストの作成
  • ServiceWorkerを設定する
  • アイコン(192x192)が必要

 

jam25.jp

developer.mozilla.org

app-manifest.firebaseapp.com

トラブルシューティング

No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

マニュフェストファイルが正しく読み込めていないので、リロードしましょう。

→ 私の場合、App.jsとSW.jsがルート直下に置かれていないためでした。

なぜこれでいけないのか謎ですが、おとなしくルート直下に置いておきましょう・・。

 

manifest display property must be one of standalone or manual-ui

standaloneかmanulal-uiにしてね

 

ってことです。 

 

PWA確認方法

thk.kanzae.net

 

インストールボタンの設置

blogenist.jp

 

注意点として、Safariには対応していませんので注意が必要です。


Push通知の設定


対応できるのはChromeFirefoxのみ

qiita.com

 

furoblog.hatenablog.com

 

Safariでインストールする

SafaiでPWAインストールする

SafaiでPWAインストールする

 

developers.google.com

 

PWAでオフライン対応

qiita.com

 

Store対応

qiita.com