この記事の要点
- PWA(Progressive Web App)は、Web の技術で作りながら、OSごとのアプリに近い使い心地を持たせたアプリです(MDN の定義を要約)。1つのコードで複数の端末に対応しつつ、インストールやオフラインでの動作ができます。
- 中心の部品は2つです。Web アプリマニフェストがアプリの名前・アイコン・表示方法を伝え、Service Worker がネットワークとの間に入ってオフライン動作や通知の受信を支えます。
- インストールできるようにするには https で配信する必要があります(開発時の localhost などは例外)。MDN によると、Service Worker はインストールの必須条件ではありませんが、オフライン対応のために多くの PWA が使います(2026年9月確認)。
- モバイル2級の出題カテゴリ「モバイルインターネットとモバイルコンテンツ技術」(公式の比率は20%)に当たる範囲です。
PWA とは、一言でいうと何なのか?
一言でいうと、「インストールできて、オフラインでも動く Webアプリ」です。MDN は PWA を、Web プラットフォームの技術で作られながら、OSごとのアプリのような使い心地を提供するアプリと説明しています。Web サイトのように1つのコードで複数の端末で動き、アプリのように端末にインストールでき、オフラインやバックグラウンドでも動作できる、という両方の性格を持ちます。
つまり PWA は、ネイティブアプリの一種ではなく Webアプリの発展形です。ストアの外枠を持たず、ブラウザの技術の範囲で「アプリらしさ」を足していきます。3つの方式の違いはネイティブ・Web・ハイブリッドアプリの違いで比べています。
Service Worker とマニフェストは、それぞれ何をするのか?
PWA を支える2つの部品の役割を比べます。
| 項目 | Web アプリマニフェスト | Service Worker |
|---|---|---|
| 正体 | アプリの情報を書いた JSON のファイル | ページとは別に動く JavaScript のファイル |
| 主な役割 | 名前・アイコン・起動する URL・表示方法を伝える | Web アプリ・ブラウザ・ネットワークの間で要求を仲介する |
| 代表的な項目・機能 | name、short_name、icons、start_url、display、scope | キャッシュを使ったオフライン動作、プッシュ通知の受信、バックグラウンドでの同期 |
| 制約 | 項目の要求はブラウザによって異なる | 画面(DOM)に直接触れない。https でしか動かない(localhost を除く) |
← 表は横にスクロールできます →
Service Worker には決まった流れ(ライフサイクル)があります。MDN の説明を要約すると、次の順に進みます。
Service Worker は、どんな順で有効になるのか?
ページから登録された Service Worker は、次の段階を経て働き始めます。
- ダウンロード:Service Worker が管理するサイトに初めてアクセスしたときに、ファイルが読み込まれる。
- インストール:新しいか、内容が更新されていれば、インストールを試みる。オフライン用のファイルをキャッシュに入れる処理はこの段階で行うことが多い。
- 有効化:インストールに成功すると有効になる。古い版が動いている間は新しい版は待機し、古い版を使うページがなくなってから有効になる。
- 要求の仲介:有効になった後は、ページからの要求を受け取り、キャッシュから返すか、ネットワークに取りに行くかを決められる。
マニフェストの display では、起動したときの見え方を決めます。MDN によると、fullscreen はブラウザの表示を隠して画面全体を使い、standalone はアドレスバーなどを出さずに独立したアプリのように開き(ステータスバーなどは残りうる)、minimal-ui は戻る・再読み込みなど最小限の操作を残し、browser は通常のブラウザのタブで開きます。指定がなければ browser です。
PWA にできること・できないことは何か?
できることと制約を並べます。対応の範囲はブラウザとOSによって異なり、変わり続けている点に注意してください。
| 観点 | できること | 制約・注意点 |
|---|---|---|
| インストール | ホーム画面などに追加し、アプリのように起動できる | https での配信が必要。求められる項目はブラウザで異なる |
| オフライン | Service Worker とキャッシュで、通信がなくても表示できる | キャッシュしていない情報は取得できない |
| 通知 | Push API などでプッシュ通知を受け取れる | iOS・iPadOS では 16.4 から、ホーム画面に追加した Webアプリが対象 |
| 配布と更新 | URL で公開でき、サーバの更新がそのまま反映される | ストアに並ぶとは限らないため、見つけてもらう工夫が要る |
| 端末機能 | ブラウザが公開する API の範囲で使える | OS のすべての機能に触れられるわけではない |
← 表は横にスクロールできます →
WebKit は2023年2月、iOS・iPadOS 16.4 で、ホーム画面に追加した Webアプリが Push API・Notifications API・Service Worker を組み合わせて Web プッシュを使えるようにすると発表しました。通知の全体の流れはプッシュ通知の仕組みで扱います。PWA の読み込みを速くする通信の話はHTTP/2とHTTP/3の違いへ。
モバイル2級では、どの範囲で、どう問われそうか?
MCPC の公式ページの図では、モバイルシステム技術検定 2級(100問・100分・4者択一)の出題カテゴリの一つ「モバイルインターネットとモバイルコンテンツ技術」の比率が20%と示されています(2026年9月27日確認)。当サイトでは、公式テキスト『モバイルシステム技術テキスト 第11版』の第9章「モバイルインターネットとコンテンツ技術」がこの範囲に当たると推定しています(章名からの当サイトの判断で、公式の対応表ではありません)。
4択での問われ方は、次のような型が考えられます。出題頻度の公式データはありません。
- 部品の役割:Service Worker とマニフェストの説明を入れ替えた選択肢から、正しいものを選ばせる。
- 前提条件:https での配信が必要なことを問う。
- 表示方法:display の値と見え方の組合せを問う。
- ネイティブとの違い:配布の経路や端末機能の範囲の違いを問う。
試験全体の範囲はモバイルシステム技術検定2級とはで整理しています。
どこで取り違えやすいのか?
部品の名前を見たら「ファイルの中身は設定か、動くプログラムか」を先に決めてください。
| 取り違え | 正しい考え方 | 確認する問い |
|---|---|---|
| マニフェストがオフライン動作を担う | オフライン動作は Service Worker とキャッシュ。マニフェストは情報を伝える設定 | 設定のファイルか、動くスクリプトか |
| Service Worker は http でも動く | https でしか動かない(開発時の localhost を除く) | 配信は https か |
| Service Worker が画面を書き換える | Service Worker は DOM に直接触れない | 画面の操作か、通信の仲介か |
| PWA はストアの審査を必ず受ける | PWA は Webアプリの発展形で、URL で公開できる | 配布の経路はどこか |
| standalone はブラウザのタブで開く | タブで開くのは browser。standalone はアドレスバーのない独立した表示 | display の値はどれか |
← 表は横にスクロールできます →
確認問題1:Service Worker の説明を選べるか?
PWA で使われる Service Worker の説明として、最も適切なものはどれか。
- アプリの名前やアイコン、起動する URL などの情報を書いた JSON 形式の設定ファイル
- Web ページの文書構造(DOM)を直接書き換えて、画面の表示を切り替える専用の部品
- Web アプリとネットワークの間で要求を仲介し、キャッシュを使ったオフライン動作を支えるスクリプト
- 端末のOSに組み込まれた、Web ページを表示するためだけの部品で、ブラウザの機能は持たないもの
正解:3。MDN は Service Worker を、Web アプリ・ブラウザ・ネットワークの間でプロキシのように働く JavaScript のファイルと説明し、オフライン動作やプッシュ通知、バックグラウンドでの同期に使われるとしています。
1は Web アプリマニフェストの説明です。2は誤りで、Service Worker は DOM に直接触れられません。4はアプリの中に Web ページを表示する WebView の説明に近く、Service Worker ではありません。
確認問題2:display の値を選べるか?
次の文の空欄に入る語句として、最も適切なものはどれか。
「Web アプリマニフェストの display に( )を指定すると、アドレスバーなどのブラウザの表示を出さずに、独立したアプリのような見た目で開く。端末のステータスバーなどは表示されることがある。」
- browser
- minimal-ui
- fullscreen
- standalone
正解:4。MDN によると、standalone は独立したネイティブアプリのような見た目で開き、URL バーなどは出さない一方、ステータスバーなどは残ることがあります。
1は通常のブラウザのタブや新しいウィンドウで開く値で、指定がないときの既定値です。2は戻る・再読み込みなど最小限の操作を残す値です。3はブラウザの表示を隠して画面全体を使う値で、ステータスバーなどを残す説明とは合いません。
確認問題3:PWA の前提条件の誤りを見抜けるか?
PWA に関する記述として、最も不適切なものはどれか。
- Service Worker は、https でない通常の Web サイトでもそのまま登録して使える
- PWA は Web の技術で作られ、1つのコードで複数の種類の端末に対応させることができる
- Web アプリマニフェストには、アプリの名前やアイコン、起動する URL などを記述する
- iOS・iPadOS 16.4 からは、ホーム画面に追加した Webアプリで Web プッシュが使える
正解:1。MDN によると、Service Worker は https でしか動きません(開発時の localhost などを除く)。https でない通常の Web サイトでもそのまま使えるとする記述は不適切です。
2は MDN の PWA の説明どおりで適切です。3はマニフェストの役割として適切です。4は WebKit が2023年2月に発表した内容どおりで適切です。
同じ「モバイルインターネットとモバイルコンテンツ技術」の問題を本番と同じ4択で試すなら、登録不要のモバイル2級の無料お試し20問で解説まで確認できます。
よくある質問
Service Worker がないと PWA ではないのですか?
MDN によると、Service Worker はインストールできるようにするための必須条件ではありません。ただし、オフラインでの動作や通知の受信には Service Worker が必要になるため、多くの PWA が使っています。
Web アプリマニフェストは確定した仕様ですか?
W3C の Web Application Manifest は、2026年8月の時点で Working Draft(作業草案)です。仕様は安定しておらず変わりうると明記されています。細かな項目名よりも「名前・アイコン・起動 URL・表示方法を伝えるファイル」という役割を押さえてください。
PWA とハイブリッドアプリは何が違いますか?
ハイブリッドアプリはネイティブアプリの外枠の中で Web の画面を動かし、ストアから配るのが基本です。PWA は外枠を持たない Webアプリの発展形で、URL で公開できます。どちらも Web の技術を使う点は共通です。
出典・参考
- [1]MCPC モバイルシステム技術検定[2級]CBT方式(出題カテゴリの図・形式)確認 2026-09-27
- [2]MCPC 検定テキスト(モバイルシステム技術テキスト 第11版)確認 2026-09-27
- [3]MDN: Progressive web apps 確認 2026-09-27
- [4]MDN: Making PWAs installable 確認 2026-09-27
- [5]MDN: Service Worker API 確認 2026-09-27
- [6]MDN: display(Web アプリマニフェスト)確認 2026-09-27
- [7]W3C: Web Application Manifest(Working Draft)確認 2026-09-27
- [8]WebKit: Web Push for Web Apps on iOS and iPadOS(2023年2月)確認 2026-09-27
本番と同じペースで腕試し
記事の次は、本番形式の問題で。
公式の出題カテゴリの比率どおりに組んだ無料お試しを、登録不要・カード不要で解けます。続きの模試と章別ドリルは買い切りで、月額はかかりません。
あわせて読みたい
当サイトは、モバイルコンピューティング推進コンソーシアム(MCPC)とは関係のない個人が運営する非公式の学習教材です。掲載している問題はすべて当サイトのオリジナルで、実際の試験問題・過去問題・再現問題ではありません。試験の日程・受検料・出題範囲は公式サイト(https://www.mcpc-jp.org/license/ )で必ず確認してください。合格を保証するものではありません。合格の目安は当サイトの推定です。技術・制度の記述は「最終確認日」時点のものです。