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

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

注意

これは高度な機能で、次を必要とします。

  • PWA に関する知識
  • サイトとコンテンツ構造に関する知識
  • キャッシュ方法の理解
  • 開発チームによるサポート

この機能を使用する前に、開発チームに相談して、プロジェクトに最適な利用方法を決めることをお勧めします。

メモ

このドキュメントで説明する機能は、AEMの2021年3月リリースでCloud Serviceとして利用可能になる予定です。

概要

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

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

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

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

メモ

プログレッシブ Web アプリケーションは発展中のテクノロジーであり、ローカルアプリケーションのインストールやその他の機能のサポート状況はどのブラウザーを使用するかによって異なります。

前提条件

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

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

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

コアコンポーネントを使用します

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

メモ

Adobeは、カスタムコンポーネントまたは古いコンポーネントから拡張されていないコンポーネントに対してPWA機能を使用することをお勧めしません。

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 を定義します。

      PWA を有効にする

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

      PWA アイコンの定義

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

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

      PWA のオフラインパスの定義

  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 値で定義することもできます。
  • 背景色 — アプリケーションの読み込み時に表示される、 アプリケーションの背景色を定義します。
  • アイコン - ユーザーのデバイス上に表示される、アプリケーションを表すアイコンを定義します。
    • アイコンは、サイズが 512x512 ピクセルの png ファイルである必要があります。
    • アイコンは DAM に保存されている必要があります。

キャッシュ管理 (詳細)

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

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

デベロッパーチームは、オフライン設定の設定方法に関する貴重な情報を得られる可能性が高くなります。

制限とRecommendations

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

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

また、PWAを導入する際に、Adobeが次の推奨事項を作成します。

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

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

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

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

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

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

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

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

注意深く設定しないと、メモリとネットワークの消費がPWAのパフォーマンスに大きな影響を与える可能性があります。 また、50個の画像をプリキャッシュし、1つの画像につき3つの幅を持つ場合、サイトを維持するユーザーは、ページプロパティの「PWAプリキャッシュ」セクションで最大150個のエントリのリストを維持する必要があります。

また、Adobeは、画像のプロジェクト使用が安定した後、サイトをPWAにするように設定することをお勧めします。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now