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 はクライアント上に存在し、ネットワークをプロキシします。

ワークボックスのロゴ

Service Worker は、ゼロから記述するのは難しい場合があります。ワークボックスはこれを簡単にするために作成されました。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 の Google サイトでは、使いやすいユーザー インターフェースを使用してプロパティを設定できます。

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

開始 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 では、「clientlibs」という用語は「クライアントサイド ライブラリ」。プロジェクトに追加された関連 JavaScript、CSS、静的リソースを組み合わせたもので、クライアントのウェブブラウザによって配信され、使用されます。ユーザー インターフェースでこれらのライブラリを指定することで、クライアントサイドのライブラリをオフラインで使用するよう簡単に設定できます。

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

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

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

DevTools の Service Worker パネル。

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

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

結果

努力の結果を見てみましょう。設定を行うだけで、コーディングなしで AEM サイトをプログレッシブ ウェブアプリとして利用できます。

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

Chrome デベロッパー ツールには、ウェブアプリと設定がプログレッシブ ウェブアプリの標準にどの程度準拠しているかを確認できる軽量の監査機能が用意されています。

灯台の監査。

まとめ

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

参照