PWAを作ってみたい

はじめに

最近、Web業界でPWA(Progressive Web Apps)というキーワードをよく耳にするようになりました。
直近ですとGoogle Play Storeで配信できるようになったことでも話題になりましたね。
Google Play Store now open for Progressive Web Apps
今後Webを武器にフリーランスとして戦っていく中で、学んでおくべき技術の一つであることは間違いありません。
今回はそんなPWAについて、簡単にですがまとめてみたいと思います。

PWAとは

端的に言えば、Webアプリケーションでスマホのネイティブアプリにしかない機能を実現できる技術といえます。
具体的には以下のようなことが実現できるようになるみたいです。
・オフライン時での操作
・全画面表示
・プッシュ通知 …etc
ローカルキャッシュを利用したオフライン機能や、URLバーを隠した全画面表示に、アプリを使ってもらう上で大きなアドバンテージになるプッシュ通知は元来のWebアプリケーションでは実現不可能な機能でした。
PWAは何か新しいものを作るというよりは、既存のアプリケーションに機能追加して更に進化させる意味合いが強いようで、その考えがProgressiveの由来になっているとのこと。

導入事例

以下のサイトがよくまとまっていました。
モバイルWebの高速表示＆アプリライクな操作性を実現する、AMP＆PWA導入サイト事例8選
PWAで何ができる？国内のPWA対応サイト５選を紹介
InstagramやTwitterなどのSNSをはじめ、中には「アイドルマスターシャイニーカラーズ」といったゲームもあるようです。(実際に触ってみましたが、ほとんどネイティブアプリとの違いを感じられず驚きました)

対応状況

Safari(iOS)

以前は未対応だったが、今では以下のような機能も使えるようです(iOS 11.3時点)。
・位置情報
・方位磁石、速度メーター、ジャイロスコープなどのセンサー
・カメラ
・音声出力
・スピーチ
・音声合成
・Apple Pay
・Payment Request APIを使ってApple Payの起動

Android

iOSにできない以下のようなこともできるようです。
・音声認識
・バックグラウンド同期
・プッシュ通知
・Splash screenとデバイスの向きのカスタマイズ
・50MB以上のデータを保存できる
・BLEデバイスからのBluetoothアクセス

おわりに

実際にどういう仕組みで上記の機能を実現しているのか、どうやって実装すればよいのかというところが非常に気になるので、今私が開発しようと思っている「ペットでつながるSNS」をPWAで作ってみようと思います。
現在のプロトタイプはPC版を想定していたので、技術選定からやり直す必要がありそうですが、自分のやりたいことをやることを優先してみたいと思います!