WorkBox により Adobe Experience Manager で最新のウェブ環境を構築

Kalyanaraman Balasubramaniam Krishnan
Kalyanaraman Balasubramaniam Krishnan
GitHub
Salvatore Denaro

このブログ投稿は、Adobe Experience Manager（AEM）ウェブ アプリケーションに最新のウェブ エクスペリエンスを提供することに関心があるテクニカル リードやデジタル マーケティング アナリストの方向けです。ここでは、プログレッシブ ウェブアプリ（PWA）の概要と、WorkBox ライブラリの設定を使用して AEM で PWA をコーディングなしで作成するために必要な内容について説明します。

PWA を選ぶ理由

プログレッシブ ウェブアプリは、最新のウェブの機能を活用します。デバイスにインストールでき、読み込みが速く、次回以降のアクセスでは即座に読み込まれます。入力に迅速に対応します。接続が不安定な状態でもオフラインでも適切に動作します。PWA は最新の API を使用して、オプションのフルスクリーン UI、バックグラウンド更新、オフライン データ アクセスを備えた、魅力的なアプリのようなエクスペリエンスを提供します。

ウェブアプリからプログレッシブ ウェブアプリへ移行しましょう。

ウェブアプリを Progressive Web App に拡張するには、次の 2 つのアーティファクトを追加する必要があります。

  • ウェブアプリ マニフェスト: アプリのエントリ ポイント URL、PWA の表示に使用されるアイコン、アプリケーションの外観と動作を記述するその他の構成を定義する JSON 構成ファイル。
  • Service Worker: PWA が使用するリソースとそれらへのアクセス方法を定義することで、PWA を拡張するバックグラウンド サービスを提供するスクリプト。

Service Worker とは

本質的には、Service Worker は、ユーザーがウェブ アプリケーションを操作するときにブラウザが独立して実行するスクリプトにすぎません。アクティブなサービス ワーカーは、Cache API を使用したスマート キャッシュ、Background Sync API を使用したデータの最新化、プッシュ通知との統合などのサービスを提供します。適切なキャッシュ戦略を採用した Service Worker は、事前キャッシュに保存されたリソースを即座に返す、データをキャッシュに保存する、ウェブに接続したときにリソースを更新するなど、さまざまなシナリオで安定した信頼性の高いユーザー エクスペリエンスを提供します。

Service Worker はクライアント上に存在しますが、ネットワークをプロキシします。

ワークボックスのロゴ

Service Worker をゼロから作成するのは難しい場合があります。Workbox は、これを簡単にするために作成されました。Workbox は、Cache Storage API を使用した Service Worker とキャッシュの書き込みと管理に役立つライブラリ セットです。Service Worker と Cache Storage API を併用すると、ネットワークやキャッシュからのアセット（HTML、CSS、JS、画像など）のリクエスト方法を制御できます。キャッシュ内のコンテンツをオフライン時に返すこともできます。Workbox を使用すると、本番環境対応のコードを使用して、両方の機能をすばやく設定して管理できます。

AEM サイトを PWA にアップグレードする

Adobe Experience Manager（AEM）は、ウェブサイト、モバイルアプリ、フォーム、デジタル サイネージを構築するための包括的なコンテンツ管理ソリューションです。マーケティング コンテンツとアセットの管理が容易になります。

AEM にはウェブアプリの構築に豊富なライブラリが用意されていますが、これまでは Service Worker とマニフェストを追加して PWA を構築することは困難でした。

Adobe Experience Manager Sites は、Adobe Experience Manager に含まれる UI 作成ツールです。AEM サイトを Adobe Experience Manager をクラウド サービスとして使用すると、設定を行うだけで、コーディングなしで、既存の AEM ウェブサイトやシングルページ アプリケーションを、インストール可能なオフライン対応のプログレッシブ ウェブアプリに簡単に変換できます。Workbox を使用してプログレッシブ ウェブアプリのベスト プラクティスを提供し、ボイラープレート マニフェストや Service Worker の記述の複雑さを解消します。

AEM はコンテンツのローカライズをサポートしているため、言語 / 地域ごとに異なるブランディングやオフライン コンテンツを使用できます。これを行うには、言語マスターごとに異なる PWA 構成をビルドします。

AEM での PWA 構成の開始

Adobe Experience Manager にクラウド サービスとしてログインし、Adobe Experience Manager のサイトページまたは言語マスターを選択して [プロパティ] をクリックします。[Progressive Web App] というタブが表示されます（注: このタブが表示されない場合は、Adobe にお問い合わせのうえ、この機能を有効にしてください）。プログレッシブ ウェブ アプリのインストールと外観は、数回のクリックで構成できます。

AEM Sites のチュートリアルを完了している場合は、WKND サイトをすでにご覧になっている可能性があります。この記事では、WKND デモを開始点として使用します。完了すると、WorkBox を使用して WKND をウェブアプリから PWA に更新できます。

マニフェストを構成する

ウェブアプリ マニフェストは、PWA の外観と動作を記述するプロパティを含む JSON ファイルです。Adobe Experience Manager Sites には、プロパティを構成するための使いやすいユーザー インターフェースが用意されています。

インストール可能なエクスペリエンスのダイアログ ボックスでのマニフェストの構成。

開始 URL は PWA のエントリ ポイントです。ユーザーがスマートフォンで PWA アイコンをクリックすると、起動 URL にアクセスできます。表示モードでは、アプリをウィンドウ表示にするか全画面表示にするかを設定します。アプリの画面の向きを指定することもできます。テーマカラーはウィンドウとツールバーの色で、背景色はアプリの起動時のスプラッシュ画面の色です。アイコンは、アプリがデバイスにインストールされているときに、デバイスのホーム画面またはアプリドロワーに表示される画像です。画像の構成では、次のマニフェスト JSON が生成されます。

{
  "name": "WKND Adventures and Travel",
  "short_name": "WKND Adventures and Travel",
  "start_url": "/content/wknd/us/en.html",
  "display": "standalone",
  "theme_color": "#FFDC00",
  "background_color": "#FF851B",
  "orientation": "any",
  "icons": [
    {
      "src": "/content/dam/wknd/pwa-logo.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ]
}

開始 URL は、ドメインのデフォルトのランディング ページとは異なる場合があります。start_url パラメータを変更すると、認証されていないユーザーや新規ユーザーに表示されるデフォルトのページではなく、アプリケーション エクスペリエンスにユーザーを直接誘導できます。これにより、PWA ユーザーはよりスムーズでアプリのようなエクスペリエンスを利用できます。

AEM は、言語 / 地域によって外観が異なる可能性があることを理解しています。言語 / 地域や言語ごとに異なるプロパティ、色、アイコンを設定してから、その設定をリンク先のページと同期できます。

ブラウザで PWA にアクセスしたら、右クリックして検証し、DevTools を起動して [アプリケーション] パネルでマニフェストを確認します。

DevTools の [Application] パネルの PWA。

サービス ワーカーを構成する

キャッシュに保存するコンテンツと使用するキャッシュ戦略を構成できます。

Service Worker を使用している場合は、キャッシュ戦略に精通しているかもしれません。キャッシュ戦略では、キャッシュに保存するリソースと、キャッシュ、ネットワーク、またはネットワーク フォールバックのキャッシュのいずれでリソースを検索するかを指定します。そうすると、Service Worker のインストール時に事前キャッシュに保存するリソースを選択できます。AEM アプリケーション サービス ワーカーはウォーム キャッシュ戦略を実装しています。つまり、パスが存在しない場合やパスが破損している場合でも、ユーザー エクスペリエンスが中断されることはありません。

[Cache Management (Advanced)] ダイアログ ボックスを使用してサービス ワーカーを構成する。

AEM では、「clientlibs」という用語はクライアントサイド ライブラリを指します。これは、プロジェクトに追加された関連する JavaScript、CSS、静的リソースの組み合わせで、クライアント ウェブブラウザに提供され、クライアント ウェブブラウザによって使用されます。クライアントサイド ライブラリをオフラインで使用するように設定するには、ユーザー インターフェースでライブラリを指定します。

クライアントサイド ライブラリのダイアログ ボックス。

フォントなどのサードパーティ リソースを含めることもできます。このオフライン キャッシュ構成は、内部でワークボックスを使用するアプリケーション用に生成された構成情報を Service Worker に提供します。これだけで、アプリをインストール可能にすることができます。インストールすると、アプリのアイコンがプラットフォーム アプリと同様にモバイル デバイスのホーム画面に表示されます。アイコンをクリックすると、wknd サイトにアクセスできます。

なお、コンテンツやこれらの設定はいつでも変更できます。変更を公開すると、ブラウザによって Service Worker がクライアントで更新され、新しいバージョンの PWA が利用可能なことを知らせるメッセージがユーザーに表示されます。ユーザーはメッセージをクリックしてアプリケーションを再読み込みし、最新のアップデートを取得できます。ブラウザのデベロッパー ツールとアプリケーション パネルを開いて、Service Worker の詳細を表示できます。

DevTools の Service Worker パネル。

キャッシュ ストレージを開くと、ローカルにキャッシュに保存されているコンテンツを確認できます。

DevTools のキャッシュ ストレージ ビュー。

結果

努力の結果を見てみましょう。コーディングなしで構成するだけで、AEM サイトを拡張して Progressive Web App にすることができます。

プログレッシブ ウェブアプリとしての AEM サイト。

Chrome デベロッパー ツールの軽量監査により、ウェブ アプリケーションと構成がプログレッシブ ウェブアプリの標準にどの程度準拠しているかを確認できます。

灯台の監査。

まとめ

プログレッシブ ウェブアプリは、ウェブのクロス プラットフォームとオープンな性質を活かし、開発とメンテナンスのコストを抑えながら、配信を制御し、ウェブサイトにアプリのようなエクスペリエンスを提供します。これにより、エンゲージメントと維持率が向上し、最も重要なことにコンバージョン率が向上します。AEM と Workbox を組み合わせることで、既存のサイトをコーディングなしで簡単に PWA に拡張できます。

参照