Googleさん主催のイベントProgressive Web Apps Roadshow @Mountain View に行ってきました。
Progressive Web Appsとは複数のWeb技術で構成される総称で、徐々にアプリ（モバイルのNativeアプリ）に変化する様子を表した言葉です。構成しているWeb技術は以下のようなものです。
- Service Worker
- Web App Manifest
- Push Notification
- Web App Manifest
- Background Sync
- Cache API
- Payment Request API など
詳しくはえーじさんの記事@HTML5 Experts JPの記事を御覧ください！
今回のRoadshowでは、上記の内容についてのイベントでした。
Speaker陣もかなり豪華。
- Chris Wilson
- Rob Dodson
- Maggie Kearney
- Paul Bakaus
- Pete LePage
もう有名人ばかりで、それだけでお腹いっぱいですが気になった内容をリストしていこうと思います。
公開された資料はこちら。（全部Keynoteって新しい・・・^^;）
気になったリスト
Chris Wilson
Keynoteなので、全体的に語っています。
Web Audio/MIDI APIでいろいろご一緒しているので、とても親しみ深い方です :-)
- Webに携わって23年目にユーザー体験、ユーザーとのEnggementに関してやっと満足がいくサイトが作れるようになった。
- Webの現状はこうです。
- Google Mapはデスクトップではブラウザで使うだろうけど、モバイルブラウザ使う人ってほとんどいないよね？
- Offlineの状態でブラウザを使おうとする人っている？
- 80%の時間がそれぞれのユーザーのTOP3のアプリで費やされている（モバイル）
- 1ヶ月の平均でユーザーがインストールするアプリはゼロ
- ユーザー体験は・・・・
- 信頼性が必要(ネットワーク接続に関して)
- 速くないとダメ(ページのロードに3秒以上かかると40%のユーザーは離脱する)
- Engaging(Add to Homscreen、FullScreen、OrientationだったりPush Notification)
- Push Notification、Service Worker に対応した中国のショッピングサイトの例
- Page viewが2倍に増加
- 滞在時間が以前より74%増加
- HTTPS必須
- 導入方法
-
1から作り直す
-
全てではなくて一部だけのシンプルなバージョンを作る
-
少しづつor必要な機能のみ実装
-
採用しているサイト達
Rob Dodson
Polymerの中の人。実際のコードを交えて、基本的なところ、ライフサイクル、デバッグについて説明
- 世界のモバイル環境の60%の人が2G
- ServiceWorker
- Networkのプロキシ
- Scopeに注意
- Service WorkerとしてRegisterするJSファイルの下にのみ有効
- 例えば
/scripts/とか/js/以下に設置して「動かない・・・」となく事があるので注意
- DebugはChromeのDevToolsで
- Applicationのタブにある
- キャッシュされてるリストを見る
- キャッシュをクリアする
- （個人的な感想：とても便利、ホントに便利、もう手放せない！！！！）
Maggie Kearney
HTTPSについての話。
- HTTPSを使う理由はいかが確実であるから。
- Identity：誰と通信してるの？
- Confidentiality：誰があなたのデータを見られるの？
- Integrity：誰があなたのデータを修正できるの？
- けども・・・
- Performanceは落ちるだろう
- コストも掛かるだろう
- メンテナンスもね・・・
一問・一答
- 自分のサイトには不要な場合もある
- ServiceWorker(Offline)が使えるよ
- getUserMediaが使えるよ
- PUshNotigicationも使えるよ
- GeoLocationも使えるよ（むしろ今まで使ってたサイトが今は使えていないこともあるけど・・・）
- HTTP/2が使えるよ
- パフォーマンス問題でショッピングサイトだと収入が減る恐れがある
- HTTPSだとHTTP/2が使える。HTTP/2で速くなる可能性もあるよ。
- 適用するときのコストもバカにならない
- 署名書は Let's Encrypt 使えば無料
- 検索ランク付けの1つの指標になってる
- 連携している外部のサイトが対応していない（警告が出る）
- IAB(Interactive Advertising Bureau)の調べでは扱っている80%以上の広告配信システムがHTTPSをサポートしている。
Paul Bakaus
Add to Home ScreenとPush Notificationについて。
- Add to Home Screenが改善したこと
- ユーザーの動作：階層になっているBookmarkから選ぶ必要がなくなった
- 開始URL：指定できるようになった
- オフライン動作：ユーザーの選択が可能になった
- Push Notification
- ブラウザが閉じていても知らせることが可能になった
- 実例：38%ページを開く率が上がった、Conversionが9倍になった
- とはいえ、Notifyするタイミングは制御しましょう
- いつ：いつ必要なのか
- 何を：都度知らせたいまたは動作させたい場合
- 誰が＆何を：個人的なお知らせ
Pete LePage
ChromeExtension Lighthouseの紹介。
- Lighthouseとは
- WebページのProgressive Web Apps度がいかほどの検査とサイトのパフォーマンスを測定して、ポイントで表示してくれるExtension
- CLIもあるよ。
- ポイントが100取れなかったからといって悲しがるツールではない
- 全体でなく必要な部分のみProgressive Web Appsにすることもあるので、ポイントは飽く迄も指標として使ってね。
- SPA(Single Page App)をProgressive Web AppsにするLiveデモ
- 手を施さないとは20点前半だったのが
- サーバサイドレンダリングにして30点台
- サービスワーカーを入れて60ポイント代に上がり（点数は確か・・・）
- manifest.jsonを入れて更に上がった（最終的には80ポイントだった気が・・・）
- DevToolsは閉じてから実行しよう
- 指標があるので適用した感が出る（個人的に感じたこと）
- モチベーションにもなるよね（個人的に感じたこと）
- Lighthouseを動作させた後のレポート画面
CodeLabs
Agendaによるとこの3つが行われてたはず。
感想
セッションは午前中で終了した。9:00-12:30の中に1度休憩という長丁場だったけど、あっという間の会でした。午後からはCodelabsがあったけど、急遽できた都合により参加できませんでした。非常に残念。
とはいえ、勉強会ってやっぱいいな〜。いろいろ得るものが多くて。勉強会でしか得られないのは刺激な気がする。ごちそうさまでした。
そして、どうせなので1年ほど前に作ったWeb AudioとWeb MIDIのCodelabsのページをLighthouseでスコアリングしてみた結果、Web Audio API Codelabs、Web MIDI APIどちらも 75 / 100。どちらも同じ自作のフレームワーク的なの上で動いているのでそりゃ一緒の点数だろうけど、1年前に作って75点というのはなかなかの高得点なのではないか？というドヤ顔をしながらの発言で本編は終了とさせていただきます。
当日は、2016年10月3日（月）。久々の雨まじりの天候でした。明け方はこんなだったのにな〜。やっぱりどこの国でも「朝焼け」って天気が悪くなる前兆なのかしら？
