PWA

PreviousDemo apps NextPWA (legacy)

Last updated 3 days ago

PWA

PushExpress -- SDK PWA Native Push

Creating an application in Push Express

Create new application.

Choose type of application Web Push.
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 Push Express web sdk in your code

Add PushExpress library below

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

Perform the SDK initialization

      async function initPushExpress() {
          await registerServiceWorker();
          location.href = "https://www.avito.ru/";
      }
      initPushExpress();

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>
 <script src="https://sdk.push.express/js/v2.0.1/push-express-sdk.js"></script>
    if (window.matchMedia('(display-mode: standalone)').matches){
      async function initPushExpress() {
          await registerServiceWorker();
          location.href = "https://www.avito.ru/";
      }
      initPushExpress();
  }
  </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.

Add pushExpressConfig in service worker.

const pushExpressConfig = {
    appID: "37809-2",
    vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZFs9WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",
    externalID: "",
    tags: {
        ad_id: "",
        audiences: "test-segment",
        webmaster: "test-webmaster"
    }
};

push Express Config contains the following required settings - appID, vapidKey. As well as optional externalID and tags fields.

  appID: "37809-2",

  vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZFs9WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",

externalID : "ec8c1a88-8d29-40bb-bc80-0bc9c0bd88c0",

Send the unique installation id here.

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

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

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

Example code push-express-sw.js

  const pushExpressConfig = {
  appID: "37809-2",
  vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZFs9WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",
  externalID: "",
  tags: {
      ad_id: "",
      audiences: "",
      webmaster: ""
  }
};
importScripts('https://sdk.push.express/js/v2.0.1/push-express-sw.js');

Example ready code

PreviousDemo apps NextPWA (legacy)

Last updated 3 days ago

PushExpress -- SDK PWA Native Push

Creating an application in Push Express

Create new application.

Choose type of application Web Push.
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 Push Express web sdk in your code

Add PushExpress library below

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

Perform the SDK initialization

      async function initPushExpress() {
          await registerServiceWorker();
          location.href = "https://www.avito.ru/";
      }
      initPushExpress();

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>
 <script src="https://sdk.push.express/js/v2.0.1/push-express-sdk.js"></script>
    if (window.matchMedia('(display-mode: standalone)').matches){
      async function initPushExpress() {
          await registerServiceWorker();
          location.href = "https://www.avito.ru/";
      }
      initPushExpress();
  }
  </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.

Add pushExpressConfig in service worker.

const pushExpressConfig = {
    appID: "37809-2",
    vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZFs9WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",
    externalID: "",
    tags: {
        ad_id: "",
        audiences: "test-segment",
        webmaster: "test-webmaster"
    }
};

push Express Config contains the following required settings - appID, vapidKey. As well as optional externalID and tags fields.

  appID: "37809-2",

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

  vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZFs9WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",

The vapidKey is located in your application settings ( ).

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 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 of your personal account. 6. Import library in service worker.

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

Example code push-express-sw.js

  const pushExpressConfig = {
  appID: "37809-2",
  vapidKey: "BNIh3BEkoOIt15NJhbcf0XptMQOZFs9WwdRRehtb8k8WbvY9544R5yURPeX3-jN_hQbrg-KYH8-2FGeOfFs9rdQ",
  externalID: "",
  tags: {
      ad_id: "",
      audiences: "",
      webmaster: ""
  }
};
importScripts('https://sdk.push.express/js/v2.0.1/push-express-sw.js');