そろそろPWAを理解しておこう＠概要編

2020.09.04 TECH: そろそろPWAを理解しておこう＠概要編

PWA とは『Progressive Web Apps(プログレッシブウェブアプリ)』の略で、Web サイトをスマートフォン向けアプリのように使える(見せかける)仕組みです。
ServiceWorker・PushNotification・WebManifest などを Web サイトに導入することで、ネイティブアプリに近い操作性(パフォーマンスやユーザーエクスペリエンス)を提供することを可能にします。

また、これら機能に対応していないブラウザに対しては、従来通りの Web サイトとして提供されるので実装するデメリットは、極めて少ないかと思います。

対応ブラウザ・前提条件

Chrome45以降対応(一部機能は40以降から実装済み)
FireFox44以降対応
Microsoft IE未対応
Microsoft Edge17以降対応
Safari11.1以降一部対応(iOS Safari11.4以降一部対応)
Service Worker 自体が https か localhost 上でしか動作しません

※対応ブラウザ一覧表：Can I use service workers ?

Service Worker について

セキュアサーバ(https) か localhost 上でしか動作しません
ブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、ファイルの指定先読み込みなどが可能になります
オフラインのアプリを実現・サポートするために作られたものです
Service Worker はブラウザが必要に応じて起動・終了するので、変数の値を保持できません

manifest について

『ホーム画面に追加』インストールバナーの設定
上記インストールバナー内や、ユーザーホームアイコンや、スプラッシュ画面にて使用する画像を設定
(最大値である512×512pxの画像ファイルが必要)
スプラッシュ画面での背景色を設定
デバイスの向きを設定
ブラウザUI の表示・非表示を設定

manifest の主なパラメータについて

パラメータ	説明
name	ウェブアプリのインストールバナー表示時に表示されるテキスト
short_name	ユーザーのホーム画面にボタン追加された際のアイコンキャプション
theme_color	ツールバーなどの色を設定
background_color	スプラッシュ画面の背景色設定
display	表示タイプをカスタマイズする standalone / fullscreen / browser / minimal-ui
orientation	ページの最初の向きを指定する landscape (デバイス横向き表示)
scope	ナビゲーションのスコープ(領域)
start_url	アプリ開始場所の相対URL
icons	ユーザーホームアイコンや、スプラッシュ画面に使用される画像設定

生成してくれる便利なジェネレータ

『ホーム画面に追加』UIが出現する条件(理論値)

manifest.json が適切に設定されていること
マニフェスト内の Display Mode が standalone か fullscreen に設定されていること
サイトに Service Worker が登録されていること
HTTPS 経由で配信されていること
『5分以上の間隔をあけ2度目のアクセス時に出現』という情報が多いようです(これは微妙に定かではない気がする…)

※Webアプリのインストールバナーは、最先端のテクノロジーなので、バナーを表示するための条件は、今後変更される可能性があります

オフライン対応

キャッシュされている画面はオフラインでも表示できます
(オンラインになった時点でファイルに差異があれば再キャッシュ・更新します)
キャッシュされていない画面に遷移した場合、事前に用意した画面を表示することができます

※ precache 設定(ファイル先読み)を使用すれば、閲覧履歴のない画面でもオフライン表示できます

プッシュ通知

Web サイトにおいてユーザーが許可することで、ブラウザを閉じていても通知を届けることができるようになります。
以前はネイティブアプリ独自の機能でしたが、Service Worker と各API の登場により、Web サイトでも実現可能になりました。

Push API…サーバからメッセージを受け取る
Notification API…プッシュ通知をユーザに対して表示する

ちなみにプッシュ通知に特化した Push.js っていう便利なライブラリあります。
Push.js は、Notification API をブラウザ経由で簡単に制御することができる Javascript ライブラリです。
シンプルなコードを書くだけでプッシュ通知を実装することができます。

Push.js

まとめ

前述しましたが『PWA技術は非対応なOS・ブラウザにも実害的に何の影響も与えません』
もちろん重箱の隅を突っつく感じで言えば、影響ないこともないです…あくまでも閲覧者のストレスになるような影響はございませんって意味合いです。
『ホーム画面に追加』インストールバナー(俗にいう Add to Homescreen(A2HS) ってヤーツ)を表示させるだけなら、大した工数もかけずに実装できます。(AMP サイトだと独自キャッシュのおかげ様で少しだけ手間がかかります)
そして、オフライン対応は電波状況の悪い地域での優位性だけではなく、表示速度改善にも多大にチカラを発揮し、結果的に SEO の効果も見込める(Web Vitals の観点)ことになります。
Web サイト構築時には、是非とも実装を検討する技術だと個人的に強く思います。