PWA (Progressive Web App)

プログレッシブウェブアプリ

「プログレッシブウェブアプリ」 (Progressive Web Apps / PWA) とは、ネイティブアプリケーションのような機能を Web ページを通して提供する技術のことである。次のような要素技術を用いて実装される。

• サービスワーカー (Service Worker)：ブラウザのバックグラウンドで実行され、オフラインでの動作、キャッシングによるレスポンスの高速化、プッシュ通知などの機能を提供する。
• マニフェスト (Web App Manifest)：アプリケーションの名称、アイコン、基本色などの情報を JSON ファイルに含める。
• HTTPS：プログレッシブウェブアプリはセキュリティのために、HTTPS を介して提供する必要がある。

参考：

プログレッシブウェブアプリ (PWA) | MDN

概要

「プログレッシブウェブアプリ」 (Progressive Web Apps / PWA) とは、ネイティブアプリケーションのような機能を Web ページを通して提供する技術であり、サービスワーカー、マニフェスト、HTTPS を用いて構成される。プログレッシブアプリとしてウェブアプリケーションを構成するメリットとして、次のようなことが挙げられる。

• 高速に動作する
• レスポンシブ
• オフラインで動作する
• ホームスクリーンのアイコンから開くことができる

参考：

PWA (Progressive Web Apps) とは | murashun.jp

プログレッシブウェブアプリの紹介 | MDN

プログレッシブウェブアプリ | web.dev

導入

参考：

PWA をインストール可能にするには | MDN

インストール可能にする | web.dev

仕様

ドキュメント：

どうすればインストール可能にできますか？ | web.dev

マニフェスト (manifest.json)

マニフェストに含まれる情報

• アプリケーション名
• アイコン
• スタートページ URL
• 配色
• オフラインページ URL
• キャッシュ設定
• スコープ

ドキュメント：

ウェブアプリマニフェスト | MDN

Add a Web App Manifest | web.dev

リンク：

Uniquely Identifying PWAs with the Web App Manifest ID Property | Chrome Developers [Official]

参考：

Visualize Application Manifest in Chrome (Keerti Kotaru) | Nerd For Tech

サービスワーカー (Service Worker)

プログレッシブウェブアプリの中核となる技術の一つであり、プログレッシブウェブアプリには必ず追加する必要がある。実態はブラウザのバックグラウンドで実行される JavaScript プログラムであり、次のような役割を持つ。

• オフライン機能
• キャッシング
• プッシュ通知
• セキュリティ

参考：

サービスワーカーで PWA をオフラインで動作させる | MDN

Service Worker の使用 | MDN

サービスワーカー API | MDN

Service Worker の紹介 | Google Developers [公式]

ウェブアプリへの Service Worker とオフラインの追加 | Google Developers [公式]

通知／プッシュ

参考：

通知とプッシュを利用して PWA を再エンゲージ可能にするには | MDN

通知 API の使用 | MDN

Push API | MDN

構造

参考：

プログレッシブウェブアプリの構造 | MDN

プログレッシブウェブアプリの構造的な概要 | MDN

ホーム画面に追加 (A2HS)

ドキュメント：

ホーム画面に追加 | MDN

参考：

ブラウザショートカットとしての A2HS – Qiita

manifest.json で Web アプリを「ホーム画面に追加」自動バナー表示に対応させる – Qiita

Web アプリを作る

参考：

#1 Geolocation API / Notification API | gihyo.jp

#2 Background Pages / Message Passing | gihyo.jp

#3 Options Page / Web Storage | gihyo.jp

#4 Omnibox / Context Menus | gihyo.jp

#5 Content Scripts | gihyo.jp

Web アプリを世界に公開しよう | gihyo.jp

デバッグ

ドキュメント：

Debug Progressive Web Apps | Chrome Developers [Official]

参考：

Service Worker 開発するときのデバッグ方法 – Qiita

Service Worker Debugging | The Chromium Projects [Official]

リンク

Fugu API Tracker

まとめ

Progressive Web Apps | web.dev

Web アプリを公開しよう！ Chrome Web Store / Apps入門 | gihyo.jp

Chrome ウェブストア

公式サイト：

Chrome ウェブストア [公式]

ドキュメント：

Chrome ウェブストアとは何ですか？ | Chrome ウェブストアヘルプ [公式]

参考：

Chrome Web Store / Apps 概要 | gihyo.jp

Hosted Apps の作成方法と公開 | gihyo.jp

Packaged Apps の作成方法 | gihyo.jp

Chrome Web Store の審査にかかった時間 | TECHNO DIGITAL

Chrome ウェブストア | IT 用語辞典バイナリ

iOS

参考：

Progressive Web Apps on iOS are Here | Maximiliano Firtman

UpUp

公式サイト：

UpUp – The Offline First Library [Official]

リポジトリ：

TalAter/UpUp: Easily Create Sites that Work Offline as well as Online – GitHub

ドキュメント：

Getting Started with Offline First using UpUp | UpUp [Official]

参考：

Web サイトを PWA (Progressive Web App) に変える簡単な手順 翻訳 | TechRacho