シンプルな設定で、コンテンツ作成者が AEM Sites で作成されたエクスペリエンスに対してプログレッシブ web アプリケーション(PWA)機能を有効化できるようになりました。
これは高度な機能で、次を必要とします。
この機能を使用する前に、開発チームに相談して、プロジェクトに最適な利用方法を決めることをお勧めします。
プログレッシブ web アプリケーション(PWA)を使用すると、AEM サイトのアプリケーションのような臨場感のあるエクスペリエンスを、ユーザーのコンピューターにローカルに保存し、オフラインでアクセスできるようになります。インターネット接続が切れた場合でも、外出中にサイトを閲覧できます。PWA を使用すると、ネットワークが失われたり不安定な状態になった場合でも、シームレスなエクスペリエンスを維持できます。
コンテンツ作成者は、サイトの再コーディングは必要なく、サイトのページプロパティの追加タブとして PWA プロパティを設定できます。
PWA では、ユーザーはサイトのローカルコピーを保持するので、インターネットに接続していなくてもアプリケーションのような操作をおこなうことができます。
プログレッシブ web アプリケーションは発展中のテクノロジーであり、ローカルアプリケーションのインストールやその他の機能のサポート状況はどのブラウザーを使用するかによって異なります。
サイトで PWA 機能を使用するには、プロジェクト環境に必要な要件が 2 つあります。
これらは、作成者が開発チームと連携する必要がある技術的な手順です。これらの手順は、サイトごとに 1 回だけ必要です。
コアコンポーネントリリース 2.15.0 以降は、AEM Sites の PWA 機能を完全にサポートしています。AEMaaCS には常に最新バージョンのコアコンポーネントが含まれているので、標準搭載の PWA 機能を活用できます。AEMaaCS プロジェクトは、この要件を自動的に満たします。
アドビは、カスタムコンポーネントまたはコアコンポーネントから拡張されていないコンポーネントで PWA 機能を使用することはお勧めしません。
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 機能を有効にできます。次に、その方法の概要を示します。個々のオプションの詳細は「詳細なオプション」節で説明されています。
AEM にログインします。
メインメニューで、ナビゲーション/Sites をタップまたはクリックします。
サイトプロジェクトを選択し、「プロパティ」をタップまたはクリックするか、ホットキー p
を使用します。
「プログレッシブ Web アプリケーション」タブを選択し、該当するプロパティを設定します。少なくとも、次のことをおこないます。
「PWA を有効にする」オプションを選択します。
スタートアップ URL を定義します。
512x512 の png アイコンを DAM にアップロードし、それをアプリケーションのアイコンとして参照します。
サービスワーカーがオフラインにするパスを構成します。一般的なパスは次のとおりです。
/content/<sitename>
/content/experiencefragements/<sitename>
/content/dam/<sitename>
/etc/clientlibs/<sitename>
「保存して閉じる」をタップまたはクリックします。
これでサイトが構成され、ローカルアプリケーションとしてインストールできます。
これで、PWA をサポートするようにサイトを設定できたので、体験してみてください。
次の節では、PWA 用にサイトを設定する際に使用できるオプションの詳細を説明します。
これらの設定を使用すると、訪問者のホーム画面にサイトをインストールしてオフラインで使用できるようにすることで、サイトをネイティブアプリケーションのように動作させることができます。
これらの設定により、このサイトの一部はオフラインで使用できるようになり、訪問者のデバイスでローカルに使用できるようになります。Web アプリケーションのキャッシュを制御してネットワークリクエストを最適化し、オフラインエクスペリエンスをサポートできます。
デベロッパーチームは、オフライン設定の設定方法に関する貴重な情報を得られる可能性が高くなります。
AEM Sites では PWA 機能の一部が利用できます。これらには、いくつかの顕著な制限があります。
また、アドビは、PWA を実装する際に次のような推奨をしています。
アドビでは、事前キャッシュするページ数を制限するよう勧めています。
クライアントライブラリにはキャッシュセレクタが追加され、lc-<checksumHash>-lc
のようなパターンで配信されます。ライブラリを構成するファイル(および依存関係)が変更されるたびに、このセレクターは変更されます。サービスワーカーが事前にキャッシュするクライアントライブラリを一覧表示し、新しいバージョンを参照する場合は、手動でエントリを取得して更新します。その結果、プロジェクトスクリプトやスタイルシートが安定した後は、サイトを PWA に設定することをお勧めします。
AEM コアコンポーネントの画像コンポーネントは、取得に最適な、フロントエンドのレンディションを 1 つ決定します。このメカニズムには、そのリソースの最終変更時刻に対応するタイムスタンプも含まれます。このメカニズムにより、PWA の事前キャッシュの設定が複雑になります。
事前キャッシュの設定では、取得可能なすべてのパスのバリエーションをリストする必要があります。これらのバリエーションは、画質や幅などのパラメーターで構成されます。これらのバリエーションの数を、最大 3 つ(小、中、大)に減らすことを強くお勧めします。それには、画像コンポーネントのコンテンツポリシーダイアログを使用します。
慎重に設定しないと、メモリとネットワークの消費が PWA のパフォーマンスに大きな影響を与える可能性があります。例えば、50 枚の画像を事前キャッシュし、画像ごとに 3 つの幅がある場合、サイトを管理するユーザーは、ページプロパティの PWA 事前キャッシュセクションに、最大 150 個のエントリのリストを保持する必要があります。
また、アドビでは、プロジェクトでの画像の使用が安定してから、サイトを PWA に設定することを勧めています。