デスクトップPWAを使ってみた
先日開催されたGoogle I/O ’18のビデオをいろいろ見てますが、ひとつ気になったのはデスクトップPWAというキーワード。
モバイル用に作られたPWAがPCブラウザでも利用される例が増えているとのこと。
このセッションではスタバのPWAが紹介されています。昨年リリースしたスタバのPWAはかなり使われていて、現在でもPWAからの注文は毎週12%ずつアップしているとの事。
またこのPWAはPCブラウザからも使うことができ、PCからの注文も多く入っているとのこと。
Spotify PWAのデモはChrome OS上で行われinstall appアラートからインストールが行われ、一瞬でアプリのトレイにSpotify PWAが追加されました。
ChromeブラウザがPWA対応に
先日リリースされたChrome67からデスクトップPWAのサポートが強化されました。
追加されたデスクトップPWA周りの機能は以下
- app window内でアドレスバーやタブ無しでPWAが動作
- Googleが定めるPWAの条件を満たしているものデスクトップにアイコンをインストール可能。ただしAndroidデバイスの様にインストールを促すバナーは表示されず、インストールバナーはページ内に用意する必要あり。
デスクトップPWAをChromeで動かしてみよう
以下の手順でデスクトップPWAを動かしてみることができます。
- 最新のChrome67をインストール
- インストール後chrome://flagsをアドレスバーに入れて以下の設定を”Enabled”にしてChromeを再起動
Enable PWA full code cache, Desktop PWAs, Desktop PWAs Link Capturing, App Banners
値を変更するとChromeを再起動するように促されるので、再起動してください。
この後以下のサイトに行ってみてください。
これはUberのPWA版ですが、ログイン後以下の様な画面が表示されてデスクトップにインストールするように促されます。
“追加”をクリックするとインストール確認のアラートが表示され、デスクトップにアイコンが表示されます。
以下のサイトでも同様にインストール可能ですが、バナーは表示されず。ブックマークの際に”Install Twitter Lite..”の様に表示されます。
- https://mobile.twitter.com
- http://app.ft.com
- https://tinder.com
- https://app.starbucks.com
- https://r.nikkei.com
PWAの条件を満たしてないサイトでは同じところに”Create shortcut”と表示されるだけです。
インストール後デスクトップ上にはmanifest.jsonで指定したアイコンが使われ各PWAへのリンクが作られます。
Twitter Liteをデスクトップから立ち上げると以下の様にアドレスバーもタブもない状態で立ち上がります。
デスクトップPWAのパフォーマンス
Twitter Liteをデスクトップから立ち上げてみると分かるのですが、かなりさくっと立ち上がってくれます。
https://twitter.com/が通常のPC版のURLですが、PWA版はhttps://mobile.twitter.comが立ち上がるのでページロードの最適化が行われています。
実際にChrome DevToolsで測定してみると以下の様な結果になりました。
下に出てくるLoadというのはページが完全に読み込まれたときに測定されるのですが、通常のPC版では3.14秒でPWA版は583ミリ秒とPWA版が5倍以上速い数字が出ています。
これは何度かリロードをした後の数字なのでキャッシュなどが効いている状態で測定しています。
これらの数字の詳細は以下のGoogleの解説に詳しいです。
こんなに速いのならデスクトップでもPWA版使ったほうが良くなりますね。今後のデスクトップPWAの展開が楽しみです。