今月始めにポーランドのクラコウで行われたGoogle Developer Daysで様々なPWAやモバイル開発についてのプレゼンがありました。
まだ動画は見ている途中なのですが、今回の記事では”What's Next for the Web”と題されたPWAで今後使えるようになる機能やAPIについてのプレゼンについて解説します。
このプレゼンで紹介されている機能やAPIはほとんどAndroidのChromeに関してのものなので、Safariではまだ実装される予定の無いものも多くあります。
フルスクリーンPWA
App Manifestの設定を変更することで、PWAをネイティブアプリのように表示させる事ができます。
Web Share API
これまでアプリ毎にSNSにシェアするボタンが実装されていて、シェアしたいSNSが入っていないこともありました。Web
Share APIを使うことでネイティブアプリの様にシェアのダイアログを表示させる事ができます。
Web Push Notifications
プッシュ通知はこれまでAndroidでは使えましたが、macOSでも通知できる様になりました。
iOSのスマホやタブレットで使えるようになるのは近いのかな。
Navigation Preload
Servic Workerの入っているPWAのサイトを最初に訪れた場合Service Workerのブートした後にタブなどのナビゲーションがロードされます。
Service Workerのブートには時間がかかることがあるためTTL(Time To Live: サイトが表示されて使えるようになるまでの時間)が1秒程度と長くなってしまうことがあります。
Navigation PreloadはService
Workerのブートとタブなどのナビゲーションをロードを同じタイミングで始めることでTTLを短くできるような実験的な機能になります。
One-tap Sign-up on Mobile
PWA内のログインにはSNSログインなどを使ってもどうしても数ステップかかってしまうものでした。ユーザーIDとパスワードを入力する場合はらに数ステップ増えます。
One-tap Sign-upを使うことで、既にスマホでログインしているgmailのアカウントを使ってタップ１回だけでログインできるようになります。
Storage Estimation
このAPIを使うことでPWAがどれくらいストレージの容量を使っていて、全体のストレージがどれくらいあるか見ることができます。
Media関連のAPI
Image Capture API
スマホのカメラのズームをコントロールできるAPIです。
Shape Detection API
スマホのカメラを通じて顔や文字やバーコードなどをリアルタイムに認識できるようになるAPIです。
Media Session API
PWAで再生中の曲や動画をスマホのメディア通知のコントローラからコントロールできるようになるAPIです。
WebVR
PWA内でJavascriptだけを使ってVRを再生する事のできるようになります。
パフォーマンス周りのAPI
Network Information API
リアルタイムのネットワークの情報を取得することのできるAPIです。
ユーザーが接続しているネットワークの速度が遅い場合は解像度の低い画層を転送したりなどネットワークの状態に応じてPWAの挙動を変えることができるようになります。
Performance API
Navigation Timing API
ページナビゲーションに関する様々な情報を取得できるAPIです。ページの読み込みにかかる時間などが計測できます。
Paint Timing API
各スマホユーザーが最初のページ描写をどの順番でやっていてどれくらい時間がかかっているかを見ることができます。
Client Hints
PWAが動作しているスマホのメモリ容量を取得できるAPIです。
メモリの少ないスマホには軽いページを提供するなどページの内容を変更する事ができるようになります。
Hardware関係のAPI
Web Bluetooth API
PWAからスマホのBluetoothに接続して、近くのBluetoothデバイスをコントロールできるようになります。
プレゼンの動画内ではLEDで色の変わるBluetoothキャンドルをPWAでコントロールしているデモが見れます。
Web USB
WebブラウザからUSBデバイスできるようになるAPIです。
スマホにはUSBデバイスをつなげることはあまりないので、あまり意味がないのかも…
他にもPWA現状を紹介した”Progressive Web Apps: What, Why, and How?”やPWAにAMPを実装する”PWA + AMP =
Easy for Users and Developers Alike”など面白うそうな動画もあるので順次紹介していきます。