PWA

Progressive Web Apps: PWA を調べたのでメモ

More than 1 year has passed since last update.

PWAが何なのか分からなかったのでメモ。

PWAの特徴

PWAはネイティブアプリのようなUXをウェブで実現する。とは具体的にどういうことか?

https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=ja

こちらの最初の箇条書にある。
つまり普通のアプリっぽいウェブサイトのこと。なるほどわからん。

厳密な定義ではない?アジャイルみたいな感じ?
まだぼんやりしていて分かりにくいのでチェックリストを見る。

PWAのチェックリスト

https://developers.google.com/web/progressive-web-apps/checklist

  • 基本事項
    • HTTPSを使っている
    • タブレットやモバイルでレスポンシブである
    • 少なくともStart URL(?)はオフラインの間に読み込み(レスポンス200)できる
    • (スマホなどの)ホームに追加するためのメタデータがある
    • 3G回線でも速い
    • クロスブラウザ対応
    • 画面遷移時にネットワークでブロックされているように感じさせない
    • どの画面でもURLがある
  • 模範事項
    • インデックスとソーシャル連携
      • コンテンツはGoogleにインデックスされる
      • Schema.org メタデータが適切に設定されている
      • ソーシャル用メタデータが適切に設定されている
      • 必要な場合はCanonical URLが設定されている
      • SPAの場合、フラグメントを使わずにHistory APIを使う
    • UX
      • ページ読み込み時にコンテンツがジャンプしない
      • 「戻る」でスクロールが保持されている
      • タップ時に、スクリーンキーボードによって入力が不明瞭にならない
      • アプリモードでも共有ボタンが利用できる
      • スマホ、タブレット、デスクトップでレスポンシブである
      • アプリインストールバナーを過度にせず、インストールされたら消す
    • パフォーマンス
      • 初回読み込みが3Gでも高速
    • キャッシュ
      • 可能ならキャッシュをまず見るようにする(3Gよりオフラインの方が速いのはおかしい)
      • オフラインになったときに適切に通知する
    • プッシュ通知(模範的なPWAの要件ではない)
      • 通知を使用する状況を詳しく提供する
      • プッシュ通知を有効にするUIを過度にしない
      • 権限要求の表示時に他の全てのコンテンツを暗くする
      • プッシュ通知は、適切な時間、正確、ユーザーに関連性があるものでなければならない
      • 通知の有効または無効にするコントロールを提供する
    • その他の機能

つまり・・・?

ちょっと見えてきた。巷では「PWA=プッシュ通知」みたいな記事も見かけるけど、キモはオフライン対応なんじゃないだろうか。「PWA=オフライン対応」と言ってもいいくらい。
技術的に言うならば、Service WorkerCache APIだ。古い技術も入れるなら、それに加えてIndexedDB

レスポンシブとかHTTPSとかはWeb開発をしている人なら普段から扱うし、プッシュ通知はサンプルを見ながら書いたらすぐ使えそうだ。

しかしオフライン対応はね…。昔Application CacheIndexedDBLocalStorageのオフライン機能で盛り上がって、そのまま誰もちゃんと使えず終わっていったよね。
これはGoogleによるリベンジなのか?

その頃PC版Chromeでデスクトップアプリを登録できるようになってたけども、そのレスポンシブ版と考えていいのかも。

PWAとAMP(Accelerated Mobile Pages)を合わせて、PWAMPと言ったりもするらしい。
http://qiita.com/edwardkenfox/items/4c0b9550ffa48c1f0445
http://qiita.com/radiocat/items/231dad496cd44b61e96d
https://www.suzukikenichi.com/blog/pwamp-is-combination-of-pwa-and-amp/
なんでセットで考えるのか分からないけど。マーケティング用語な雰囲気がある。事例紹介記事と技術記事の乖離がひどい。

https://www.suzukikenichi.com/blog/from-amp-to-pwa-progressive-web-amps/
この事例とか。
見てみると、確かにAMPの表示のときにWorkerが動いて、キャッシュを取得している。
ただ、そのキャッシュファイルが共通JavaScriptやCSSのファイルだけなんだけど…。これでPWAの事例って言っちゃうのか。

もっとさ、Google MapでAjaxがすごい!ってなった時のように、関連レシピの情報や画像まで先にDLして本当にオフラインアプリの速度みたいで凄い!っていうようなサンプルは無いのだろうか。
まずGoogleがGmailとかでやるべきだよねえ…。