Push.Express Documentation
  • Push.Express Documentation
  • Quckstart
    • How to use
    • Analytics
    • Demo apps
  • SDK
    • PWA
    • Kotlin
    • Swift
    • Unity
    • Flutter
    • Onesignal
  • API
    • Applications
    • App Instances (Devices)
    • Pushes
    • One-time sending in future
    • Smart weekly sending
    • Instant sending
  • SDK API
    • SDK API specs
Powered by GitBook
On this page
  • Creating an application in Push Express
  • Add Push Express web sdk in your code
  • Example ready code
  1. SDK

PWA

PreviousDemo appsNextKotlin

Last updated 19 days ago

PushExpress -- SDK PWA Native Push

Creating an application in Push Express

  1. Create new application.

  1. Choose type of application Web Push.

  2. After creating the application, push_express_app_id will be available.

  1. The VAPID KEY will also be available in application settings. You will need it when integrating the sdk in the app.

Add Push Express web sdk in your code

  1. Add PushExpress library below

<script src="https://sdk.push.express/js/v2.0.2/push-express-sdk.js"></script>

  1. 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();
    }

  1. Initialization function contains the following required settings - appID, vapidKey. As well as optional externalID and tags fields.

  appID: "32809-2221",
  vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZF29WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",
externalID : "ec8c1a88-8d29-40bb-bc80-0bc9c0bd88c0",

Send the unique installation id here.

tags: {
        audiences: "test-segment",
    }
tags: {
        webmaster: "test-webmaster",
    }

  1. 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>

  1. 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.

  1. Import library in service worker.

    importScripts('https://sdk.push.express/js/v2.0.2/push-express-sw.js');

  2. Example code push-express-sw.js

importScripts('https://sdk.push.express/js/v2.0.2/push-express-sw.js');

Example ready code

appID required field is located on the application page in the Push Express service ().

The vapidKey is located in your application settings ( ).

The segment code. Use it to add a device to a segment. Segments can be created in the of your personal account.

To transfer devices to other users of the service, use the functionality of webmasters. You can add a webmaster in the of your personal account.

segments section
personal section
Сheck out an example of the finished code >>>
look here
look here
Creating an application in Push Express
Add Push Express web sdk in your code
Example ready code