Requirements

Support for web push notifications requires:

• Your website to be SSL-enabled (https://)

• One publicly-accessible file to be placed at the public root of your site

• A snippet of Integration HTML to be added to each page on your site.

  • This can also be done with a tag manager.

There are separate steps that should be followed depending on whether or not you already have a Service Worker on your site:

• If you do not have a Service Worker follow the Steps for No Existing Service Worker section below.

• If you already have a Service Worker skip to the Steps for Existing Service Worker section below.

Steps for Sites Without an Existing Service Worker

Step 1: Place the Service Worker File

Web Push support requires a Service Worker to be publicly accessible from your domain. Ideally this file serves from the public root of your domain. For example, when placed, the file should be accessible from your domain like this: https://platform.pushly.com/pushly-sdk-worker.js.

Download the Service Worker here: https://cdn.p-n.io/pushly-sdk-worker.js​

If you are unable to place the service worker at the root or your domain you can follow the What if I can't serve the Service Worker from the public root of my site FAQ at the bottom of this page.

Step 2: Add the Integration HTML

Add the following HTML snippet to the head section of your site and replace both instances of DOMAIN_KEY with the value provided by your account manager.

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

Steps for Sites With an Existing Service Worker

Step 1: Update the Existing Service Worker Code

First, if you have an existing Push Provider or your own custom Web Push code, remove their code from the existing Service Worker.

Next, add the following importScripts line to your existing Service Worker ensuring that you replace the DOMAIN_KEY string with the value provided by your Pushly account manager:

importScripts("https://cdn.p-n.io/pushly-sw.min.js?domain_key=DOMAIN_KEY");

Step 2: Add the Integration HTML

Add the following HTML snippet to the head section of your site and perform the following replacements:

1. Replace both instances of DOMAIN_KEY with the value provided by your account manager.

2. Replace /sw.js with the absolute location of the existing Service Worker file from the public root.

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

FAQ

What if I can't serve the Service Worker from the public root of my site?

If you have to serve the Service Worker from a subdirectory of your site then an additional HTTP Response Header must be included when the file is served. This HTTP Header should look like the following:

Service-Worker-Allowed: /

This instructs the browser to allow the Service Worker to be scoped to the root directory rather than its default scoping of the directory it is in.