Webエンジニアなら必須の知識?PWAとは【Progressive Web App】

PWAとは

PWAとはProgressive Web Appの略であり、WebアプリにネイティブのようなUXを与えたアプリです。

インストール不要でホーム画面にアイコンが追加され、Push通知やブラウザを感じさせない全画面での表示など、今までのWebサイトでは出すことのできなかったネイティブ特有の挙動を再現でき、ユーザーにより使いやすいコンテンツを提供することができます。

まだ全ての環境でPWAを利用することはできませんが、PWA化することでネイティブアプリを開発するコストが抑えることができ、Web開発者にとっては夢のような環境だと思います。

PWAにすることで、以下のようなメリットが得られます。

段階的

プログレッシブ・エンハンスメント(Progressive Enhancement)を基本理念としており、モダンなブラウザにはCSS3などの最新の機能でリッチなデザインを提供し、サポートしていないブラウザでは機能を省きつつも十分なサービスは提供することで、全てのユーザーに利用してもらうことができます。

レスポンシブ

レスポンシブデザインにすることにより、今までのWebサービスやネイティブアプリのように端末を限定することなくパソコンでも、モバイルでも、タブレットでもあらゆる端末に適合することができます。

ネットワーク接続に依存しない

Service Worker技術の利用によって、必要なリソースをキャッシュすることでオフラインやネットに繋がりにくい環境でもユーザーにサービスを提供することができます。

アプリ感覚

App Shellモデルに基づいて作られており、スマホアプリを使い慣れたユーザーにとってアプリ感覚で使えるというのは大きなUXの向上を狙えます。

常に最新状態

Service Workerの更新プロセスで、アプリは常に最新の状態となります。

安全

HTTPS経由での配信が必須のため、安全にコンテンツを届けることができます。

再エンゲージメント可能

Push通知を導入することで、ユーザーに再エンゲージメントを促すことができ、利用率を向上させることが容易となります。

インストール可能

Webアプリでありながらホーム画面に追加することが容易にできるので、煩わしいインストールの工程を省いてユーザーがアクセスしやすいような環境を作ることができます。

また、URLを共有するだけで他の人ともシェアが簡単にできます。

 

PWA化するには

PWA化する上で、特定のフレームワークを使わないといけないということはありません。

Googleが提供しているProgressive Web App Checklistの項目に沿ってWebサービスを開発することでそのサービスは自然にPWAとなります。

Progressive Web App Checklist

Lighthouse tool を利用することで、より簡単にサイトをテストすることができます。

チェック項目は以下のようになります。

  • HTTPSに対応している
  • ページがタブレットとモバイルデバイスでもレスポンシブである
  • 全てのURLがオフラインで読み込むことができる(SW利用)
  • ホーム画面追加のためのメタデータが提供されている(Manifest)
  • 最初のロードが3Gでも高速である
  • クロスブラウザ対応である(Chrome,Edge,Firefox,Safari)
  • ネットワークでブロックされているように感じないページ遷移
  • 全てのページがURLを持っている
  • Googleにインデックスされるコンテンツ
  • 必要に応じてSchema.orgのメタデータが提供される(title,descriptionなど)
  • 適切な場所にソーシャルメタデータが提供される(Twitter Cardなど)
  • 必要に応じて標準URLが提供される(<link rel=canonical>)
  • ページ読み込み時にコンテンツがジャンプしない(CSSで固定するなど)
  • ページを戻った際に、スクロール位置が保持される
  • タップ時のオンスクリーンキーボードで入力がわかりづらくならない
  • スタンドアロン(ホーム画面に追加)またはフルスクリーンでコンテンツを簡単に共有可能
  • スマートフォン、タブレット、デスクトップの画面サイズごとに適切な表示となる
  • アプリのインストールを過度に促さない
  • 「ホーム画面に追加」がインターセプトされる
  • 最初に接続でキャッシュする
  • オフラインになった際にユーザーに適切に通知する
  • 通知の利用方法についてユーザーに説明がある(最初のアクセスでオプトインを入れるなど)
  • プッシュ通知をONにするように過度に促さない
  • 許可要求が表示されている場合は、画面を暗くする
  • プッシュ通知は、タイムリーで正確性があるものとする
  • 通知を有効化または無効化できる
  • 複数のデバイスでログインできる
  • 支払い要求をネイティブUIを通して簡単に利用できる

チェック項目は多いですが、自分のサービスに合ったものから徐々に適用させていくと良いでしょう。

Safariも今後対応していくようなので(今まで未対応だった)、iOSでのPWAの利用も増えていくと思われます。

おそらくいずれ必須の実装となると思うので、すでにリリースされているものをPWA化するのは難しいですが、今後Webがメインで利用されるサービスをリリースするときは、積極的にPWA化していきましょう!

 

PWAならぜひReactで!

初めての人にオススメしたいReactの勉強法【初心者向け】