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

プログレッシブウェブアプリ (Progressive web apps, PWA) は、ウェブプラットフォーム技術を使用して構築されたアプリですが、プラットフォーム専用のアプリのような使い勝手を提供します。

PWA はウェブサイトのように、単一のコードベースから複数のプラットフォームや端末で動作することができます。プラットフォーム専用のアプリのように、端末にインストールし、オフラインやバックグラウンドで処理し、端末や他にもインストールされているアプリと統合することができます。

ガイド

これらのガイドでは、PWA のさまざまな側面について概念的に説明しています。PWAでどのようなことができるかを理解し、それを実現する方法を理解するのに十分なポインターを提供するためのものです。

プログレッシブウェブアプリとは: PWA の紹介、従来のウェブサイトやプラットフォーム専用のアプリとの比較、主な機能の輪郭線。
PWA をインストール可能にする: PWA を定義する要素の 1 つは、端末にインストールでき、ユーザーにはプラットフォーム専用のアプリとして表示されることです。これは、端末の永続的な機能であり、ユーザーは他のアプリと同様に、OS から直接起動することができます。このガイドでは、「インストール可能」ということの意味、PWA をインストール可能にするために指定された必要条件、インストール時の使い勝手をカスタマイズする方法について説明します。
ウェブアプリのインストールとアンインストール: このガイドでは、ユーザーが端末に PWA をインストールおよびアンインストールする方法を説明します。
オフライン操作とバックグラウンド処理: このガイドでは、端末のネットワーク接続が途切れがちでも、PWA がユーザーに良い使い勝手を得るためにはどのような技術を設定すればよいか、また、メインのアプリを実行していない場合でもバックグラウンドで操作を行うにはどのような技術を設定すればよいかについてご紹介します。
キャッシュ: PWA がリソースをローカルにキャッシュすることを可能にする API の概要、および PWA がオフライン機能を実装する際に使用する一般的な戦略をいくつか紹介します。
PWA のベストプラクティス: PWA は、さまざまなブラウザーや端末での動作に対応し、アクセシビリティを確保し、優れたパフォーマンスを発揮し、オペレーティングシステムと適切に統合されている必要があります。このガイドでは、PWA を可能な限り優れたものにするための最善の手法の例が掲載されています。

方法論

これらのガイドでは、特定の PWA 機能の実装方法について、具体的な詳細な手順が説明されています。

スタンドアロンアプリの作成: PWA が起動された際に、ブラウザーのタブではなく、自分自身で専用のウィンドウで起動されるように指定する方法を説明します。
アプリのアイコンを定義: PWA が端末にインストールされた際に使用するアイコンセットを自分自身で定義する方法を説明しています。
アプリの色のカスタマイズ: PWA の背景色とテーマ色を設定するにはどうすればよいかを記述しています。
バッジの表示: PWA のアイコンにバッジを表示する方法について説明しています。例えば、ユーザーに新しいメッセージが届いたことを知らせる場合などです。
アプリのよくあるアクションをショートカットとして公開: PWA の一般的な操作を公開する方法について、オペレーティングシステムのアプリショートカットメニューから起動できることが記述されています。
アプリ間のデータ共有: PWA がオペレーティングシステムのアプリ共有メカニズムを使用して、他にもデータを共有できることを説明しています。
PWA からのインストールの起動: 開発者が自分自身で UI を提供し、ユーザーに PWA のインストールを促す方法を説明しています。
PWA とのファイルの関連付け: ファイルの種類と PWA の関連付けを作成する方法を説明し、ユーザーがファイルをクリックすると、PWA が起動して何かを処理するようにすることができます。

チュートリアル

これらのチュートリアルでは、PWA をゼロから作成します。チュートリアルでは、アプリを作成する段階を最初から最後まで順を追って説明し、アプリのさまざまな機能の実装方法について解説します。

初めての PWA の作成: これは初心者向けのチュートリアルで、月の周期を追跡する PWA の作成方法を説明しています。レッスンには、完全に機能するウェブアプリを作成するために要求される HTML、CSS、JavaScript の概要、テスト環境の設定、ウェブアプリを PWA にアップグレードするための完全な説明が含まれています。マニフェストの開発と検査、サービスワーカーの追加、サービスワーカーを使用した古いキャッシュの削除など、ウェブアプリを PWA にアップグレードするためのガイドが記載されています。
PWA を深く掘り下げる: これは中級者向けのチュートリアルで、js13kGames 2017 競技の A-Frame カテゴリーに送信したゲームの情報を掲載している PWA の作成手順を説明しています。このチュートリアルでは、通知、プッシュ通知、アプリのパフォーマンスなどの追加機能を含め、PWA を作成するうえで必要な基本事項をすべて記載しています。

リファレンス

PWA を構築する際に使用するウェブ技術に関するリファレンスドキュメントです。

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

ウェブアプリマニフェストのメンバー: 開発者はウェブアプリマニフェストメンバーを使用して PWA を記述し、その外観をカスタマイズし、さらに深く OS に統合することができます。

サービスワーカー API

アプリとのコミュニケーション

サービスワーカーが関連付けられたクライアント PWA と通信するために使用できる API は次のとおりです。

Client.postMessage(): サービスワーカーがクライアント PWA にメッセージを送信できるようにします。
ブロードキャストチャンネル API: サービスワーカーとそのクライアントである PWA が、基本的な双方向通信チャネルを確立できるようにします。

オフライン操作

次の API をサービスワーカーで使用することで、アプリをオフラインで動作させることができます。

Cache: HTTP レスポンス用の永続的なストレージメカニズムは、アプリがオフラインの際に再利用できる資産を保存するために使用します。
Clients: サービスワーカーによって制御されている文書にアクセスするために提供されたインターフェイスです。
FetchEvent: クライアント PWA によって行われるすべての HTTP リクエストとともに、サービスワーカーに配信されるイベント。このイベントを使用して、通常通りサーバーにリクエストを送信し、将来使用するためにレスポンスを保存することも、リクエストを傍受して前回キャッシュしたレスポンスで即座に応答することもできます。

バックグラウンド処理

以下の API を使用することで、サービスワーカーは、アプリが実行されていない場合でもバックグラウンドでタスクを実行することができます。

バックグラウンド同期 API: 安定したネットワークに接続するまで、タスクを延期してサービスワーカーで実行する方法です。
ウェブ定期バックグラウンド同期 API: ネットワーク接続時に、サービスワーカーで定期的に実行するタスクを登録する方法です。
バックグラウンドフェッチ API: サービスワーカーが、動画や音声ファイルの場合など、ダウンロードにかなりの時間がかかる場合でもダウンロードを管理するためのメソッド。

その他のウェブ API

IndexedDB: ファイルを含む大量の構造化データ用のクライアント側ストレージ API です。
バッジ API: アプリケーションアイコンにバッジを設定する方法で、煩わしさを抑えた通知を提供します。
通知 API: オペレーティングシステムレベルで表示される通知を送信する方法です。
ウェブ共有 API: ユーザーが端末上で選択した他のアプリとテキスト、リンク、ファイル、および他にもコンテンツを共有する仕組みです。
ウィンドウ制御オーバーレイ API: デスクトップ OS にインストールされた PWA 用の API で、既定のウィンドウタイトルバーを非表示にし、アプリウィンドウの全面にアプリを表示できるようにします。