PWAの技術要素について

PWA（Progressive Web App）という言葉が良く聞かれるようになってきました。今回はこのPWA全般と、各技術要素について紹介します。

PWAとは

PWAはその名の通り、Web技術の上に構築されています。PWAという技術名がある訳ではなく、幾つかの技術の組み合わせを総称してPWAと言います。

Service Worker

Service Workerはバックグラウンドで動作するJavaScriptの技術です。DOM操作はできないので、重たい処理をバックグラウンドで行ったりします。特に大事なのはキャッシュ用のリソースを取得したり、プッシュ通知を受け取る際に使われると言うことです。

リモートのリソースに対する処理において、オンライン/オフラインの判定によって処理を変えたり、同期処理にも使えます。Service WorkerはXMLHTTPRequestではなく、Fetchしか使えません。

通知

スマートフォンアプリでよく見られるプッシュ通知機能です。PWAでは二つの技術が用意されています。

Push API

Push APIはローカル通知のような機能で、クライアントサイドのJavaScriptだけで実装できます。簡単に実装できるのが魅力ですが、Webページが開かれていないと使えません。ユーザが他のタブを見ている時に新しい通知が来たことを促すといった使い方に向いています。

Notification API

アプリと同じようにリモートから送信できるプッシュ通知機能です。Service Workerを使って実装する必要があります。そのため、モダンなWebブラウザでないと使えません。

ストレージ

データを蓄積しておくストレージは主に2種類あります。

localStorage/sessionStorage

KVSとして使えます。同期型にデータを取得、更新できるので手軽です。ただし5MBくらいまでしかデータを保存できないので注意が必要です。また、保存できるのはテキスト限定で、JSONなどは文字列に変換してから保存する必要があります。

localStorageは恒久的、sessionStorageはそのセッション中だけ使えるストレージです。Cookieなどのように有効期限がないのが魅力でしょう。

IndexedDB

基本はKVSですが、インデックスを設けたりできるのでlocalStorageに比べると多少高機能です。JSONをそのまま保存できます。ただし検索したりする機能はなく、すべてのデータを取り出してフィルタする必要があります。

localStorageに比べると大きなサイズで利用できます。

HTTPS

PWAはHTTPS（localhostは除く）でしか提供できません。現在、サイトのHTTPS化は必須とも言える状態ですが、PWA化を考える上では必須になります。HTTPS自体、無料で使えるようにもなっています。セキュリティと存在証明と切り離して適用するのが良さそうです。

まとめ

PWAはスマートフォン向けの技術になります。元々ハイブリッドアプリと呼ばれるHTML5とネイティブを合わせた技術がありましたが、HTML5が高機能化するのに伴って、HTML5だけでアプリのような機能が実現できるようになってきたということでしょう。

iOSのSafariがPWA必須技術を幾つも実装していないため、率先して導入する企業は多くありませんが、今後の時流としてはPWA化が必須になってくるでしょう。

Progressive web apps – アプリセンター | MDN