# クイックスタート

## 要件

Webプッシュ通知のサポートには以下が必要です:

* あなたのWebサイトがSSL対応であること（https\://）
* サイト上に配置する、公開アクセス可能なファイル1つ
* サイト上の各ページに追加するIntegration HTMLのスニペット。
  * これはタグマネージャーでも実行できます。

## 手順

{% hint style="info" %}
サイトがWordpressを使用している場合は、これらの手順を省略して以下に従ってください [<mark style="color:青色;">Wordpressプラグイン</mark>](https://documentation.pushly.com/pushly-ja/integration/webpusshu/wordpress-plugin) より簡単に実装できます。
{% endhint %}

### ステップ1: Service Workerファイルを配置する

Service Workerをこちらからダウンロードしてください [<mark style="color:青色;">当社のCDN</mark>](https://cdn.p-n.io/sdk/web/latest/pushly-sw.js) ([<mark style="color:青色;">https://cdn.p-n.io/sdk/web/latest/pushly-sw.js</mark>](https://cdn.p-n.io/sdk/web/latest/pushly-sw.js)）そして、サイトを配信している同じドメイン上の公開アクセス可能な場所に配置してください。例えば: `https://www.example.com/assets/pushly/pushly-sdk-worker.js`

{% hint style="danger" %}
このファイルは **必ず** 、訪問者がサイトを閲覧しているときに存在する潜在的な購読者と同じオリジンから配信される必要があります。別のドメインやサブドメインから配信することはできません。\
\
例えば、訪問者が `www.example.com` にいる場合、Service Workerは `www.example.com.` から配信することはできません `assets.example.com` または `examplecdn.com`.&#x20;

また、これは **絶対に** 301/リダイレクトの背後から配信してはいけません。
{% endhint %}

### ステップ2: Integration HTMLを追加する

Service Workerをドメイン内のサブディレクトリに配置した場合は、 *Service Workerをサブディレクトリに配置* タブの手順に従ってください。そうでない場合は、下の *Service Workerを公開ルートに配置* タブを選択してください。

{% tabs %}
{% tab title="Service Workerをサブディレクトリに配置" %}
以下のHTMLスニペットをサイトのheadセクションに追加し、 **両方の** 箇所の `SDK_KEY` をアカウントマネージャーから提供された値に置き換えてください。

また、 `/absolute/path/to/pushly-sdk-worker.js` スニペット内のテキストをService Workerへの完全なパスに置き換えてください。

```javascript
<script src="http://cdn.p-n.io/sdk/web/latest/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: '/absolute/path/to/pushly-sdk-worker.js',
  });
</script>
```

{% hint style="danger" %}
「 `sw` プロパティにはオリジン/ドメインを含めないでください。パスのみを指定してください。つまり、 `https:///www.example.com` をこの値に含めないでください。
{% endhint %}
{% endtab %}

{% tab title="Service Workerを公開ルートに配置" %}
以下のHTMLスニペットをサイトのheadセクションに追加し、 **両方の** 箇所の `SDK_KEY` をアカウントマネージャーから提供された値に置き換えてください。

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

{% endtab %}
{% endtabs %}

厳格なCSPまたはサブリソース整合性（SRI）が必要ですか？こちらをご覧ください [配信とセキュリティ（SRI）](https://documentation.pushly.com/pushly-ja/integration/webpusshu/sdk/tosekyuritisri).