PWA

PushExpress -- SDK PWA Native Push

Creating an application in Push Express

  1. Create new application.

  1. Choose type of application PWA/Web.

  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",

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.

  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

Сheck out an example of the finished code >>>

PreviousDemo appsNextKotlin

Last updated