PWAとは

PWAは Progressive Web Apps の略　ブラウザアプリとネイティブアプリの利点を融合したWebアプリのことを指す。
PWAは特定の技術を指すのではなく概念のことで, Googleが推奨している。

PWAの特長としては、以下のようなものが挙げられる。(MDN web docsより)

Discoverable：コンテンツを検索エンジンで見つけることができる
Linkable：URLでアプリやコンテンツを共有できる
Safe：アプリとサーバーとの通信経路が安全で第三者からの攻撃を受けない
Responsive：携帯電話、タブレット、PCなどさまざまなデバイスで利用できる
Progressive：古いブラウザでも基本使用でき、最新ブラウザではフル機能が使用できる
Installable：アプリを端末のホーム画面に追加できる
Network independent：オフラインや貧弱なネットワーク環境でも使用できる
Re-engageable：新しいコンテンツがあるときに通知を送信できる

PWAの機能

ブラウザから表示して、ストアからのインストール不要にする。
ホーム画面にアイコンを追加し、ネイティブアプリのような起動。
キャッシュの利用による高速化・オフラインでの使用可。
プッシュ通知・バナー通知の送受信。

その他、音声認識・音声合成　Bluetooth　生体認証　Apple Payでの支払いなど...

PWAの成果事例

Googleが公開しているケーススタディーによると、PWAの導入により、下記の成果が挙げられる。

日経新聞

アプリを操作可能になるまでの時間が14秒短縮
読み込み速度が75％改善される
2.3倍のオーガニック流入
会員登録コンバージョン+58%
1日当りアクティブユーザー数 +49%

Suumo

読み込み時間が75％減少
プッシュ通知の開封率は31％

PWAをどうやって実現するのか？

PWAを支えるService Worker という技術

Service WorkerとはWebページのバックグラウンドで動くもう一つのJavaScript環境。Web WorkersというJavaScriptコードを非同期に実行させる技術をベースとして実装されており、あくまでもWebページの裏側で異なったライフサイクルで動くJavaScript実行環境でしかない。

Service Workerを土台にし、Fetch API、Cache API、Push APIなどの別の機能を組み合わせることでWebアプリで出来なかったことを実現する

具体的には、register()メソッドを使って実行したいコードを登録することで処理を開始させる。さらに、呼び出し元ページが閉じられても永続的に動作する。Webブラウザを終了させても、再びWebブラウザが起動した際にService Workersは再起動する(Web Workersとの違い)

PWAにおいてはオフライン時にWebサーバーにアクセスせずにWebブラウザ内に保存された各種リソースをWebアプリケーションに返すために使われる。

Service Worker を使ってできること

プッシュ通知
ユーザーへのが通知できる、現在iOS15ではできない模様。
バックグラウンド同期
例えば、オフラインでメッセージ送って、ネットワーク接続されたらバックグラウンドでメッセージが送られるみたいなこと。
オフラインでの操作
Webページからのリクエストに反応し、以前に取得していたキャッシュを返却することでオフラインな状況でも動作する。

　※将来的には定期的な同期、ジオフェンシングなども導入される見込みらしい

Service Worker を使ってできないこと

DOMの操作
Service WorkerからWebページ側のDOMに直接アクセスはできない。
状態の永続化
Service Workerは必要なときに起動するので、イベントハンドリング中になにか値を変数に保持しておいたとしても、次のイベントハンドリングの際には消えてしまう。
HTTPで動かす
セキュリティの観点から、HTTPS（またはlocalhost）のWebページでしか登録できない。
オリジンが同一でないものを動かす
ホストだけでなくURIスキームとポートも同一であることが必須となっている。

Service Worker を使用できるブラウザ

現在使用できるブラウザ

Chrome
Firefox
Opera

今後期待できそうなブラウザ

Microsoft Edge (支持を表明)
Safari　(将来の展開を示唆)

プッシュ通知とか使わなくてもPWAにすべきか？

GoogleはUX(ユーザー体験)を重視している。
3秒以内にサイトが表示されないと53％ものユーザーが離脱するため、サイトを高速化することが重要となる。
PWAは強力なキャッシュを用いてサイトを高速表示する機能のため、ユーザーの待機時間が短ければ、ユーザーにもSEOにも評価されやすくなる。

つまり、iOSでのプッシュ通知やバナーは表示されない状態、そもそもそれらを使わない状態でのPWAの導入でも大きな意味を持つため、PWAにするメリットは大きいといえる。

参考資料

https://web.dev/pwa-checklist/
https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Introduction
https://developers.google.com/web/showcase/2018/nikkei?hl=ja
https://developers.google.com/web/showcase/2016/suumo
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API