※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
Salesforce Commerce Cloud の Getting Started with PWA Kitを試してみたのですが、改めてPWAとはなんなのか調べてみました!
ちなみにSalesforceブログでもPWAについての記事がありました。こちらの方はよりビジネス視点での説明が詳しくされているようですので、ご興味あればご参照ください。
PWAとは？
PWAとはGoogleが提唱するアークテクチャの一種で、Webアプリでネイティブアプリと同等またはそれ以上のユーザ体験を提供することを目的としています。Chromium(Chromeのベースとなるオープンソースプロジェクト)が積極的に実装を進めています。
ブラウザによっては仕様が違うのでは？と思う方もいらっしゃるかもしれませんが、PWAを実現するための技術は、既にW3Cの規格(Web ApplicationManifest、Service Workers)として定義されているためブラウザ間での互換性は問題ありません！
そもそもサポートしていないというブラウザだったとしても普通のWebアプリとしては動いますのでご安心ください。
下記の図をご覧ください。
縦軸を機能(Capabilities)、横軸をユーザへの到達度(Reach)、としてみたときにネイティブアプリ、Webアプリ、PWAはどこに位置するかを確認していきましょう。
画像出典：https://web.dev/what-are-pwas/
ネイティブアプリ
機能： 高
ユーザへの到達度： 低
実体験で皆さんも感じているとは思いますが、ネイティブアプリでできることはかなり多くあります。
例えば、下記のようなことです。
- ローカルファイルへのアクセス
- USBやBluetooth、シリアル通信でのハードウェアへの接続
- カメラへのアクセス
- 他のアプリ起動中にコントロール（例：曲のコントロール）
- NFCタッチ（例：タッチによる決済）
- プッシュ通知
一方で、AppStoreやGoogle Playからダウンロードするのは面倒なので、ユーザへの到達度は比較的低いです。
リピートユーザだったらいいのですが、Google検索からきた一見さんがいきなりアプリをダウンロードしてくれる事はあまりないかと思います。
Web アプリ
機能： 低
ユーザへの到達度： 高
機能はネイティブアプリに比べると劣ってしまいますが、Google検索やURLから直接飛べるので、ユーザへの到達度は非常に高いです。
PWA
機能： 高
ユーザへの到達度： 高
多くの機能を持ち合わせながら、ユーザへの到達度も高いというネイティブアプリとWebアプリのいいとこ取りです！
こんなことが本当に実現できたら、企業としてはネイティブアプリを開発するコストを削減できますね。
PWAの３つの柱
Googleが提供するWeb開発ガイダンスサイトであるweb.devの記事によると、PWAはこの３つの柱に沿って設計されたWebアプリケーションのことを言います。
Capable (有能であること)
先の図で見た通り、PWAは機能の多さは重要です。
最近のWebアプリでできることはかなり増えてきています。(例:WebGL, WebVR, WebAssembly)
ネイティブアプリでできることは全部できるようにしよう！という事で作られたChromium Projectsの一つであるProject Fugu🐡が提供するトラッカーを見れば、現在のChromiumでの実装状況を確認することができます。
Reliable (信頼できること)
ネイティブアプリを思い出してみてください。一度アプリを立ち上げると、ページ遷移などしても表示速度は非常に早いです。ネットが遅すぎたり、接続されてない時はデータは表示されないことはありますが、ヘッダーやフッターなどは表示されていると思います。またキャッシュされているデータがあったらそれを利用して表示されているかと思います。
オフラインでも動くことはユーザ体験を上げることとしては非常に重要です。
こんな画面はネイティブアプリではみないでしょう。
Installable (インストール可能であること)
ネイティブアプリとWebアプリの違いでよく思い出されるのは、ホーム画面やタスクバーなどにアイコンがあるかどうかだという方も多いと思います。
インストールされたPWAはそれと同様に、アイコンをクリックすることで起動でき、ブラウザのURLを入力するようなタブはなく、スタンドアローンな画面で動くのでその他のサイトに離脱してしまうことはありません。
しかも、manifest.jsonを書くだけで実現できるので非常に簡単にです。
あなたのアプリはPWA?
あなたの作ったWebアプリがPWAなのか確認したいですよね？
web.devのサイトに記載されているチェックリストを確認すればいいんです！
っと言いつつもチェック確認するの面倒ですよね？
そんなあなたにChromeのデベロッパーツールを使って確認できる方法を紹介します！
とっても簡単です。
- Chromeのデベロッパーツールを立ち上げる。
-
Lighthouseタブをクリック。(前はAuditタブだったようです) -
Progressive Web AppとMobileをクリック。 -
Generate Reportをクリック。
試しにwev.devのサイトで出ていたsquoosh.appをチェックしてみたところこんな結果でした。
一部を除いてほとんどクリアですね！
PWAの機能拡張に立ちはだかる壁
悲しいことにPWAが機能拡張には大きな壁があります。なんとそれはiPhoneです！
Appleが提供するiPhoneにデフォルトで使用されるブラウザエンジンのWebkitではなかなかPWAの機能拡張が実装されないんです。(ちなみに、iOS上で動くブラウザは全てWebkitを利用する必要があるので、例えばChrome on iPhoneはWebkitの規格に沿っています。)
PWAといえばPush通知という印象がある方もいらっしゃるかもしれませんが、それも実装されていません。
Webkitの機能リクエストを見てみるとかなり前から要望は上がっているようですね。
→ どうやら iOS 16からサポートしたみたいです。
他にも上記で紹介したProject Fugu トラッカーに挙げられているネイティブアプリとのギャップを埋めるような機能の多くがセキュリティを理由にWebkitでは実装しないことが発表されています。
JS API の Safari & Chrome for iOS 15.4 と Chrome 99 for Android の比較 を見てもiOSには未だ実装されていないAPIが多くあることが確認できます。
でもiPhone以外での実装できてるからいいじゃないの？って思いますよね？
そこで、モバイルのOSの利用状況を確認してみましょう！
日本と韓国と世界のモバイルの利用状況(2020/08~2021/08)
世界のOS使用状況(statcounter)
- Android - 72.73%
- iOS - 26.42%
日本のOS使用状況(statcounter)
- Android - 33.5%
- iOS - 66.33%
韓国のOS使用状況(statcounter)
- Android - 71.94%
- iOS - 26.72%
OS使用状況を見てみると世界では約72%の人が、韓国では約72%の人がAndroidを利用しているのに対し、日本では約34%となっています。
世界と比べると日本ではいかにiPhoneが普及しているかが分かりますね！
iOS上で動くブラウザは全てwebkitを利用しているので、日本で機能拡張されたPWAの体験をできるユーザは比較的低いことになります。
iPhoneでもPWAを選ぶ理由
iPhoneでの機能拡張があまりされないとはいえ、PWAには多くのメリットがあります！
- iOSやAndroidなどのマルチプラットフォームにシングルコードベースで対応できます。
- ServiceWorkerのキャッシュを利用することでで表示速度を上げ、さらにはオフラインでも動きます。
- iOS 11からWeb App Manifestにも対応しており、 “ホーム画面に追加” できるので、スタンドアローンで動作させ離脱を防ぐことが可能です。
参考文献
- What are Progressive Web Apps? - Sam Richard, Pete LePage - web.dev
- Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否 -Bruno Couriol - InfoQ
- Try PWA - 渋田達也 - 株式会社インプレス R&D
- PWA 開発入門 - 柴田文彦 - 株式会社インプレス R&D