Progressive Web Appsの振り返りとこれから

Progressive Web Apps（以下、PWA）は2018年ごろからホーム画面へのインストール機能やキャッシュ戦略等の技術視点でエンジニアの間で話題に挙がるようになりました。現在ではWebパフォーマンス、ユーザビリティ向上、PoC（実証実験）といったビジネス視点でも注目されており、多くのWeb実装にPWAが取り入れられています。

今回の記事では、国内のPWAの動向を振り返り、改めてPWA開発のスタンダードとこれからのPWAについてまとめます。

日本国内でのPWAの動向

2015年にPWAという名称が生まれ、Google Chromeを始めとした各ブラウザが順次PWAに対応していきます。2018年にiOSのSafariがService Workerに対応したことををきっかけに国内でもPWAが注目され始めました。筆者もその頃からPWAに興味を持ち、2019年2月に立ち上がったTechコミュニティPWA Nightに参加しています。現在ではPWA Nightの運営メンバーとしてPWAの事例とWebの未来についての勉強会を毎月開催し、PWAの動向を追っています。

初めてPWAが話題に挙がった頃は「Webサイトにスマートフォンアプリの機能を持たせる技術」と紹介されることが多く、PWAとネイティブアプリがよく比較されていましたが、2018〜2019年にはそういった比較ではないWebとしてのPWA導入事例が発表されます。

Google I/O 2018でWebパフォーマンス改善の事例として紹介された「日経電子版」は、いち早くPWAを事業に導入しており、PWA Night vol.2にも登壇していただきました。とくに印象的だったのは、当時すでにネイティブアプリ版がある状況で「ネイティブアプリを置き換えるものではない」とアプリとは別の目標を持って開発していた点です。Webでの展開はリンクのシェアや流入に特化できる強みがあるため、PWAでは新規ユーザー獲得やライトユーザー層向けの幅広い施策が実施でき、一方アプリ版ではコアユーザー層を対象としてそれぞれに特化したアプローチができます。この頃からPWAのWebとしての強みや位置付けが確立されていった印象です。

2020年には国内初のPWAをテーマとしたカンファレンスPWA Night CONFERENCE 2020が開催されます。このカンファレンスで紹介された「こえのブログ」の事例は、Webアプリのパフォーマンス対策に加えて、端末のマイクへアクセスして録音したり、WebAssemblyで録音データの圧縮変換、下書き状態の保存など様々な機能をブラウザ上で完結させており、Webアプリの可能性の広がりを感じる事例となっていました。

2021年にはPOSレジや店舗受付等の業務システムをデスクトップPWAで実装した事例も増え、Webサービスの枠を超えて実務に活用できるPWAや個人開発の便利ツールにも応用されるようになりました。PWA Night CONFERENCE 2021の基調講演では、セッション資料のスライド自体がPWAになっており、新しく実装されたWebHID API（ブラウザと外部端末を接続できる機能）のデモも兼ねてNintendo Switchのコントローラーで登壇中のスライドを操作する様子に会場が盛り上がっていました。

このように、ブラウザから端末の機能へアクセスできるアプリとしての側面だけでなく、Webならではのリーチの長さや気軽にシェアできるPWAのメリットを活かして、より便利なWebを追求する時代になっています。

2022年は、Web開発のデファクトスタンダードとしてPWAの機能が活用され、新たなAPIの対応とともにWebの可能性がさらに広がるだろうと期待しています。

PWA開発のスタンダード

一言でPWA開発と言ってもスマートフォンのホーム画面へインストールできるものやオフライン時に閲覧・操作できることを目的としたもの、端末のカメラや外部端末と接続して操作するものなど様々です。Progressiveという名の通り、使いたい機能だけを段階的に実装できるのが特徴で、必ずしもPWAのすべての機能を使う必要はありません。これらの機能の中でも最も採用されているのはホーム画面へのインストールで、この機能だけであればフレームワークやプラグインを使うことで簡単に設定できます。

Webページの品質解析ツールであるLighthouse（Google ChromeのDevToolsでも利用可能）のPWA達成基準は、manifestファイルとService Workerがインストールされているかどうかでチェックしています。より詳細な内容はProgressive Web App checklistにまとめられています。

ホーム画面へのインストール設定

コンポーネント開発が主流になっている環境では、Next.js（Reactベース）やNuxt.js（Vue.jsベース）等のJavaScriptフレームワークがPWAに対応しており、プラグイン導入とconfigファイルの設定で手間をかけずに実装できます。configファイルからカスタマイズも可能です。

CMS開発であれば、WordPressにPWAプラグインがいくつか用意されており、管理画面から設定できます。

スプラッシュ画面の実装

スマートフォンのホーム画面からPWA起動時に表示されるスプラッシュ画面は、AndroidとiOSで実装方法に違いがあり、とくにiOSでは画面サイズに応じた画像を何種類も用意することになります。PWACompatはアイコン画像とタイトルからスプラッシュ画面用の画像を自動生成してくれるため、こちらの導入もおすすめです。

キャッシュの取り扱いはWorkbox

キャッシュを制御するためにWorkboxを導入すると良いでしょう。Service Workerでキャッシュをコントロールするための処理を短いコードで実装できます。細かいカスタマイズになるとコードも複雑になりますが、最低限ページをキャッシュするだけで良いのであれば数行で実装できます。

プッシュ通知

2022年1月現在ではiOSがプッシュ通知に対応していません。現状ではAndroidのみに限定するか、デスクトップPWAでの利用となります。OneSignalやFirebaseのような外部サービスを利用した実装が主流となっています。

PWAの普及とこれから

ここ数年で国内でのPWAの導入事例も多く公開され、最低限の実装方法も確立していることから、Webエンジニア・制作会社の間ではすでに普及したと言っても間違いではないでしょう。

一方、Webを利用しているユーザー側にはまだまだ普及しているとはいえません。スマートフォンユーザーの過半数を占めるiPhoneでは画面下部のインストール案内（Mini-infobar）が表示されないため、PWAのインストール方法を知らない人も多いと思われます。

また、Androidを使ったことのあるユーザーならPWAという名称は知らずともMini-infobarを見てブラウザからWebアプリをインストールできると知っている人もいるでしょう。しかし、広告と勘違いするケースも多く、いきなり「インストール」と表示されると不審に思いキャンセルするという話も聞きます。

ユーザーへのPWA普及のためには、エンジニアや制作会社等、開発側からの働きかけが重要だと思っています。使い方やインストール方法を説明するページを用意して、インストールのハードルを下げる必要があるでしょう。さらに、その実装面ではBeforeInstallPromptでデフォルトのMini-infobarを出さないようにしておき、ユーザーの任意のタイミングでインストール画面を表示させるのもおすすめです。また、まだ実験段階のようですが、PWAのインストール確認画面にスクリーンショットと説明文を載せて、ストアのようなUIでユーザーへわかりやすく見せる機能も検討されています。導入してみたい機能ですね。詳しくはChrome Developersのサイトで解説されています。

このように開発側とユーザー側の普及率に差がある状況ではありますが、今後もより便利なWebを追求して、ユーザーが意識せずに操作できるように実装していくことでPWAの機能が当たり前に使われるような未来になると筆者は予想しています。

Webで新しい体験を可能にするためのProjectFuguという取り組みも行われており、Webとネイティブアプリのギャップを埋める各種APIの開発が進められています。APIの開発状況はFugu API Trackerで確認できます。

そして対応時期は不明ですが、WebKitのPush API対応への取り組みも動いているようです（2022年中に実装されない可能性も十分にあります⁠）⁠。iOSでPWAのプッシュ通知ができるようになると、ビジネス面でのPWA導入がより積極的になっていくことが予想されます。こちらの動向も追っていきましょう。

より良いWebをつくろう

PWA Nightは2022年2月で3周年を迎えます。PWAの事例や情報が集まる場所として今後も活動していきますので、ぜひ遊びにきてください。また継続的な参加も嬉しいです。一緒にPWAを盛り上げていきましょう。