Get the SDK


Note: Please follow our Angular guide if you're using Angular.

Our Web Push SDK currently supports the following browsers and platforms:

  • Safari: iOS 16.4+
  • Chrome: Windows / Mac / Android / iOS 16.4+
  • Firefox: Windows / Mac / Android / iOS 16.4+
  • Opera: Windows / Mac / Android / iOS 16.4+
  • Microsoft Edge: Windows / Mac / Android / iOS 16.4+
  • UC Browser: Android
A few things to note:
  1. China: Web Push on Android is currently not available in mainland China as the technology makes use of FCM behind-the-scenes, which is blocked in China. Consider bundling your website or web app inside an app using a hybrid app development platform such as Cordova or React Native.
  2. HTTPS: Your website or web app must be served over HTTPS for Web Push integration to work (except when testing / developing on http://localhost).
  3. iOS 16.4+: Your website must be installed as a PWA (your users will first need to click the "Share" button -> "Add to Home Screen" before they can sign up for push notifications). Also note that the iOS Simulator does not support Web Push at this time.

Get the SDK


If you're using JavaScript modules, install version 1.0.22 of the Pushy Web SDK from npm using the following command:

npm install pushy-sdk-web --save

Alternatively, import version 1.0.22 by adding the following line to the <head> tag:

<script src="https://sdk.pushy.me/web/1.0.22/pushy-sdk.js"></script>

If you're interested, check out the SDK changelog to see what's new in the latest version of the SDK.

Create Service Worker


Create a file called service-worker.js in the root directory of your website with the following contents:

// Import Pushy Service Worker 1.0.22
importScripts('https://sdk.pushy.me/web/1.0.22/pushy-service-worker.js');

This file must be accessible at https://example.com/service-worker.js, where example.com is your website hostname.

Create PWA Manifest (Optional)


For supporting Web Push on iOS 16.4+, create a file called manifest.json in the root directory of your website with the following contents:

{
    "name": "YourAppName",
    "short_name": "YourAppName",
    "theme_color": "#ff5754",
    "background_color": "#ffffff",
    "display": "standalone",
    "scope": "/",
    "start_url": "https://example.com/",
    "icons": [
        {
            "src": "https://pushy.me/img/pwa/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://pushy.me/img/pwa/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "https://pushy.me/img/pwa/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "https://pushy.me/img/pwa/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Note: Please replace YourAppName with your web app name and https://example.com/ with your web app home page URL. Also, please ensure this file is accessible at https://example.com/manifest.json, where example.com is your website hostname.


Add the following line to the <head> tag of your website / web app to reference the manifest.json in all pages:

<link rel="manifest" href="/manifest.json" />