プログレッシブ web アプリケーション機能の有効化

シンプルな設定で、コンテンツ作成者が AEM Sites で作成されたエクスペリエンスに対してプログレッシブ web アプリケーション（PWA）機能を有効化できるようになりました。

はじめに

プログレッシブ web アプリケーション（PWA）を使用すると、AEM サイトのアプリケーションのような臨場感のあるエクスペリエンスを、ユーザーのコンピューターにローカルに保存し、オフラインでアクセスできるようになります。インターネット接続が切れた場合でも、外出中にサイトを閲覧できます。PWA を使用すると、ネットワークが失われたり不安定な状態になった場合でも、シームレスなエクスペリエンスを維持できます。

コンテンツ作成者は、サイトの再コーディングは必要なく、サイトのページプロパティの追加タブとして PWA プロパティを設定できます。

• この設定を保存または公開すると、サイト上の PWA 機能を有効にするマニフェストファイルとサービスワーカーを書き出すイベントハンドラーがトリガーされます。
• Sling マッピングは、サービスワーカーがアプリケーションのルートから提供されるように維持され、アプリケーション内でオフライン機能を可能にするコンテンツのプロキシ化を有効にします。

PWA では、ユーザーはサイトのローカルコピーを保持するので、インターネットに接続していなくてもアプリケーションのような操作をおこなうことができます。

前提条件

サイトで PWA 機能を使用するには、プロジェクト環境に必要な要件が 2 つあります。

1. コアコンポーネントを使用してこの機能を利用する
2. Dispatcher ルールを調整して、必要なファイルを公開する

これらは、作成者が開発チームと連携する必要がある技術的な手順です。これらの手順は、サイトごとに 1 回だけ必要です。

コアコンポーネントの使用

コアコンポーネントリリース 2.15.0 以降は、AEM Sites の PWA 機能を完全にサポートしています。AEMaaCS には常に最新バージョンのコアコンポーネントが含まれているので、標準搭載の PWA 機能を活用できます。AEMaaCS プロジェクトは、この要件を自動的に満たします。

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 の有効化

前提条件が満たされれば、コンテンツ作成者は簡単にサイトの PWA 機能を有効にできます。次に、その方法の概要を示します。個々のオプションの詳細は「詳細なオプション」節で説明されています。

1. AEM にログインします。

2. メインメニューで、ナビゲーション／Sites をタップまたはクリックします。

3. サイトプロジェクトを選択し、「プロパティ」をタップまたはクリックするか、ホットキー p を使用します。

4. 「プログレッシブ Web アプリケーション」タブを選択し、該当するプロパティを設定します。少なくとも、次のことをおこないます。

   1. 「PWA を有効にする」オプションを選択します。

   2. スタートアップ URL を定義します。

      

   3. 512x512 の png アイコンを DAM にアップロードし、それをアプリケーションのアイコンとして参照します。

      

   4. サービスワーカーがオフラインにするパスを構成します。一般的なパスは次のとおりです。

      • /content/<sitename>
      • /content/experiencefragements/<sitename>
      • /content/dam/<sitename>
      • 任意のサードパーティフォントの参照
      • /etc/clientlibs/<sitename>

      

5. 「保存して閉じる」をタップまたはクリックします。

これでサイトが構成され、ローカルアプリケーションとしてインストールできます。

PWA 対応サイトの使用

これで、PWA をサポートするようにサイトを設定できたので、体験してみてください。

1. サポートされているブラウザーでサイトにアクセスします。
2. ブラウザーのアドレスバーに新しいアイコンが表示され、サイトがローカルアプリケーションとしてインストールできることが示されます。
   • ブラウザーによってアイコンは異なり、ローカルアプリケーションとしてインストールできることを示す通知（バナーやダイアログボックスなど）が表示される場合もあります。
3. AEM Desktop App をインストールします。
4. アプリケーションがデバイスのホーム画面にインストールされます。
5. アプリケーションを開いてしばらく作業して、ページがオフラインで使用できることを確認してください。

詳細なオプション

次の節では、PWA 用にサイトを設定する際に使用できるオプションの詳細を説明します。

インストール可能なエクスペリエンスの設定

これらの設定を使用すると、訪問者のホーム画面にサイトをインストールしてオフラインで使用できるようにすることで、サイトをネイティブアプリケーションのように動作させることができます。

• PWA を有効にする - これは、サイトの PWA を有効にするためのメイントグルです。
• 起動 URL - これは、ユーザーがローカルにインストールしたアプリケーションを読み込むときに開く、 優先的な起動 URL です。
  • これは、コンテンツ構造内の任意のパスにすることができます。
  • ルートにする必要はなく、多くの場合アプリケーションの開始ページにします。
  • この URL が相対 URL の場合、マニフェスト URL がベース URL として使用され、解決されます。
  • 空白のままにすると、アプリケーションのインストール元の web ページのアドレスが使用されます。
  • 値を設定することをお勧めします。
• 表示モード - PWA 対応のアプリケーションは、引き続きブラウザーを介して配信される AEM サイトです。これらの表示オプションは、ブラウザーを非表示にする方法や、ローカルデバイス上のユーザーに表示する方法を定義します。
  • スタンドアロン - ブラウザーはユーザーに完全に非表示になり、ネイティブアプリケーションのように表示されます。これがデフォルト値です。
    • このオプションを使用する場合、アプリケーションのナビゲーションは、ブラウザーのナビゲーションコントロールを使用することなく、サイトのページ上のリンクやコンポーネントを使用してコンテンツ全体でナビゲーション可能でなければなりません。
  • ブラウザー - ブラウザーは、サイトの訪問時に通常通り表示されます。
  • 最小限の UI - ネイティブアプリケーションと同様に、ブラウザーはほとんど非表示ですが、基本的なナビゲーションコントロールが表示されます。
  • 全画面表示 - ブラウザーはネイティブアプリケーションと同様に完全に非表示になりますが、全画面モードでレンダリングされます。
    • このオプションを使用する場合、アプリケーションのナビゲーションは、ブラウザーのナビゲーションコントロールを使用することなく、サイトのページ上のリンクやコンポーネントを使用してコンテンツ全体でナビゲーション可能でなければなりません。
• 画面の向き - PWA は、ローカルアプリケーションとして、デバイスの向きを処理する方法がわかっている必要があります。
  • 任意 - アプリケーションはユーザーのデバイスの向きに合わせて調整されます。これがデフォルト値です。
  • 縦置き - ユーザーのデバイスの向きに関係なく、アプリケーションが強制的に縦置きレイアウトで開きます。
  • 横置き - ユーザーのデバイスの向きに関係なく、アプリケーションが強制的に横置きレイアウトで開きます。
• テーマの色 - ローカルユーザーのオペレーティングシステムがネイティブの UI ツールバーとナビゲーションコントロールを表示する方法に影響するアプリケーションの色を定義します。ブラウザーによっては、他のアプリケーションプレゼンテーション要素に影響を与える場合があります。
  • カラーウェルポップアップを使用して、色を選択します。
  • 色は、16 進数または RGB 値で定義することもできます。
• 背景色 — アプリケーションの読み込み時に表示される、 アプリケーションの背景色を定義します。
  • カラーウェルポップアップを使用して、色を選択します。
  • 色は、16 進数または RGB 値で定義することもできます。
  • 特定のブラウザーでは、アプリケーション名、背景色、アイコンから自動的にスプラッシュスクリーンが作成されます。
• アイコン - ユーザーのデバイス上に表示される、アプリケーションを表すアイコンを定義します。
  • アイコンは、サイズが 512x512 ピクセルの png ファイルである必要があります。
  • アイコンは DAM に保存されている必要があります。

キャッシュ管理（詳細）

これらの設定により、このサイトの一部はオフラインで使用できるようになり、訪問者のデバイスでローカルに使用できるようになります。Web アプリケーションのキャッシュを制御してネットワークリクエストを最適化し、オフラインエクスペリエンスをサポートできます。

• コンテンツ更新のキャッシュ方法と頻度 - この設定は、PWA のキャッシュモデルを定義します。
  • 中程度 - この設定は、大半のサイトで使用されます。これがデフォルト値です。
    • この設定を使用すると、ユーザーが最初に閲覧したコンテンツがキャッシュから読み込まれ、ユーザーがそのコンテンツを利用している間は、キャッシュ内の残りのコンテンツが再検証されます。
  • 頻繁 - これは、オークション会社など、非常に速く更新する必要があるサイトで使用します。
    • この設定を使用すると、アプリケーションは最初にネットワーク経由で最新のコンテンツを探し、使用できない場合はローカルキャッシュにフォールバックします。
  • まれ - これは、リファレンスページなど、ほとんど静的なサイトの場合に使用します。
    • この設定を使用すると、アプリケーションは最初にキャッシュ内のコンテンツを探し、利用できない場合はネットワークにフォールバックして取得します。
• ファイルの事前キャッシュ - AEM でホストされているこれらのファイルは、サービスワーカーのインストール時および使用前に、ローカルブラウザーのキャッシュに保存されます。これにより、オフライン時に web アプリケーションが完全に機能することが保証されます。
• パスの包含 - 定義されたパスに対するネットワーク要求が捕捉され、設定された​キャッシュ方法とコンテンツ更新の頻度​に従ってキャッシュされたコンテンツが返されます。
• キャッシュの除外 - これらのファイルは、「 ファイルの事前キャッシュ」および「パスの挿入」の設定に関係なくキャッシュされません。

制限と Recommendations

AEM Sites では PWA 機能の一部が利用できます。これらには、いくつかの顕著な制限があります。

• ユーザーがアプリケーションを使用していない場合、ページは自動的に同期または更新されません。

また、アドビは、PWA を実装する際に次のような推奨をしています。

事前キャッシュするリソースの数を最小限に抑える。

アドビでは、事前キャッシュするページ数を制限するよう勧めています。

• ライブラリを埋め込むと、事前キャッシュ時に管理するエントリの数を減らすことができます。
• 事前キャッシュする画像のバリエーション数を制限します。

プロジェクトスクリプトやスタイルシートが安定した後で PWA を有効にする。

クライアントライブラリにはキャッシュセレクタが追加され、lc-<checksumHash>-lc のようなパターンで配信されます。ライブラリを構成するファイル（および依存関係）が変更されるたびに、このセレクターは変更されます。サービスワーカーが事前にキャッシュするクライアントライブラリを一覧表示し、新しいバージョンを参照する場合は、手動でエントリを取得して更新します。その結果、プロジェクトスクリプトやスタイルシートが安定した後は、サイトを PWA に設定することをお勧めします。

画像バリエーションの数を最小限に抑える。

AEM コアコンポーネントの画像コンポーネントは、取得に最適な、フロントエンドのレンディションを 1 つ決定します。このメカニズムには、そのリソースの最終変更時刻に対応するタイムスタンプも含まれます。このメカニズムにより、PWA の事前キャッシュの設定が複雑になります。

事前キャッシュの設定では、取得可能なすべてのパスのバリエーションをリストする必要があります。これらのバリエーションは、画質や幅などのパラメーターで構成されます。これらのバリエーションの数を、最大 3 つ（小、中、大）に減らすことを強くお勧めします。それには、画像コンポーネントのコンテンツポリシーダイアログを使用します。

慎重に設定しないと、メモリとネットワークの消費が PWA のパフォーマンスに大きな影響を与える可能性があります。例えば、50 枚の画像を事前キャッシュし、画像ごとに 3 つの幅がある場合、サイトを管理するユーザーは、ページプロパティの PWA 事前キャッシュセクションに、最大 150 個のエントリのリストを保持する必要があります。

また、アドビでは、プロジェクトでの画像の使用が安定してから、サイトを PWA に設定することを勧めています。

Business.Adobe.com リソース