North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
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 が standalonefullscreen に設定されていること
  • サイトに 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 サイト構築時には、是非とも実装を検討する技術だと個人的に強く思います。

nanba
WRITER:nanba
高い技術力を誇る『NorthDetail』内では珍しい『チカラワザ系コーダー』
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001