直接連携ガイド

このページでは、ウェブサイトにサービスワーカーを直接使用する推奨される方法で、ウェブプッシュ通知を連携するために必要な手順を詳述します。この方法を使用すると：

• ウェブサイトのルートにサービスワーカーを作成または更新する必要があります。
• ユーザーに送信される通知は、あなたのドメイン名から直接送信されたものとして表示されます。

要件

• ウェブサイトのルートスコープでサービスワーカーを設定できる必要があります。
• サービスワーカーはウェブサイトと同じドメインから読み込まれる必要があります — つまり、CDNやその他のサードパーティの場所から読み込むことはできません。
• サービスワーカー内にFanplayrのウェブプッシュ通知スクリプトを含めることができる必要があります。

この方法の要件を満たせない場合は、代替方法としてポップアップ連携を参照してください。

制限事項

ブラウザサポート

Push APIを実装しているモダンなウェブブラウザとオペレーティングシステムでサポートされています。

デバイス	ブラウザ	サポート
デスクトップ	Chrome	v42+
デスクトップ	Edge	v17+ 注: Edgeは、通知リクエストをURLバーの小さな「ベル」アイコン（🕭）の背後に隠すことが多く、ユーザーがリクエストに気づきにくくなっています。
デスクトップ	Firefox	v44+
デスクトップ	Opera	v29+
デスクトップ	Safari	macOS Venturaでv16+
モバイル	Chrome Android	v42+
モバイル	Android版Firefox	v48+
モバイル	Android版Opera	v29+
モバイル	iOS版Safari	サポートされていません

ユーザーに購読を促すためにFanplayrウィジェットを使用する場合、「ウェブプッシュ通知を購読可能」セグメンテーションフィルターを活用して、現在購読しておらず、サポートされているウェブブラウザを使用しているユーザーのみがウィジェットのターゲットとなるようにする必要があります。

ユーザー体験

1. 通知送信の許可を要求する： まだ通知を購読していないユーザーには、購読を促すメッセージ（例：「最新のニュースとオファーで常に情報を入手してください」）が表示されたウィジェットが表示されます。ユーザーが主要なコールトゥアクションをクリックすると、ブラウザがプッシュ通知の送信許可を求めます。
2. ユーザーが許可を与える： ユーザーがプッシュ通知の受信に同意した場合、ブラウザのプロンプトで「許可」または「はい」をクリックできます。この時点でサブスクリプションが作成され、Fanplayrのデータベースに保存され、その後通知の送信に使用されます。
3. Fanplayrがプッシュ通知を送信する： あなたのビジネスは、Fanplayrのメッセージングサービスを通じて、購読しているユーザーに通知を送信します。ユーザーは、ブラウザが開いている限り、たとえあなたのウェブサイトを直接訪問していなくても、自分のデバイスでこれらの通知を見ることができます。

ベストプラクティス

実際にブラウザの許可を要求する前に、Fanplayrのターゲティング機能を使用して、通知の購読に興味があるかどうかをユーザーに尋ねる中間ウィジェットを表示することを強くお勧めします。これは、いくつかの理由で重要です。

• ユーザーが通知を有効にするためのブラウザの許可リクエストをブロックした場合、ユーザーがブラウザの設定で明示的に許可をリセットしない限り、再度許可を要求することはできません。
• 多くのウェブブラウザはますます制限を厳しくしており、ユーザーの操作なしにプログラムで生成された許可リクエストの表示を妨げることがあります — つまり、ユーザーがページに到着した直後にブラウザの許可リクエストを表示するのではなく、クリックするとリクエストがトリガーされるコールトゥアクションを表示するようにしてください。

連携ガイド

ウェブサイトのルートスコープでサービスワーカーを設定できる必要があります。これは2つの方法のいずれかで実現できます。

• サービスワーカーのJavaScriptファイルをウェブサイトのルートにホスティングする — 例：あなたのドメインがmybrand.comで、サービスワーカーファイルが**https://mybrand.com/service-worker.js**にある場合、サービスワーカーはデフォルトでルートでアクティブになります。
• あるいは、サービスワーカーのJavaScriptファイルをサブディレクトリにホスティングし、サーバーからのファイルのレスポンスに特別なヘッダー**Service-Worker-Allowed: /**が含まれていることを確認することで、ブラウザがウェブサイトのルートでそれをアクティブにできるようにします。

あなたのシナリオに最も合った以下のいずれかの説明ガイドに従ってください。

既存のサービスワーカーがある場合

ウェブサイトにすでにサービスワーカーがある場合は、このセクションに従ってください。既存のサービスワーカーコードにFanplayrのウェブプッシュ通知スクリプトを含める方法をガイドします。

既存のサービスワーカーが、このドキュメントの冒頭で概説されている要件、すなわちウェブサイトのルートスコープで実行されるように設定されていることを前提としています。

1. 既存のサービスワーカーにスクリプトを含める

Fanplayrのウェブプッシュ通知を処理するためのスクリプトをインポートするには、サービスワーカーのJavaScriptファイルに以下の内容を追加してください：

var fanplayrOptions = {
  version: 1,
  // `true`の場合、Fanplayrはサービスワーカーに「install」および「activate」イベントハンドラーを追加し、
  // これにより、キャッシュの読み込みを待つことなく、サービスワーカーが即座にインストールおよびアクティブ化されます。
  // サービスワーカーがこれらのイベントのいずれかを実装している場合は、`false`に設定してください。
  immediate: true
};
importScripts(
  'https://static.fanplayr.com/client/sw.js?v=' + fanplayrOptions.version
);

注： ウェブサイトのニーズとサービスワーカー内の既存のロジックに基づいて、**immediate**オプションを有効にするべきか慎重に検討してください。

2. HTMLスニペットを含める

ウェブサイトのすべてのページに以下のHTMLを含めてください。これは、FanplayrのターゲティングJavaScriptライブラリに対し、あなたのサービスワーカーがこの機能を使用するように設定されていることを指示します。

<script>
  window.fanplayrServiceWorker = true;
</script>

サービスワーカーがない場合

ウェブサイトにまだサービスワーカーを使用していない場合は、このセクションに従ってください。サービスワーカーを作成する方法をガイドします。

1. サービスワーカーファイルを作成してアップロードする

ウェブサーバーのルートに**service-worker.js**という名前の新しいJavaScriptファイルを作成し、以下の内容を記述してください。：

importScripts('https://static.fanplayr.com/client/sw.js');

このファイルがウェブサーバーによって、正しいコンテンツタイプ**Content-Type: text/javascript**で提供されていることを確認してください。

例1

あなたのドメイン名がmybrand.comで、ウェブサイトのルートにサービスワーカーファイルをアップロードできるため、**https://mybrand.com/service-worker.js**でアクセスできます。

例2

あなたのドメイン名がmybrand.comですが、ウェブサイトのルートにサービスワーカーファイルをアップロードできない場合（ホスティングされたEコマースウェブサイトを使用しており、ルートへのファイルアップロードが許可されていない場合など）。

代わりに、「assets」サブディレクトリにファイルをアップロードして、**https://mybrand.com/assets/service-worker.js**でアクセスできるようにします。また、ウェブサーバーを設定して、ファイルの応答に**`Service-Worker-Allowed: /`**ヘッダーを含めることで、ブラウザがそれをウェブサイトのルートでサービスワーカーとして使用できるようにします。

2. HTMLスニペットを含める

明示的に要求されない限り、この手順を実行しないでください。

ウェブサイトのすべてのページに以下のHTMLスニペットを含めてください。このスクリプトは、前の手順で作成したJavaScriptファイルをウェブサイトのサービスワーカーとして使用するようブラウザに指示します。

<script
  src="https://static.fanplayr.com/client/sw-load.js"
  data-path="/service-worker.js"
></script>

注： サービスワーカーに別のファイル名を使用した場合は、スクリプトの**data-path**属性をそれに合わせて更新してください。

サービスワーカーがない場合、かつFanplayrのSalesforce Commerce Cloudプラグインを使用している場合

FanplayrのSFCCプラグインを使用しており、ウェブサイトにまだサービスワーカーがない場合は、このセクションに従ってください。すでにサービスワーカーがある場合は、既存のサービスワーカーがある場合の指示に従ってください。

1. サービスワーカーを有効にする

Fanplayrプラグインの設定ページに移動し、以下のスクリーンショットに示すようにサービスワーカーを有効にしてください：

2. サービスワーカーをルートからアクセス可能にする

1. SFCC内で、Business Manager / Merchant Tools / SEO / Aliases に移動します。
2. エイリアスの設定を編集して、以下のルートを追加し、必要に応じてホスト名に合わせて調整してください。

{
  "my-store.demandware.net" : [
    {
      "if-site-path": "/serviceWorker.js",
      "pipeline": "Fanplayr-ServiceWorker"
    }
  ]
}

既存の購読者の移行

以前にウェブサイトでウェブプッシュ通知に別のサービスを使用していた場合、以下の条件を満たせば、ユーザーのために作成された最近の購読の一部を移行できる可能性があります。

1. Fanplayrに、他のサービスからアクティブなユーザー購読の詳細をエクスポートして提供できること。最低限、各ユーザー購読について以下の詳細が含まれている必要があります。
   • 購読エンドポイント（以下の例）
   • 購読p256dhキー（以下の例）
   • 購読認証キー（以下の例）
2. 購読の生成に使用されたウェブプッシュVAPID公開鍵と秘密鍵のペアをFanplayrに提供できること（以下の例）

# 公開VAPIDキーの例:
BCK1IQyb-o7-uqWBMgGM0UMZ_kRhvgr2evq3c0Yz2ZQsjH0mz1rxbq3j5i7mOlT7bljgq5lHBmPuvFmZ1jtNQV4

# 秘密VAPIDキーの例:
XG5k9uNkfqbc9rW0_fsJmbSZfVYUKsEdtc7PeB2vU6s

# 購読エンドポイントの例（ユーザーごと）:
https://fcm.googleapis.com/fcm/send/e9urHUUzfsc:APA91bEqiCiCLbxYiyoP0iuqxUwzzVOkMLic6CHgb7A0J4u75ME6EOFng_ts1b1-wJoIwaeSecH5ucvaxZ-9o08VaI4DwXpNPfmcvOPoXMZVLYJ9VXFCffakDDgVKU3xDAEO-wDq-Vrt

# 購読p256dhキーの例（ユーザーごと）:
BJWvtiOEpgYCMFYHM8_hHo8bxm294DyFzOgpOubsRc21MVfl4z6BklEGzYVvYu3JVO7AjrghxCAcA5BPDlacT9s

# 購読認証キーの例（ユーザーごと）:
OEBqFrdGvONmWXP-BDN4Qg

移行の制限事項

1. Fanplayrが以前使用されていたサービスからの購読の一部しか移行できない可能性があることを理解しておくことが重要です。これは、一部の購読が自然に非アクティブになったり、その間に期限切れになったりするためです。
2. Fanplayrのターゲティングがサイトに連携された後、ユーザーがウェブサイトに戻るまで、移行された購読への通知送信のオプションが制限される可能性があることも理解しておくことが重要です。
   • これは、Fanplayrが移行された購読だけではユーザーに関する知識を持たないためで、ユーザーに関するFanplayrの知識を購読と内部的に関連付けるためには、ユーザーが購読を伴ってウェブサイトに戻る必要があるためです。
   • それまでの間でも、フィルターなしで全ての購読者をターゲットにしたプッシュ通知を送信することは可能です。

トラブルシューティング

サービスワーカーが検出されない

Fanplayrのsw-load.jsスクリプトを使用している場合、これがFanplayrのトラッキングコードよりも前にウェブページに含まれていることを確認する必要があります。

サービスワーカーJavaScriptファイルをルートにアップロードできない

サービスワーカーのJavaScriptファイルをサーバーのルートにアップロードできない場合でも、特定のヘッダーを付けて別の場所にアップロードできれば続行できる可能性があります。

1. サーバーがサービスワーカーファイルを以下のヘッダーで配信していることを確認してください。
   1. Content-Type: text/javascript
   2. Service-Worker-Allowed: /
2. サービスワーカーを手動で登録している場合（当社のsw-load.jsスクリプトを使用していない場合）、ワーカーがルートスコープでロードされるようにコードを更新する必要があります。例：

<script>
  if ('serviceWorker' in navigator) {
    // 注：PATH_TO_SERVICE_WORKERをサーバー上の正しいパスに置き換えてください。
    navigator.serviceWorker
      .register('/PATH_TO_SERVICE_WORKER/serviceWorker.js', {
        // サービスワーカーをルートスコープで強制的にロードします。
        scope: '/'
      })
      .then(function () {
        window.fanplayrServiceWorker = true;
      });
  }
</script>