概要

  • WebページをPWAとして設定することで以下のことができる
    • Webアプリなのに、ネイティブアプリのように Android/Windows にアプリとして登録することができる
    • アドレスバーのようなブラウザっぽさはなく、全画面でネイティブアプリのように起動することができる
  • PWAのService Workerの機能を使った実装をすることで、以下のことができる
    • Webコンテンツをキャッシュ化することができ、オフラインで動かすことができる
    • サーバ側からPush通知ができる(iPhoneを除く)

オフライン対応

オフライン対応必須

  • Chrome は次をチェックする
    • Service Worker がそのページにインストールされていること
    • Service Worker が fetch イベントを設定していること
    • インストールした Service Worker の fetch イベントが、シミュレーションしたオフラインモードで 200 の HTTP ステータスコードを返すこと
  • 上記を満たしていないと、Chrome 89 以降は警告が出る
  • Chrome 89 以降のデベロッパーツールで検証可能
  • Chrome 93 以降ではインストールができなくなる

Service Worker

iOS

iOSのPWAの対応状況

  • iOS 12.2 で以下の機能が実装された
    • スワイプで戻ることができるようになった(いわゆるナビゲーションジェスチャ)
    • OAuth 認証ができるように(SNS ログインの不具合が解消された)
  • iOS 13 からは以下の機能も追加されている
    • URLのツールバーを隠せるようになった(ネイティブアプリ風のユーザーインターフェース)
    • 共有ボタンが更新され「ホーム画面に追加」するボタンがわかりやすくなった
    • Apple Pay が利用可能になった

PWA を iOSで使う注意点

  • PWAはもともとはApple発のサービスではない(Google発?)
  • AppleはSafariへの機能追加にかなり慎重
  • 2020年7月には、フィンガープリンティングの懸念から、いくつかのWebAPIの実装を拒否するというアナウンスがされている
  • BluetoothやNFC、バックグラウンドでの位置情報取得なども拒否する方向
  • 例えば、Appleのブラウザのセキュリティ機能(ITP)が強化されて、7日間アクセスのないデータは削除されるようになった
  • Google が PWA で実現したい「二回目以降はオフラインでも起動できる」という仕様に反している

開発

JavaScript

C#

事例


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-03-31 (水) 11:04:56 (11d)