この記事は Google I/O '19 のセッションの視聴メモです。
想定読者は自分なので正確性や網羅率には問題があるかもしれません。
References
Speaker(s): Paul Covell, Dominick Ng
Abstract
PWAはもはやモバイルだけのものではありません。このセッションではどうやってDesktop PWAをビルドするのか、それらならではの機能、ベストプラクティスといったことを紹介します。
Contents
- Webのユニバーサリティをもっと色んな所に持ち込もう
- PWAが始まったのは2015年のAndroidから
- SketchUp
- Desktopで動くことを前提としたPWA
- 1つのコードベースで3プラットフォーム(Windows, Mac, ChromeOS)
- Write once, run anywhere
- しかも既存のサイトにいくつか追加の要素を追加するだけ
- Web App Manifest
- PWA用の設定ファイル
-
start_url
: デスクトップアプリとして開くときの起点のURL -
display
:standalone
を指定するとデスクトップアプリとして追加できる -
theme_color
: デスクトップアプリとして起動するときのタイトルバーのカラー
- Service Worker
- WorkBox使って簡単にSWを書ける
- CSSは基本的にキャッシュしてバックグラウンドでアップデートしたり
- WorkBox使って簡単にSWを書ける
- Desktop PWAはリンクで共有できるしSearchに出てくる
- アプリのダウンロードリンクが「追加する」リンクに置き換わるとアプリを追加する心理的抵抗が非常に少なくなる
- インストールのアクションも開発者が制御できる
- ページを初めて訪れたときがデフォルトだが、ユーザーのエンゲージメントが高い瞬間に出すように制御できる
- Spotifyではページ上にインストールリンクがあって、それがクリックされたときに追加できる
- インストール後のイベントも取れる
- Chrome76からオムニボックス(Chromeの検索ボックス)にインストールボタンが追加される
- ビジネスインパクトの話
- HuluがネイティブからPWAに舵を切った
- Chromeブックで試してみたらなんの問題もなかった
- 数ヶ月で96%のユーザーがネイティブからPWAに移行した
- 再訪問率が27%増加し、エンゲージメントは5.5%増加した
- Native File System API
- Not virtual but real!
- PWAアプリの起動時の動作制御
- モバイルと違って複数ウィンドウが立ち上がることが期待されるときがある
- ウィンドウを立ち上げたり立ち上がっているウィンドウにフォーカスしたりするAPIが開発中
デスクトップ開発状況
- ファイルシステムとウィンドウ制御のAPIは年末には入る予定
Memo
- モバイルと共通している内容も多く聞きやすかった
- Chrome 76から追加されるオムニボックスのインストールボタンが激アツすぎる
- インストールという行為の心理的抵抗がまったくなくて良い
- ウィンドウ制御APIがどんな形になるのか想像がつかないがとても楽しみ