この記事は Google I/O '19 のセッションの視聴メモです。
想定読者は自分なので正確性や網羅率には問題があるかもしれません。
Reference
Speaker(s): Ben Galbraith, Dion Almaer, and Dana Ritter
Abstract
このセッションではGoogleのWeb Platformに関するビジョンを学べます。
Contents
まずは昔話から
- Webページは描画が始まるまで6秒かかっていた
- 描画が始まってからユーザーの入力を受け付けるまで9秒かかっていた
Performance Budgets
- Pinterest と Uniqlo Canada の事例
- Lighthouse に
budget.jsonを指定してあげることでPerfomance Budgetsのレポートを取得できるようになった- CI等で定期的に観測すると良いとのこと
- https://developers.google.com/web/tools/lighthouse/audits/budgets
Search Console
- Chrome UX Report の結果からインサイトを得れるようになった
- 具体的に何ができるようになったんだろう…
Firebase - Performance Monitoring
- Real User のメトリクスが見れます
Paint holding
- 画面遷移時に何も表示されない画面が表示されるときがある
- そういったときに遷移後の画面をバックエンドで描画してからユーザーに見せることができるようになった
- Canaryでフラグをオンにすると実行できる
Portals
- ページ遷移を滑らかなアニメーションで実現することができる
- 動画では4つのドメインを滑らかに移動している
- 滑らかすぎてページを移動しているようには見えない
下図のデモでは別ドメインのサイトをPortalsを使ってオーバーレイで表示している
動画がわかりやすいのでぜひ見てみてください
https://youtu.be/rUUazNIZW7I?t=712
Web Packaging
- WebページをSigned package化してキャッシュサービスなどに置くことができる
- Canaryで試せるようになった
- Web Packaging はプライバシー安全なプリロードを実現し、Portalsはシームレスな画面遷移を実現する
perception-toolkit
- バーコードや二次元画像を認識する認識器と認識のためのUIがセットになったライブラリ
- デモでは squoosh.app の画像を読み込んでページ遷移を行っていた
Desktop PWA
- Google Duo / Twitter / Hulu 等で採用されていますよという話
- Proxx.app
- 2019年のマインスイーパ
- フィーチャーフォンでも使える
Duplex on the Web
- 自分の読めない言語で書かれたECサイトでの買い物をアシスタントが手伝ってくれるというイメージ？
- 旅行中に現地のサイトでレンタカーを借りるとかのシチュエーションでは嬉しそう
- どうやってサービスに組み込めば良いのかというイメージが湧きにくかった
- Duplex用にテストアカウントを発行する？
Cookie Changes
- HTTPSでサーブされてないページにはクッキーを送信しないようになる
WebAuthn
- Yahoo Japan が指紋認証によるサインインを実装したところサインインにかかる時間が37.5%も減少した
MEMO
- Portals がここまでできるとは思わなかった
- 現在はCanaryでしか実行できないがハンズオンがあるのでやってみよう
- web.dev/hands-on-portals
- perception-toolkit が認識器と読み込みUIの両方を持ってるの良いですね
- Desktop PWA が Electron を置き換えるのも遠くなさそう
- Electron 独自のアーキテクチャを勉強しなくて良いのはとても嬉しい
- アップデートが簡単にできるのも良い
- Slack とかすでにWeb版があるものは一瞬で置き換えられるのではないだろうか
- fugu fish
