PWA
Last updated
Last updated
PushExpress -- SDK PWA Native Push
Create new application.
Choose type of application PWA/Web.
After creating the application, push_express_app_id will be available.
The VAPID KEY will also be available in application settings. You will need it when integrating the sdk in the app.
Add PushExpress library below
<script src="https://sdk.push.express/js/v2.0.2/push-express-sdk.js"></script>Perform the SDK initialization
if (window.matchMedia('(display-mode: standalone)').matches){
async function redirectUrl() {
await initPushExpress({
appID: "32809-2221",
vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZF29WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",
externalID: "ec8c1a88-8d29-40bb-bc80-0bc9c0bd88c0",
tags: {
adID: "",
segment: "test-segment",
webmaster: "test-webmaster"
}
});
location.href = "https://www.google.com/";
}
redirectUrl();
}Initialization function contains the following required settings - appID, vapidKey. As well as optional externalID and tags fields.
appID: "32809-2221",appID required field is located on the application page in the Push Express service (look here).
vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZF29WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",The vapidKey is located in your application settings ( look here).
externalID : "ec8c1a88-8d29-40bb-bc80-0bc9c0bd88c0",Send the unique installation id here.
tags: {
audiences: "test-segment",
}The segment code. Use it to add a device to a segment. Segments can be created in the segments section of your personal account.
tags: {
webmaster: "test-webmaster",
}To transfer devices to other users of the service, use the functionality of webmasters. You can add a webmaster in the personal section of your personal account.
Example code index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h1 id="header"></h1>
</body>
</html>
<script src="https://sdk.push.express/js/v2.0.2/push-express-sdk.js"></script>
<script>
if (window.matchMedia('(display-mode: standalone)').matches){
async function redirectUrl() {
await initPushExpress({
appID: "32809-2221",
vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZF29WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",
externalID: "ec8c1a88-8d29-40bb-bc80-0bc9c0bd88c0",
tags: {
adID: "",
segment: "test-segment",
webmaster: "test-webmaster"
}
});
location.href = "https://www.google.com/";
}
redirectUrl();
}
</script>Create service worker file in your project. The file name must be as follows "push-express-sw.js".
[!IMPORTANT] The service worker file must have a name push-express-sw.js . Otherwise, the installation of service worker will fail.
Import library in service worker.
importScripts('https://sdk.push.express/js/v2.0.2/push-express-sw.js');Example code push-express-sw.js
importScripts('https://sdk.push.express/js/v2.0.2/push-express-sw.js');