PR：この記事にはアフィリエイトリンクが含まれます。
PWA本を探すと、Service Worker、キャッシュ、オフライン対応、ホーム画面へのインストールと、似た用語が次々に出てきます。どこから読むか迷うこともありますよね。開発経験と知りたい範囲を手がかりに、実装へ進みやすい一冊を見つけましょう。
5冊の早見表
| 書籍 | 主な内容 | 読者の目安 |
|---|---|---|
 プログレッシブウェブアプリ PWA開発入門 | 日本語でPWA化、デバッグ、公開、インストール | PWAを初めて実装する人 |
 Beginning Progressive Web App Development | Service Worker、キャッシュ、各種フレームワーク | JavaScript経験のある人 |
 Progressive Web Apps | Manifest、通知、オフライン設計、同期 | 実例を通して機能を学びたい人 |
 Progressive Web Apps with React | React、Webpack、FirebaseでPWAを構築 | Reactで作ってみたい人 |
 Building Progressive Web Apps | キャッシュ戦略、更新、Push、同期 | Service Workerを深く学びたい人 |
Webアプリ開発の基礎から日本語で学ぶなら、『プログレッシブウェブアプリ PWA開発入門』が入り口です。Reactで手を動かしたい人にはReactの本、キャッシュ管理を深く知りたい人には『Building Progressive Web Apps』をおすすめします。
『プログレッシブウェブアプリ PWA開発入門』の参考価格は税込2,530円、『Progressive Web Apps』は39.99米ドルです。どちらも定価の目安で、実売価格は時期や店舗、為替などによって変わります。
紹介する本は2017〜2018年刊行です。基本概念を学ぶには役立ちますが、ブラウザーの対応条件やフレームワークの現行バージョンは、実装時に公式ドキュメントで確かめてください。
PWAの基本
PWAはWebサイトにアプリらしい操作感を加える機能の組み合わせです。ホーム画面から起動し、通信が不安定な場所でも一部の画面を表示できます。
アプリ名やアイコン、起動時の表示方法はWeb App Manifestに記述します。端末に追加した後の見え方を整える役割で、通信断の処理やデータ保存は担いません。
Service Workerはページとは別にブラウザー内で動き、ネットワークリクエストへの応答を制御します。Cache Storageと組み合わせれば、必要なファイルを保存して再訪時やオフライン時に返せます。
登録だけでオフライン対応が完成するわけではありません。保存する内容やネットワークを使う条件、失敗時の表示をアプリ側で決めます。
キャッシュの考え方
画面を描くファイルと利用者のデータは分けて考えましょう。ロゴやCSSのように更新頻度の低い資産は保存しやすい一方、在庫や予約状況には古い値を出さない工夫が必要です。
キャッシュ優先は保存済みの応答を先に返します。表示が速く通信なしでも使えますが、更新を見逃しがちです。オフライン閲覧を残したい記事や変更の少ない画面部品で使えます。
ネットワーク優先では新しい応答を先に取りに行き、失敗時は保存済みの内容を返します。最新情報が大事な画面に便利ですが、接続が遅いと待たされます。画面の性質に応じて使い分けましょう。
保存済みの画面をすぐ表示し、裏で更新する方式もあります。次回は新しい内容を見せやすい反面、初回は応答を待つ場合も。Cache StorageとHTTPキャッシュの違いを押さえ、更新時に旧版を消す設計が必要です。
実装で詰まりやすい点
Service Workerの制御範囲は登録した場所を基準に決まります。サイト全体に届くと思っていたのに、一部のページが対象外だった。登録位置とscopeを確かめましょう。
新しいWorkerを登録しても、すぐ有効にならず旧版が動き続ける場合があります。画面のJavaScriptとキャッシュの版がずれると不具合になるため、更新通知と切り替えの動作を確認してください。
開発者ツールで通信を切るだけでは、確認として不十分です。初回に資産が保存されるか、再訪時に画面が表示されるか、API失敗時にどう見えるかを試すと見落としを減らせます。
インストールの提示条件と利用できる機能は、ブラウザーやOSごとに異なります。Manifestを用意しても表示は端末ごとに変わります。実機で起動し、アイコンと戻る操作まで確認しましょう。
日本語で学ぶ一冊
柴田文彦著『プログレッシブウェブアプリ PWA開発入門』は、PWAの概要、構成要素、開発、デバッグ、デプロイを順に扱います。印刷版はB5判のモノクロ182ページで、NextPublishingのプリントオンデマンド版です。
後半では2つのアプリ例を使い、既存WebアプリのPWA化から公開、端末へのインストールまで進みます。概念と公開までの工程をつなげて追える構成です。
実装編は基本的なWebアプリ開発経験、またはHTML・CSS・JavaScriptの理解を想定しています。Web開発の経験を生かしてPWA対応に取り組みたい人におすすめです。
機能を広く学ぶ本
『Beginning Progressive Web App Development: Creating a Native App Experience on the Web』はDennis Sheppard著のApress刊ソフトカバー第1版で、本文は266ページです。
JavaScript経験者向けに、Service Workerの設定、アセットとデータのキャッシュ、オフライン利用を扱います。Background SyncやManifest、通知、App Shell、HTTPバージョン2も学べます。
React、Preact、Vue.js、Angular、Ionicの例とLighthouseも紹介します。複数の構成や機能をまとめて学べる本です。2017年刊なので、操作手順やAPIは現行版と照合しましょう。
実例で流れをつかむ
Dean Alan Hume著『Progressive Web Apps』は200ページで、HTML・CSS・JavaScriptのWeb開発経験者を対象にしています。
機能を段階的に加えるチュートリアル形式で、個々の機能を参照できる例もあります。Service Workerのキャッシュ改善、Manifest、Push通知、オフラインファースト、データ同期を扱います。
出版社の印刷版はモノクロで、参考価格は39.99米ドルです。英語の本ですが、特定のフレームワークに依存しない実例からPWA全体の機能を学べます。
Reactで組み立てる
Scott Domes著『Progressive Web Apps with React: Create lightning fast web apps with native power using React and Firebase』は302ページの本です。
JavaScript開発者向けです。React、Webpack、Firebase、React Router v4を使い、Manifestによるインストール、Service Workerのオフライン機能、Push通知を実装します。
コード分割とキャッシュによる高速化も扱います。ReactでPWAを作りたい人には手順を追いやすい構成です。掲載環境は2017年当時なので、設定は現行版に合わせて読み替えてください。
内側まで掘り下げる
Tal Ater著『Building Progressive Web Apps: Bringing the Power of Native to the Browser』は中級以上向けの285ページです。Service Workerのライフサイクルや更新、古いキャッシュの削除も扱います。
Cache Storage、HTTPキャッシュヘッダー、複数のキャッシュパターン、オフラインファースト、IndexedDBを収録。Background Sync、Manifest、ブラウザーがインストールを提示する条件も解説します。
Notification API、Push API、購読、VAPID鍵、サーバーからのPush送信まで範囲は広めです。更新や通知の実装理由を深く知りたい人におすすめ。紙版はO’Reillyのペーパーバックです。
結論
PWAを初めて実装する人には、日本語で既存アプリの改修から公開まで追える『プログレッシブウェブアプリ PWA開発入門』をおすすめします。用語と工程を順に整理できます。
Reactで実装するなら『Progressive Web Apps with React』、Service Workerやキャッシュ更新を深く学ぶなら『Building Progressive Web Apps』を選びましょう。幅広い機能を英語で学ぶ人には、残る2冊が合います。
読むだけで終えず、オフライン画面を作ってキャッシュの更新と削除まで端末で確かめると理解が実装につながります。刊行年とともに、知りたい範囲や開発経験も本選びの基準にしてください。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
