プログレッシブ web アプリケーション機能の有効化 enabling-pwa
シンプルな設定で、コンテンツ作成者が AEM Sites で作成されたエクスペリエンスに対してプログレッシブ web アプリケーション（PWA）機能を有効化できるようになりました。
- PWA に関する知識
- サイトとコンテンツ構造に関する知識
- キャッシュ方法の理解
- 開発チームによるサポート
はじめに introduction
プログレッシブ web アプリケーション（PWA）を使用すると、AEM Sites のアプリケーションのような臨場感のあるエクスペリエンスを、ユーザーのコンピューターにローカルに保存し、オフラインでアクセスできるようになります。インターネット接続が切れた場合でも、外出中にサイトを閲覧できます。PWA を使用すると、ネットワークが失われたり不安定な状態になった場合でも、シームレスなエクスペリエンスを維持できます。
コンテンツ作成者は、サイトの再コーディングは必要なく、サイトのページプロパティの追加タブとして PWA プロパティを設定できます。
- この設定を保存または公開すると、サイト上の PWA 機能を有効にするマニフェストファイルとサービスワーカーを書き出すイベントハンドラーがトリガーされます。
- Sling マッピングは、サービスワーカーがアプリケーションのルートから提供されるように維持され、アプリケーション内でオフライン機能を可能にするコンテンツのプロキシ化を有効にします。
PWA では、ユーザーはサイトのローカルコピーを保持するので、インターネットに接続していなくてもアプリケーションのような操作をおこなうことができます。
前提条件 prerequisites
サイトで PWA 機能を使用するには、プロジェクト環境に必要な要件が 2 つあります。
- コアコンポーネントを使用してこの機能を利用する
- Dispatcher ルールを調整して、必要なファイルを公開する
これらは、作成者が開発チームと連携する必要がある技術的な手順です。これらの手順は、サイトごとに 1 回だけ必要です。
コアコンポーネントの使用 adjust-components
コアコンポーネントリリース 2.15.0 以降は、AEM Sites の PWA 機能を完全にサポートしています。AEMaaCS には常に最新バージョンのコアコンポーネントが含まれているので、標準搭載の PWA 機能を使用できます。AEMaaCS プロジェクトは、この要件を自動的に満たします。
Dispatcher の調整 adjust-dispatcher
PWA 機能は、/content/<sitename>/manifest.webmanifest ファイルを生成して使用します。デフォルトでは、Dispatcher はこのようなファイルを公開しません。これらのファイルを公開するには、デベロッパーはサイトプロジェクトに次の設定を追加する必要があります。
File location: [project directory]/dispatcher/src/conf.dispatcher.d/filters/filters.any >
# Allow webmanifest files
/0102 { /type "allow" /extension "webmanifest" /path "/content/*/manifest" }
プロジェクトに応じて、書き換えルールに様々なタイプの拡張を含めることができます。webmanifest 拡張は、リクエストを非表示にして /content/<projectName> にリダイレクトするルールを導入した場合に、書き換え条件を含めるのに便利です。
RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg|.webmanifest)$
サイトの PWA の有効化 enabling-pwa-for-your-site
前提条件が満たされれば、コンテンツ作成者は簡単にサイトの PWA 機能を有効にできます。次に、その方法の概要を示します。個々のオプションについて詳しくは、詳細なオプションの節で説明されています。
-
AEM にログインします。
-
メインメニューで、ナビゲーション／Sites を選択します。
-
Sites プロジェクトを選択し、「プロパティ」を選択するか、ホットキー
pを使用します。 -
「プログレッシブ web アプリケーション」タブを選択し、該当するプロパティを設定します。少なくとも、次のことを行います。
-
「PWA を有効にする」オプションを選択します。
-
スタートアップ URL を定義します。
-
512x512 の png アイコンを DAM にアップロードし、それをアプリケーションのアイコンとして参照します。
-
サービスワーカーがオフラインにするパスを構成します。一般的なパスは次のとおりです。
/content/<sitename>/content/experiencefragements/<sitename>/content/dam/<sitename>- サードパーティのフォント参照
/etc/clientlibs/<sitename>
-
-
「保存して閉じる」を選択します。
これでサイトが構成され、ローカルアプリとしてインストールできます。
PWA 対応サイトの使用 using-pwa-enabled-site
これで、PWA をサポートするようにサイトを設定できたので、体験してみてください。
- サポートされているブラウザーでサイトにアクセスします。
- ブラウザーのアドレスバーに新しいアイコンが表示され、サイトがローカルアプリとしてインストールできることが示されます。
- ブラウザーによってアイコンは異なり、ローカルアプリケーションとしてインストールできることを示す通知（バナーやダイアログボックスなど）が表示される場合もあります。
- AEM Desktop App をインストールします。
- アプリがデバイスのホーム画面にインストールされます。
- アプリケーションを開いてしばらく作業して、ページがオフラインで使用できることを確認してください。
詳細なオプション detailed-options
次の節では、PWA 用にサイトを設定する際に使用できるオプションの詳細を説明します。
インストール可能なエクスペリエンスの設定 configure-installable-experience
これらの設定を使用すると、訪問者のホーム画面にサイトをインストールしてオフラインで使用できるようにすることで、サイトをネイティブアプリのように動作させることができます。
-
PWA を有効にする - これは、サイトの PWA を有効にするためのメイントグルです。
-
起動 URL - これは、ユーザーがローカルにインストールしたアプリを読み込むときに開く、優先的な起動 URL です。
- これは、コンテンツ構造内の任意のパスにすることができます。
- ルートにする必要はなく、多くの場合アプリケーションの開始ページにします。
- この URL が相対 URL の場合、マニフェスト URL がベース URL として使用され、解決されます。
- 空白のままにすると、アプリのインストール元の web ページのアドレスが使用されます。
- 値を設定することをお勧めします。
-
表示モード - PWA 対応のアプリケーションは、引き続きブラウザーを介して配信される AEM サイトです。これらの表示オプションは、ブラウザーを非表示にする方法や、ローカルデバイス上のユーザーに表示する方法を定義します。
- スタンドアロン - ブラウザーはユーザーに非表示になり、ネイティブアプリのように表示されます。これがデフォルト値です。
- このオプションを使用する場合、アプリケーションのナビゲーションは、ブラウザーのナビゲーションコントロールを使用することなく、サイトのページ上のリンクやコンポーネントを使用してコンテンツ全体でナビゲーション可能でなければなりません。
- ブラウザー - ブラウザーは、サイトの訪問時に通常通り表示されます。
- 最小限の UI - ネイティブアプリケーションと同様に、ブラウザーはほとんど非表示ですが、基本的なナビゲーションコントロールが表示されます。
- 全画面表示 - ブラウザーはネイティブアプリのように非表示になりますが、全画面モードでレンダリングされます。
- このオプションを使用する場合、アプリのナビゲーションは、ブラウザーのナビゲーションコントロールを使用することなく、サイトのページ上のリンクやコンポーネントを使用してコンテンツ全体でナビゲーション可能でなければなりません。
- スタンドアロン - ブラウザーはユーザーに非表示になり、ネイティブアプリのように表示されます。これがデフォルト値です。
-
画面の向き - PWA は、ローカルアプリとして、デバイスの向きに対応する方法を把握する必要があります。
- 任意 - アプリケーションはユーザーのデバイスの向きに合わせて調整されます。これがデフォルト値です。
- 縦置き - ユーザーのデバイスの向きに関係なく、アプリケーションが強制的に縦置きレイアウトで開きます。
- 横置き - ユーザーのデバイスの向きに関係なく、アプリケーションが強制的に横置きレイアウトで開きます。
-
テーマの色 - ローカルユーザーのオペレーティングシステムがネイティブの UI ツールバーとナビゲーションコントロールを表示する方法に影響するアプリケーションの色を定義します。ブラウザーによっては、他のアプリケーションプレゼンテーション要素に影響を与える場合があります。
- カラーウェルポップアップを使用して、色を選択します。
- 色は、16 進数または RGB 値で定義することもできます。
-
背景色 - アプリの読み込み時に表示される、アプリの背景色を定義します。
- カラーウェルポップアップを使用して、色を選択します。
- 色は、16 進数または RGB 値で定義することもできます。
- 特定のブラウザーでは、アプリケーション名、背景色、アイコンから自動的にスプラッシュスクリーンが作成されます。
-
アイコン - ユーザーのデバイス上に表示される、アプリケーションを表すアイコンを定義します。
- アイコンは、サイズが 512x512 ピクセルの png ファイルである必要があります。
- アイコンは DAM に保存する必要があります。
キャッシュ管理（詳細） offline-configuration
これらの設定により、このサイトの一部はオフラインで使用できるようになり、訪問者のデバイスでローカルに使用できるようになります。Web アプリケーションのキャッシュを制御してネットワークリクエストを最適化し、オフラインエクスペリエンスをサポートできます。
-
コンテンツ更新のキャッシュ方法と頻度 - この設定は、PWA のキャッシュモデルを定義します。
- 中程度 - この設定は、大半のサイトで使用されます。これがデフォルト値です。
- この設定を使用すると、ユーザーが最初に閲覧したコンテンツをキャッシュから読み込み、ユーザーがそのコンテンツを利用している間は、キャッシュ内の残りのコンテンツを再検証します。
- 頻繁 - これは、オークション会社など、速く更新する必要があるサイトで使用します。
- この設定を使用すると、アプリは最初にネットワーク経由で最新のコンテンツを探し、見つからない場合はローカルキャッシュにフォールバックします。
- まれ - これは、リファレンスページなど、ほとんど静的なサイトの場合に使用します。
- この設定を使用すると、アプリは最初にキャッシュ内のコンテンツを探し、利用できない場合はネットワークにフォールバックして取得します。
- 中程度 - この設定は、大半のサイトで使用されます。これがデフォルト値です。
-
ファイルの事前キャッシュ - AEM でホストされるこれらのファイルは、サービスワーカーのインストール時および使用前に、ローカルブラウザーのキャッシュに保存されます。これにより、オフライン時に web アプリが完全に機能することが保証されます。
-
パスの包含 - 定義されたパスに対するネットワーク要求が捕捉され、設定された キャッシュ方法とコンテンツ更新の頻度 に従ってキャッシュされたコンテンツが返されます。
-
キャッシュの除外 - これらのファイルは、「ファイルの事前キャッシュ」および「パスの挿入」の設定に関係なく絶対にキャッシュはされません。
制限と Recommendations limitations-recommendations
AEM Sites では PWA 機能の一部が利用できます。これらには、いくつかの顕著な制限があります。
- ユーザーがアプリケーションを使用していない場合、ページは自動的に同期または更新されません。
また、アドビは、PWA を実装する際に以下を推奨しています。
事前キャッシュするリソースの数を最小限に抑える。 minimize-precache
アドビでは、事前キャッシュするページ数を制限するよう勧めています。
- ライブラリを埋め込むと、事前キャッシュ時に管理するエントリの数を減らすことができます。
- 事前キャッシュする画像のバリエーション数を制限します。
プロジェクトスクリプトやスタイルシートが安定した後で PWA を有効にします。 pwa-stabilized
クライアントライブラリにはキャッシュセレクタが追加され、lc-<checksumHash>-lc のようなパターンで配信されます。ライブラリを構成するファイル（および依存関係）が変更されるたびに、このセレクターは変更されます。サービスワーカーが事前にキャッシュするクライアントライブラリを一覧表示し、新しいバージョンを参照する場合は、手動でエントリを取得して更新します。そのため、アドビは、プロジェクトスクリプトとスタイルシートが安定した状態になった後で、サイトを PWA に設定することを
画像バリエーションの数を最小限に抑える。 minimize-variations
AEM コアコンポーネントの画像コンポーネントは、取得に最適な、フロントエンドのレンディションを 1 つ決定します。このメカニズムには、そのリソースの最終変更時刻に対応するタイムスタンプも含まれます。このメカニズムにより、PWA の事前キャッシュの設定が複雑になります。
事前キャッシュの設定では、取得可能なすべてのパスのバリエーションをリストする必要があります。これらのバリエーションは、画質や幅などのパラメーターで構成されます。これらのバリエーションの数を、最大 3 つ（小、中、大）に減らすことを強くお勧めします。これは、画像コンポーネントのコンテンツポリシーのダイアログボックスで行えます。
慎重に設定しないと、メモリとネットワークの消費が PWA のパフォーマンスに大きな影響を与える可能性があります。例えば、50 枚の画像を事前キャッシュし、画像ごとに 3 つの幅がある場合、サイトを管理するユーザーは、ページプロパティの PWA 事前キャッシュセクションに、最大 150 個のエントリのリストを保持する必要があります。
また、アドビでは、プロジェクトでの画像の使用が安定してから、サイトを PWA に設定することを勧めています。