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

「プログレッシブウェブアプリ」 (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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA