プログレッシブ Web アプリ (PWA) は、最新の Web テクノロジーのコレクションを使用してアプリのようなユーザー エクスペリエンスを提供する Web サイトです。一般的な PWA 機能には、オフライン サポート、バックグラウンド同期、サイトをモバイル アプリとして「インストール」する機能などがあります。
PWA は、複数のテクノロジーを参照するために使用される一般的な用語です。通常、PWA には Web アプリ マニフェスト と Service Worker が含まれます。 Web アプリ マニフェストは、サイトをオペレーティング システムのアプリ リストに登録するために使用されるデータを提供します。 Service Worker を使用すると、サイトのブラウザーのタブが閉じられた後も存続する機能を追加できます。
すべてのサイトが可能なすべての機能を使用できるわけではありません。一部には、Web アプリ マニフェストは含まれますが、Service Worker は含まれません。 Service Worker はありますが、アプリのインストールはサポートされていないものもあります。 PWA がどのように動作するかを定義する特定の標準はありません。 PWA は、これらのテクノロジーの一部を使用して、ネイティブ アプリとある程度の同等の機能を提供するサイトです。
「プログレッシブ」エンハンスメントについて
Progressive Web Apps の「プログレッシブ」部分は、プログレッシブ エンハンスメントの予想される使用に由来しています。 PWA 機能はまだかなり新しいため、すべてのブラウザでサポートされているわけではありません。 PWA は、Service Worker などのブラウザ API が利用できない場合でも、コアとなる Web ベースのエクスペリエンスを提供し続ける必要があります。
プッシュ通知などの機能は、エクスペリエンスに必須の部分であってはなりません。サイトでプッシュ通知の登録に失敗した場合でも、サイトの残りの部分は引き続き正常に機能するはずです。ブラウザーが最新のテクノロジーをサポートしている場合、サイトではユーザーにさらなる利便性を提供する拡張機能としてそれを扱う必要があります。
利用可能な機能
PWA 機能は、 Web サイトとユーザーのデバイスの間のより緊密な統合を提供します。したがって、それらの作成に使用される API は HTTPS 接続に制限されます。これにより、デバイスに悪質なアプリを永続的にインストールするためにコンテンツが改ざんされていないことを確認できます。
個々の機能は、ユーザー向けの Web 権限 の背後で制御されます。プッシュ通知などの機能が悪用されて、ユーザーに望ましくないコンテンツが大量に送信される可能性があります。ユーザーは、サイトに潜在的に侵入的な機能を使用する権限を与える許可プロンプトに同意する必要があります。
これらの条件は、関連する API のほとんどを使用する前に、 機能検出 を使用する必要があることを意味します。ブラウザがサポートしていないため、機能が利用できない可能性があります。ただし、接続が安全でないため、またはユーザーが許可プロンプトを拒否したために無効になる場合もあります。後者のシナリオを予測することはできません。ユーザーはいつでも気が変わる可能性があります。
PWA の特性
PWA の標準はありませんが、アプリのようなエクスペリエンスを提供するほとんどのサイトには次の特徴があります。
- インストール可能 – サポートされているプラットフォームでは、Web サイトをモバイル アプリと同様に「インストール」できます。効果はオペレーティング システムとブラウザによって異なります。
- オフラインで動作 – Service Worker は、サイトが開いていないときでも実行し続けるスクリプトです。また、ネットワーク リクエストをインターセプトして、キャッシュから重要な資産を提供できるようにすることもできます。これにより、ユーザーがオフラインのときでもサイトは動作し続けることができます。
- アプリのような UI – 要件ではありませんが、PWA はネイティブ アプリ スタイルとうまく統合する最新の UI コントロールの使用に重点を置く可能性があります。 PWA はさまざまな画面サイズに対応する必要があります。
これらのコア特性を超えて、個々の PWA は追加機能を重ねて、必要なユーザー エクスペリエンスを作成します。これらの機能には、プッシュ通知、バックグラウンド アップロード、定期的なバックグラウンド データの取得が含まれる場合があります。これらのオプション機能を使用すると、ユーザーを再度関与させ、ユーザーのニーズを予測することができます。
ウェブアプリマニフェスト
Web アプリ マニフェストは、 サイトに関する重要な情報を定義する JSON ファイルです。これには、サイト名、アクセントカラー、アイコンファイルの場所などの詳細が含まれます。
ブラウザーとオペレーティング システムは、サイトを「インストール」するときに、この情報を使用してシステム レベルのアプリ エントリを作成します。これは、サイトに Android のアプリ ドロワー アイコン、または Windows の [スタート] メニュー リンクを取得する方法です。
マニフェストの例を次に示します。
{"名前": "サンプルアプリ",
“ディスプレイ”: “スタンドアロン”,
“背景色”: “#fff”,
“説明”: “私のアプリ”,
“start_url”: “/”,
「アイコン」: [
{
“src”: “/icon.png”,
“サイズ”: “512×512”,
“タイプ”: “画像/png”
}
】
}
の
displayプロパティは、サイトがアプリ ドロワーから開かれたときに独自のスタンドアロン ウィンドウで起動する必要があることを宣言します。の
start_urlプロパティは、起動後に移動する最初の URL を定義します。
サイトでは、
link
HTML 内のタグ:
<link rel="manifest" href="/manifest.json">
その後、ブラウザはマニフェストの取得を試みます。有効な場合、ユーザーはアプリを「インストール」するよう提案される場合があります。 Android 版 Chrome では、これは「ホーム画面に追加」バーとして表示されます。バーが表示されることは保証されていません。Chrome は、サイトにアクセスする頻度などのヒューリスティックを使用して、インストール ヒントを表示するかどうかを決定します。
サービスワーカー
Service Worker は JavaScript を使用して作成されます。これらはサイトのメイン JavaScript とは独立しています。 Service Worker はメイン スクリプトから登録されます。ブラウザーは、タブを閉じても Service Worker を実行し続けます。これにより、ユーザーがサイトにアクセスした後もバックグラウンド操作を実行できるようになります。
Service Worker を登録する方法は次のとおりです。
if (ナビゲーターの「serviceWorker」) {
navigator.serviceWorker.register(“/service-worker.js”);
}
の
service-worker .jsスクリプトがダウンロードされ、Service Worker としてアクティブ化されます。 Service Worker は、それ自体では便利な機能を提供しません。 Service Worker 内で キャッシュ 、 バックグラウンド同期 、 プッシュ通知 などの API を使用する必要があります。
以下は、アプリに関連付けられたすべてのアセットをキャッシュする基本的な例です。
self.addEventListener("インストール", e => {
e.waitUntil(async () => {
const キャッシュ = await キャッシュ.open(“my-app-cache”);
キャッシュを待ちます.addAll([
“/index.html”,
“/my-css.css”,
“/my-js.js”,
“/assets/icon.png”,
「/assets/my-header-image.png」
]);
});
});
self.addEventListener(“フェッチ”, e => {
e.respondWith(async () => {
const キャッシュ = await catches.match(e.request);
(キャッシュされた) 場合はキャッシュされた値を返します。
const 応答 = await fetch(e.request);
応答を返します。
})
});
これは、
install
すべての重要なアセットをダウンロードするための Service Worker ライフサイクル イベント 。これらは、Service Worker によって制御される専用のキャッシュに追加されます。
サービスワーカーも話を聞きます
fetchイベント。これは、ネットワーク要求が行われるたびに発生します。イベントオブジェクトには、
request
プロパティは、によって受け入れられるリクエストオブジェクトです。
fetch()API。
コードはまず、リクエストがキャッシュにすでに存在するかどうかを確認します。以前にキャッシュされた URL の場合、このチェックはパスし、キャッシュされた応答が返されます。それ以外の場合、リクエストは
fetch()API。アセットは通常どおりネットワーク経由でロードされます。
この例は、Service Worker が提供できる内容のヒントのみを示しています。実際のアプリでは、より高度な キャッシュ 、追加のバックグラウンド機能、追加のライフサイクル イベント (Service Worker が他のバージョンにどのように置き換えられるか、また他のバージョンに置き換えられるかを制御するため) が必要になることがよくあります。
まとめ
プログレッシブ Web アプリは、関連するブラウザ API のセットを使用してアプリのようなエクスペリエンスを提供する Web アプリケーションです。おそらく、意識していなかったとしても、過去に PWA を使用したことがあります。
PWA エクスペリエンスは、漸進的な機能強化とユーザーの選択に基づいています。各サイトが PWA 機能をアクティブ化するには、事前に同意する必要があります。それ以外の場合、サイトは、PWA テクノロジによって提供される追加機能を使用せずに、コアとなるブラウザベースのエクスペリエンスを提供する必要があります。
