Progressive Web App Checklistを読んでまとめてみた

Googleが公開しているProgressive Web App Checklistをサラッと読んでまとめてみました。 思ったより普通で、Webでいい体験を提供しましょうというニュアンスが強めだった。

Baseline

Lighthouseで計測可能。基本的なチェックリスト。

• Site is served over HTTP
• Pages are responsive on tablets & mobile devices
  • レスポンシブ対応をすること
• All app URLs load while offline
  • オフラインでも読み込みが出来ること
  • ServiceWokerによってオフライン対応が可能
• Metadata provided for Add to Home screen
  • HomeScreenに追加する時のmeta情報を提供すること
  • manifest.jsonに記述するやつ
• First load fast even on 3G
  • 3Gとかでも早く表示すること
  • 日本にいると気にする機会が少ないかも
  • PageSspeed Insightで85点以上を目指しましょうとのこと
• Site works cross-browser
  • クロスブラウザで動作すること
• Page transitions don’t feel like they block on the network
  • ページ遷移がネットワーク状況によってブロックされていないように見えること
  • SPA実装するなり、スケルトンスクリーンを実装するなりして対応してくれよのこと
• Each page has a URL
  • ページは固有のURLを持つこと
  • SPAとかでURLが迷子になってしまったりするけど、そういうのはなし

模範的なPWA

Lighthouseで未実装。自分で実行する必要があるもの。

Indexability & social

• Site’s content is indexed by Google
  • サイトがGoogleにインデックスされるようにすること
  • 基本的にJavaScriptを実行して検索エンジンにIndexしているが、FetchAPIのような新しいブラウザAPIはPolyfillを使うこと
• Schema.org metadata is provided where appropriate
  • いわゆる構造化データの実装をすること
  • パンくずとか、Article、Recipeなど
• Social metadata is provided where appropriate
  • TwitterやFacebookでシェアされる時のmetaデータを入れること
• Canonical URLs are provided when necessary
  • meta=canonicalが必要な場合は入れること
  • URLの正規化の話
• Pages use the History API
  • HistoryAPIを使ってURLを操作すること
  • mottox2.com/#posts/123 のようなIDを使ったルーティングをしてはいけない（昔vue cliで作ったアプリケーションがこの形だった気がする）

User Experience

• Content doesn’t jump as the page loads
  • ページを読み込む時に、要素がカクつくのを防ぐこと
  • width, heightのない要素やiframe, 広告埋め込みとかで発生しやすい
  • 画像の読み込み中はplaceholderを入れるなどの対応
• Pressing back from a detail page retains scroll position on the previous list page
  • 戻るボタンを押した時に、遷移前のスクロール位置に復帰すること
  • 体感としてInfinite Loadingを実装したサイトとかでスクロール位置を保持していない場合が多い
• When tapped, inputs aren’t obscured by the on screen keyboard
  • フォーカスがあたっている要素が画面上にあらわれている状態にすること（キーボードの下に要素を隠れないようにする）
• Content is easily shareable from standalone or full screen mode
  • Add to HomeScreenの”standalone”モードではブラウザのUIが隠れるので、簡単にシェアを出来るようにしておくこと
• Site is responsive across phone, tablet and desktop screen sizes
  • スマホでもタブレットでもPCでも適切なレスポンシブUIを実装すること
• Any app install prompts are not used excessively
  • アプリインストールのバナーは適切に表示すること
• The Add to Home Screen prompt is intercepted
  • Add to Home Screeenのプロンプト（「ホーム画面に追加」ボタン）の処理を割り込ませないこと
  • 独自バナーを出してキャンセルをなかったことにする手法をやらないでって解釈（Web Pushでよく使われているevilな手法）

Performance

• First load very fast even on 3G
  • PageSpeed Insightで85点以上を目指しましょうとのこと
  • 遅延ロード出来るscriptにはasync属性をつける、クリティカルレンダリングパスに対する理解を深めるなど

Caching

• Site uses cache-first networking
  • Cacheが利用できる場合にはNetworkより優先すること。ServiceWorker絡み Site appropriately informs the user when they’re offline
  • Cache Firstでページを読み込みして、Offline状態である時はOfflineであることを適切に通知すること

Push notifications

• Provide context to the user about how notifications will be used
  • Push通知がどういう時に行われるか伝えること
  • Best Practices for Push Notifications Permissions UX - Google ドキュメント
• UI encouraging users to turn on Push Notifications must not be overly aggressive.
  • プッシュ通知を有効化を過度に促さないこと
• Site dims the screen when permission request is showing
  • Permissionの要求の時は画面を暗くすること（モーダルの出し方のことだと思われる）
• Push notifications must be timely, precise and relevant
  • プッシュ通知は、タイムリーで正確、関連性のあるものにすること
  • セグメントを切らない通知は辞めろってこと
• Provides controls to enable and disable notifications
  • 通知のON/OFFの切り替えを出来るようにすること

Additional features

• User is logged in across devices via Credential Management API
  • Credential Management APIを通してログインできるようにすること
• User can pay easily via native UI from Payment Request API.

  • Payment Request APIを使って簡単に決済を行えるようにすること