# Wix統合手順

お使いのウェブサイトがWixを利用している場合は、実装のために以下の手順に従ってください

## ステップ1: Service Workerをインストールする

まず、Wix Dev Modeを有効にして、Service Workerを公開するためのファイルを追加します:

1. Wixの管理ダッシュボードを開く
2. ダッシュボード右上の「サイトを編集」ボタンをクリックする
3. サイト上部の「Dev Mode」タブをクリックし、「Dev Modeをオンにする」ボタンをクリックする
4. 「Public & Backend」をクリックする `{}` サイドバーメニューのオプション
5. 「Backend」セクションで「Webモジュールを追加」をクリックし、ファイル名を入力する: `http-functions.js`
6. のファイル全体の内容を次のものに置き換えます: `http-functions.js` ファイル内容を次のコードに置き換えます:

```javascript
import { ok } from 'wix-http-functions';

export function get_ServiceWorker(request) {
  let options = {
    "headers": {
      "Content-Type": "application/javascript",
      "Service-Worker-Allowed": "/"
    },
    "body": "importScripts('https://cdn.p-n.io/pushly-sw.min.js' + (self.location || {}).search || '');"
  };
  
  return ok(options);
}
```

「Publish」ボタンをクリックした後、Service Workerがサイトでアクセス可能であることを確認してください。たとえば: `https://www.mysite.com/_functions/ServiceWorker`

<figure><img src="https://1832353165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lry9Z27iWOZyQEGAgY7%2Fuploads%2FNk5uU2nVh1DdCd4YjhMn%2FScreenshot%202023-10-02%20at%209.59.31%20AM.png?alt=media&#x26;token=16438b11-c8db-4889-8bd0-60a3c5a1a7a1" alt=""><figcaption></figcaption></figure>

## ステップ2: 統合コードスニペットを追加する

1. メインのWixダッシュボードに戻る
2. 「Settings」サイドバーリンクをクリックし、ページ下部付近の「Custom code」をクリックする
3. 「Add Custom Code」ボタンをクリックし、次のコードをコード入力欄に貼り付けます。「All Pages」ラジオボタンは選択されたままにしてください。

{% hint style="warning" %}
必ず置き換えてください **両方の** 箇所の`SDK_KEY` スニペット内の値を、アカウントマネージャーから提供された値に置き換えてください。
{% endhint %}

```
<script src="https://cdn.p-n.io/pushly-sdk.min.js?domain_key=SDK_KEY" async></script>
<script>
  window.PushlySDK = window.PushlySDK || [];
  function pushly() { window.PushlySDK.push(arguments) }
  pushly('load', {
    domainKey: 'SDK_KEY',
    sw: '/_functions/ServiceWorker',
  });
</script>
```

統合手順を完了するには、スニペットを保存してください。

<figure><img src="https://1832353165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lry9Z27iWOZyQEGAgY7%2Fuploads%2FiH0w1ahfnlePhHVucgs7%2FScreenshot%202023-10-02%20at%2010.01.51%20AM.png?alt=media&#x26;token=5e7bb697-a85a-4084-ab49-dd5513849a8b" alt=""><figcaption></figcaption></figure>
