PWAが何なのか分からなかったのでメモ。
PWAの特徴
PWAはネイティブアプリのようなUXをウェブで実現する。とは具体的にどういうことか？
こちらの最初の箇条書にある。
つまり普通のアプリっぽいウェブサイトのこと。なるほどわからん。
厳密な定義ではない？アジャイルみたいな感じ？
まだぼんやりしていて分かりにくいのでチェックリストを見る。
PWAのチェックリスト
- 基本事項
- HTTPSを使っている
- タブレットやモバイルでレスポンシブである
- 少なくともStart URL（？）はオフラインの間に読み込み（レスポンス200）できる
- （スマホなどの）ホームに追加するためのメタデータがある
- 3G回線でも速い
- クロスブラウザ対応
- 画面遷移時にネットワークでブロックされているように感じさせない
- どの画面でもURLがある
- 模範事項
- インデックスとソーシャル連携
- コンテンツはGoogleにインデックスされる
- Schema.org メタデータが適切に設定されている
- ソーシャル用メタデータが適切に設定されている
- 必要な場合はCanonical URLが設定されている
- SPAの場合、フラグメントを使わずにHistory APIを使う
- UX
- ページ読み込み時にコンテンツがジャンプしない
- 「戻る」でスクロールが保持されている
- タップ時に、スクリーンキーボードによって入力が不明瞭にならない
- アプリモードでも共有ボタンが利用できる
- スマホ、タブレット、デスクトップでレスポンシブである
- アプリインストールバナーを過度にせず、インストールされたら消す
- パフォーマンス
- 初回読み込みが3Gでも高速
- キャッシュ
- 可能ならキャッシュをまず見るようにする（3Gよりオフラインの方が速いのはおかしい）
- オフラインになったときに適切に通知する
- プッシュ通知（模範的なPWAの要件ではない）
- 通知を使用する状況を詳しく提供する
- プッシュ通知を有効にするUIを過度にしない
- 権限要求の表示時に他の全てのコンテンツを暗くする
- プッシュ通知は、適切な時間、正確、ユーザーに関連性があるものでなければならない
- 通知の有効または無効にするコントロールを提供する
- その他の機能
- Credential Management API によるシームレスなログイン
- Payment Request API によるネイティブUI連携
- インデックスとソーシャル連携
つまり・・・？
ちょっと見えてきた。巷では「PWA＝プッシュ通知」みたいな記事も見かけるけど、キモはオフライン対応なんじゃないだろうか。「PWA＝オフライン対応」と言ってもいいくらい。
技術的に言うならば、Service WorkerのCache APIだ。古い技術も入れるなら、それに加えてIndexedDB。
レスポンシブとかHTTPSとかはWeb開発をしている人なら普段から扱うし、プッシュ通知はサンプルを見ながら書いたらすぐ使えそうだ。
しかしオフライン対応はね…。昔Application CacheとIndexedDBとLocalStorageのオフライン機能で盛り上がって、そのまま誰もちゃんと使えず終わっていったよね。
これは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とかでやるべきだよねえ…。