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、バックグラウンド更新、データへのオフライン アクセスなど、魅力的なアプリのようなエクスペリエンスを提供します。

ウェブアプリからプログレッシブ ウェブアプリへ。

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

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

Service Worker とは

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

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

Workbox のロゴ

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 サイトは、Adobe Experience Manager に含まれる UI 構築ツールです。AEM サイトをクラウド サービスとして Adobe Experience Manager と併用すると、既存の AEM ウェブサイトや単一ページのアプリケーションを、コーディングなしで設定するだけでインストール可能なオフライン対応のプログレッシブ ウェブアプリに簡単に変換できます。Workbox を使用してプログレッシブ ウェブアプリのベスト プラクティスを提供し、ボイラープレート マニフェストと Service Worker を作成する複雑さを抽象化します。

AEM はコンテンツのローカライズに対応しているため、言語 / 地域ごとに異なるブランディングやオフライン コンテンツを使用できます。そのためには、言語マスターごとに異なる PWA 設定を作成します。

AEM で PWA の構成を開始

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

AEM サイトのチュートリアルをすでに完了している場合は、以前に WKND サイトをご覧になったことがあるかもしれません。この記事では、出発点として WKND デモを使用します。これで、WorkBox を使用して WKND をウェブアプリから PWA にアップデートできます。

マニフェストを構成する

ウェブアプリ マニフェストは、PWA の外観や動作を記述するプロパティを含む JSON ファイルです。Adobe Experience Manager サイトは、プロパティを設定するための使いやすいユーザー インターフェースを備えています。

インストール可能なエクスペリエンスのダイアログ ボックスでマニフェストを設定する。

開始 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 を起動し、[Applications] パネルの下にマニフェストを表示できます。

DevTools の [Application] パネルの PWA。

Service Worker を構成する

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

Service Worker を使用している方は、キャッシュ戦略をご存じかもしれません。キャッシュ戦略では、キャッシュに保存するリソースと、キャッシュからリソースを探すか、ネットワークを先に検索するか、ネットワーク フォールバックのあるキャッシュで探すかを指定します。これにより、Service Worker のインストール時に事前キャッシュに保存するリソースを選択できます。AEM Application Service Worker はウォーム キャッシュ戦略を実装します。つまり、欠落しているパスや無効なパスを指定しても、ユーザー エクスペリエンスが損なわれることはありません。

[Cache Management (Advanced)] ダイアログ ボックスを使用して Service Worker を構成します。

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

クライアント側のライブラリ ダイアログ ボックス

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

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

DevTools の Service Worker パネル。

キャッシュ ストレージを拡張すると、ローカルにキャッシュされたコンテンツを表示できます。

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

結果

努力の結果を見てみましょう。コーディングなしで構成するだけで、AEM サイトが強化され、プログレッシブ ウェブアプリになります。

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

Chrome デベロッパー ツールには、ウェブ アプリケーションと設定がプログレッシブ ウェブアプリの標準にどの程度準拠しているかを確認できる、ライトハウス監査機能が備わっています。

灯台の監査。

おわりに

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

参照