業務アプリ・DX
PWAとは？ ホーム画面から開けるWebアプリ
PWAは、ブラウザで開くWebアプリをスマホやパソコンにアプリのようにインストールできるようにしたものです。App StoreやGoogle Playを通さずにURLで配れて、iPhoneでもiOS 16.4以降ならホーム画面に追加したPWAへ通知を送れます。
この記事でわかること
- PWA（プログレッシブウェブアプリ）は、インストールできるように作ったWebアプリです。ホーム画面にアイコンが置かれ、ブラウザの枠のない画面で開きます。
- iPhoneはiOS 26から、どのサイトもホーム画面からアプリのような画面で開けるようになりました。ただ、通知やオフラインで開ける機能は、作る側が用意しないと使えません。
- iPhoneへの通知は、iOS 16.4以降でホーム画面に追加したWebアプリなら送れます。利用者が自分でボタンを押して許可する必要があります。
- ストアの審査と登録料が要らないかわりに、ストアで検索して見つけてもらうことはできません。使う人にURLを直接渡せる用途に向いています。
- 大事な記録は端末の中だけに置かず、サーバーに保存する作りにします。
PWAは「インストールできるWebアプリ」
Webアプリは、スマホやパソコンのブラウザでURLを開いて使うアプリです。予約フォームや社内の日報のように、画面で入力して保存できるものを指します。PWAはそのWebアプリを端末にインストールできるように作ったものです。
MDN（Mozillaが公開しているWeb技術の開発者向け資料）は、PWAをインストールするとアイコンが端末に置かれ、ほかのアプリと同じように起動でき、ブラウザの画面ではなく独立したアプリとして開けると説明しています。アドレスバーや戻るボタンのない画面で開くので、見た目はストアから入れたアプリに近くなります。
中身はWebの技術で動いているので、画面を直したときはサーバー側の更新だけで全員の画面が新しくなります。ストアに出すアプリのように、修正のたびに審査へ出す手順はありません。
ホーム画面に追加すると、何が変わるのか
iPhoneのSafariには以前から「ホーム画面に追加」があります。MDNは、普通のホームページを追加した場合はブラウザでそのページを開くアイコンができるだけで、PWAとして作られたサイトを追加した場合にアプリとしてインストールされると説明しています。
ただしiPhoneではこの違いが小さくなりました。AppleのSafari 26のリリースノートには、iOS・iPadOSでどのWebサイトでもWebアプリにできるようになったと書かれています。iOS 26以降は、普通のホームページでもホーム画面から開くとブラウザの枠のない画面にできます。
それでも、見た目がアプリのようになることと、アプリとして使えることは別です。後で説明する通知や電波のない場所で開ける機能は、作る側がPWAとしての準備をしておかないと動きません。今のホームページに「ホーム画面に追加してください」と案内するだけでは、通知は送れません。
iPhone・iPad
Safariの「ホーム画面に追加」でインストールします。iOS・iPadOS 16.4以降は、Safari以外の対応するブラウザからも追加できます（MDN）。消すときはアイコンを長押ししてホーム画面から削除します。
Android
Chromeなどのブラウザのメニューにあるインストールの項目から入れます。入れたあとは、ほかのアプリと同じようにアイコンから開きます。
パソコン
ChromeやEdgeでは、PWAのページを開くとアドレスバーにインストールのボタンが出ます。
PWAにするために、作る側が用意するもの
MDNは、インストールできるようにする最低限の条件として、アプリの名前やアイコンを書いた設定ファイル（Webアプリマニフェスト）を置くことと、HTTPS（鍵マークの付く通信）で公開することを挙げています。
電波の届かない場所でも画面を開けるようにするには、サービスワーカーという仕組みを加え、画面の部品を端末に保存しておきます。インストールの条件には含まれないので、PWAならオフラインで必ず動くというわけではありません。オフラインで何をさせたいかを決めて作ります。
iPhoneで通知を送るための条件
「Webアプリだと通知が送れない」と聞いたことがあるかもしれません。Appleの開発者向け資料では、iOS 16.4以降、ホーム画面に追加したWebアプリへ通知（Web Push）を送れるとしています。通知を送るためにApple Developer Programへ登録する必要もありません。作る側は、通知を受け取るためのサービスワーカーと、通知を送り出すサーバーの仕組みを用意します。
ただし、条件があります。Appleの資料がiPhoneで通知の対象にしているのは、ホーム画面に追加したWebアプリです。また、通知の許可は利用者がボタンを押すなどの操作をしたときに求める決まりです。最初の案内で「ホーム画面に追加して、通知を許可するボタンを押す」という2つの手順を利用者にやってもらう必要があります。
通知が届く人の割合は、この2つの手順をやってもらえたかで決まります。紙やメールの案内をしばらく並行する前提で考えておくと安心です。
知っておきたい、PWAの注意点
手軽に配れる一方で、ストアアプリとは違う性質があります。作り始める前に、次の4つを確かめておきます。
端末に置いたデータが消えることがある
MDNによると、Safariはトラッキング防止が有効なとき、ブラウザを使った直近7日間に一度も操作のなかったサイトについて、そのサイトが端末に保存したデータを削除します。端末の容量が足りなくなったときも、ブラウザが古いデータから消すことがあります。入力した記録はサーバーに保存し、端末には一時的な控えだけを置く作りにします。
ブラウザごとに別のアプリになる
同じPWAをChromeとEdgeの両方から入れると、2つの別々のアプリとして扱われ、データは共有されません（MDN）。社内で使うなら、どのブラウザから入れるかを最初の案内で決めておきます。
ストアで見つけてもらえない
App StoreやGoogle Playで検索しても出てきません。知らない人に見つけてもらいたいアプリより、会員・スタッフ・イベントの参加者など、URLやQRコードを直接渡せる相手に向いています。
使える端末機能はブラウザ次第
カメラや位置情報などの端末機能がどこまで使えるかは、端末とブラウザの組み合わせで変わります。使いたい機能が決まっているなら、対象の端末で動くかを作る前に試します。
PWAとストアアプリ、どちらを選ぶか
ストアに出すアプリには、Appleの年会費やストアの審査があります。費用の内訳は札幌でアプリを作るといくらかかるのかで整理しています。また、Appleの審査ガイドラインは、Webサイトを単に包み直しただけのアプリはApp Storeにふさわしくないとしています。「今のWebアプリをストアに出したい」だけなら、PWAのほうが素直な選び方になることがあります。
次は当社が想定した向き不向きの例で、導入事例ではありません。
PWAが向いている例
スタッフが使う日報や在庫の入力、会員向けのお知らせと予約、教室の出欠連絡、イベント当日の受付や案内。使う人が決まっていて、URLやQRコードで配れるもの。
ストアアプリを考える例
ストアで検索して見つけてもらいたい、端末の機能を細かく使いたい、ホーム画面への追加を利用者にお願いするのが難しい。ストアに載っていること自体が信頼につながる場合もあります。
迷ったときの進め方
まずPWAで作って使ってもらい、利用者の反応や通知の届き方を見てから、ストアアプリにするかを決める方法もあります。画面の考え方やサーバー側の仕組みは、あとからストアアプリを作るときにも生かせることが多いです。
自分で試してみるなら
よく使うサイトを、iPhoneなら共有ボタンの「ホーム画面に追加」、Androidならブラウザのメニューから追加してみてください。追加したアイコンから開くと、ブラウザで開いたときとの違いが分かります。
触ってみると、「自分のアプリもこの形で足りそうか」がつかみやすくなります。足りるかどうか迷う点が、通知なのか、見つけてもらう方法なのか、端末の機能なのかが分かれば、相談するときもその点から話を始められます。
作りたいアプリがPWAで足りるか、一緒に確かめます。
誰に使ってもらうか、どんな場面で開くか、通知が要るか。この3つが分かれば、PWAで始めるか、ストアに出すアプリにするかを一緒に考えられます。仕様書や画面の案がなくても大丈夫です。必要な機能を整理しながら、概算の費用と期間もお伝えします。