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
- 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.
-
HTTPS: Your website or web app must be served over
HTTPS
for Web Push integration to work (except when testing / developing onhttp://localhost
). - 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.23
of the Pushy Web SDK from npm using the following command:
npm install pushy-sdk-web --save
Alternatively, import version 1.0.23
by adding the following line to the <head>
tag:
<script src="https://sdk.pushy.me/web/1.0.23/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.23
importScripts('https://sdk.pushy.me/web/1.0.23/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" />