これからPWAで使えるようになるAPI

今月始めにポーランドのクラコウで行われたGoogle Developer Daysで様々なPWAやモバイル開発についてのプレゼンがありました。

[プレゼンのYoutubeリンク](https://www.youtube.com/watch?time_continue=283&v=qnI2S_9TN-8)

まだ動画は見ている途中なのですが、今回の記事では”What's Next for the Web”と題されたPWAで今後使えるようになる機能やAPIについてのプレゼンについて解説します。

このプレゼンで紹介されている機能やAPIはほとんどAndroidのChromeに関してのものなので、Safariではまだ実装される予定の無いものも多くあります。

[フルスクリーンPWA](https://developers.google.com/web/fundamentals/native-hardware/fullscreen/#games)
App Manifestの設定を変更することで、PWAをネイティブアプリのように表示させる事ができます。

[Web Share API](https://developers.google.com/web/updates/2016/10/navigator-share)
これまでアプリ毎にSNSにシェアするボタンが実装されていて、シェアしたいSNSが入っていないこともありました。Web
Share APIを使うことでネイティブアプリの様にシェアのダイアログを表示させる事ができます。

**Web Push Notifications**
プッシュ通知はこれまでAndroidでは使えましたが、[macOSでも](http://bit.ly/macos-notifications)通知できる様になりました。

iOSのスマホやタブレットで使えるようになるのは近いのかな。

[Navigation Preload](https://developers.google.com/web/updates/2017/02/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](http://cli.re/smart-lock-web)
PWA内のログインにはSNSログインなどを使ってもどうしても数ステップかかってしまうものでした。ユーザーIDとパスワードを入力する場合はらに数ステップ増えます。

One-tap Sign-upを使うことで、既にスマホでログインしているgmailのアカウントを使ってタップ１回だけでログインできるようになります。

[Storage Estimation](http://bit.ly/storage-estimation)
このAPIを使うことでPWAがどれくらいストレージの容量を使っていて、全体のストレージがどれくらいあるか見ることができます。

**Media関連のAPI**

[Image Capture API](http://bit.ly/image-capture)
スマホのカメラのズームをコントロールできるAPIです。

[Shape Detection API](https://github.com/WICG/shape-detection-api)
スマホのカメラを通じて顔や文字やバーコードなどをリアルタイムに認識できるようになるAPIです。

[Media Session API](http://bit.ly/media-session-api)
PWAで再生中の曲や動画をスマホのメディア通知のコントローラからコントロールできるようになるAPIです。

[WebVR](https://w3c.github.io/webvr/spec/latest/)
PWA内でJavascriptだけを使ってVRを再生する事のできるようになります。

**パフォーマンス周りのAPI**

[Network Information　API](http://wicg.github.io/netinfo/)
リアルタイムのネットワークの情報を取得することのできるAPIです。

ユーザーが接続しているネットワークの速度が遅い場合は解像度の低い画層を転送したりなどネットワークの状態に応じてPWAの挙動を変えることができるようになります。

[Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
**Navigation Timing API**
ページナビゲーションに関する様々な情報を取得できるAPIです。ページの読み込みにかかる時間などが計測できます。

**Paint Timing API**
各スマホユーザーが最初のページ描写をどの順番でやっていてどれくらい時間がかかっているかを見ることができます。

[Client Hints](http://httpwg.org/http-extensions/client-hints.html)
PWAが動作しているスマホのメモリ容量を取得できるAPIです。

メモリの少ないスマホには軽いページを提供するなどページの内容を変更する事ができるようになります。

**Hardware関係のAPI**

[Web Bluetooth API](http://bit.ly/web-bluetooth-api)
PWAからスマホのBluetoothに接続して、近くのBluetoothデバイスをコントロールできるようになります。

プレゼンの動画内ではLEDで色の変わるBluetoothキャンドルをPWAでコントロールしているデモが見れます。

[Web USB](http://bit.ly/web-usb)
WebブラウザからUSBデバイスできるようになるAPIです。

スマホにはUSBデバイスをつなげることはあまりないので、あまり意味がないのかも…

他にもPWA現状を紹介した”[Progressive Web Apps: What, Why, and How?](https://www.youtube.com/watch?v=eodArdGRIVQ)”やPWAにAMPを実装する”[PWA + AMP =
Easy for Users and Developers Alike](https://www.youtube.com/watch?v=Y3M9NjUGL7c)”など面白うそうな動画もあるので順次紹介していきます。

[Mediumにある元の記事]
(https://medium.com/@takeshiamano/%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89pwa%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8Bapi-8af11d5ba739)