Skip to content

Instantly share code, notes, and snippets.

@xl1
Created June 19, 2017 17:39
Show Gist options
  • Save xl1/b8b9ef9ada5657b9b268c76e625fc5ee to your computer and use it in GitHub Desktop.
Save xl1/b8b9ef9ada5657b9b268c76e625fc5ee to your computer and use it in GitHub Desktop.
プログレッシブウェブアプリチェックリスト

Progressive Web App Checklist

https://developers.google.com/web/progressive-web-apps/checklist (CC BY 3.0)

Baseline Progressive Web App Checklist

Lighthouse - Chrome ウェブストア でチェックできる

  • サイトが HTTPS で提供されていること
  • タブレット・モバイルデバイスに最適化されている (responsive) こと
  • (少なくとも) 開始地点の URL はオフラインでもロードできること
  • ホーム画面に追加するためのメタデータが提供されていること
  • 3G 回線でも高速に読み込めること (10 秒以内に操作可能)
  • クロスブラウザで動くこと
  • ページ遷移がネットワークによってブロックされているように見えないこと
  • それぞれのページが URL を持つこと

Exemplary Progressive Web App Checklist

検索可能性とソーシャルメディア対応

  • Google にインデックスされること
  • 適切な場所で schema.org のメタデータが提供されていること
  • 適切な場所でソーシャルメタデータが提供されていること (Open Graph, Twitter Cards)
  • 必要な場所に canonical URL の指定があること
  • hash fragment ではなく History API で URL が制御されていること

ユーザーエクスペリエンス

  • ページを読み込むときに内容がジャンプしないこと (画像や広告の読込等でページ内容がずれないこと)
  • 詳細ページから一覧ページに「戻る」ボタンで戻ったときに、スクロール位置が保持されること
  • 入力欄をタップしたときにスクリーンキーボードで隠れないこと
  • standalone または full screen モードであっても、ソーシャルメディアへのシェアが簡単にできること
  • 携帯電話、タブレット、デスクトップそれぞれのスクリーンサイズに最適化されている (responsive) こと
  • アプリのインストールを過度に促さないこと
  • (登録フローの途中など)「ホーム画面に追加」表示が不適切な場所では出ないようにしてあること

パフォーマンス

  • 3G 回線であっても初回ロードはきわめて高速であること (5 秒以内に操作可能)

キャッシュ

  • キャッシュファーストであること (「遅い回線よりオフラインのほうが早い」ことがあってはならない)
  • ユーザーにオフラインであることを適切に伝えること

プッシュ通知

  • プッシュ通知を使用する目的をユーザーに伝えること
  • プッシュ通知を有効にするよう催促する UI は強引すぎないこと
  • パーミッション要求中は、画面表示を暗くすること
  • プッシュ通知は、タイムリー、的確、有用であること
  • プッシュ通知を無効にする手段を用意すること

追加機能

  • Credential Management API を使用して、ユーザーがデバイスをまたがってログインできるようにすること
  • Payment Request API を使用して、ネイティブ UI で支払いができるようにすること
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment