Pushpad Logo Pushpad

Getting started with web push notifications

Pushpad is a service for sending push notifications from websites and web apps. It supports the Push API (Chrome, Firefox, Edge, Opera) and APNs (Safari).

The following steps describe how to install Pushpad on your website. Basically they allow you to collect subscribers on your website and to install some code that will be used to display the notifications.

Your website must be served over HTTPS in order to use web push notifications.

First of all create a new sender for your domain.

Then create a new project and select your sender.

After the project is created, you have to add this file to the root folder of your website:

service-worker.js
importScripts('https://pushpad.xyz/service-worker.js');

If your web app already has a service worker, check out the serviceWorkerPath option of the init method.

Then copy and paste the following code on your website just before </head>:

<script>
  (function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js');

  pushpad('init', PROJECT_ID);
  pushpad('subscribe');
</script>

PROJECT_ID must be replaced with your project ID: you can find it in the project settings.

Warning: use only one sender per domain and never switch to another sender. You can use multiple projects for the same domain, but they must be associated to the same sender.

The above code will try to subscribe the user to notifications on page load: if you prefer you can display a button, a custom prompt or perform advanced integrations as described in the examples.

Check out the other documentation sections for more details. For example you can learn more about the Javascript SDK and how to send push notifications.

Working locally

The easiest solution for development is to use localhost. In that case you don't need SSL. However if you are testing using Safari the address must be http://localhost: do not use custom ports nor the ip address. You also need to pass hostname as an option to 'init' as described in the API reference.

A better solution would be to make the local environment look like the production one: for example add something like 127.0.0.1 example.com to /etc/hosts and use real SSL certificates (self-signed certificates don't work).

You may also want to create two separate projects on Pushpad for development and production. However make sure to associate both projects to the same sender, otherwise you may have to unsubscribe and resubscribe from browser settings.