PWA

Last updated 4 months ago

PWA

PushExpress -- SDK PWA

Creating an application in FireBase console

You can use the data from a single Firebase application for multiple Push.Express applications. To do this, use the same firebaseConfig, Web Push certificate, and private-key.json for multiple Push.Express applications.

Go to Firebase Console and create a new project (or use existing one). You can use one project for all your apps.

Open Project Settings.

Go to General, copy firebaseConfig.

Go to Cloud Messaging, Web configuration, press Generate key pair and save key.

Go to Service accounts, press Generate new private key and save it to file private-key.json (you can use same key for all apps).

Creating an application in Push Express

Create new application.

Choose type of application Web Push.

Fill in the required Application name field *

Paste private-key.json file to Firebase Admin SDK private key textbox.

After creating the application, push_express_app_id will be available.

Add Push Express web sdk in your code

Add firebaseConfig, vapidKey, push_express_app_id in your project (where to get this data can be viewed here).

const firebaseConfig = {
    apiKey: "AIzaSyCwe-3H4-bcBRVMVUDh9OVN-JUC4AaoqJA",
    authDomain: "web-push-4e988.firebaseapp.com",
    projectId: "web-push-4e988",
    storageBucket: "web-push-4e988.appspot.com",
    messagingSenderId: "547479027002",
    appId: "1:547479027002:web:e71af6f41f1f753594e403",
    measurementId: "G-MFXVZH805X"
};

The firebase Config is located in the firebase console of your application (look here).

const vapidKey = "BEOEqKl-ClK2syw76a6EX7Ee-sqIanSuGdSezgEErASzoqGZDgd4ZNHhZt485WcOUFYYgnUZxGWdUC50Sa6CAa0";

The vapidKey is located in the firebase console of your application ( look here).

const push_express_app_id = "20605-2";

The push_express_app_id is located on the application page in the Push Express service (look here).

const sw_path = "";

Here you can set the path to the service worker.

const external_id ="ec8c1a88-8d29-40bb-bc80-0bc9c0bd88c0";

Send the unique installation id here.

const redirect_url = "";

The url for the redirect after initializing the sdk. Leave it empty if a redirect is not requirednd the unique installation id here.

const offer = "";

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

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

Add PushExpress library below

<script src="https://sdk.push.express/js/v1.2.1/push-express-sdk.js"></script>

Perform the SDK initialization

<script>initPushExpressSdk();</script>

If a redirect_url value is specified, a redirect will be performed after initialization.

[!IMPORTANT] Do not connect third-party Firebase libraries. The Push Express SDK automatically connects the firebase-messaging libraries and generates the FCM token. It takes 3 seconds to install service Worker and transfer all the necessary death to the server. Wait until the sdk is working and only then redirect the user to the landing page. Or use the const redirect_url parameter to automatically redirect the user after initializing the sdk.

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>
   function generateUUID() { // Public Domain/MIT
       var d = new Date().getTime();//Timestamp
       var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
       return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
           var r = Math.random() * 16;//random number between 0 and 16
           if (d > 0) {//Use timestamp until depleted
               r = (d + r) % 16 | 0;
               d = Math.floor(d / 16);
           } else {//Use microseconds since page-load if supported
               r = (d2 + r) % 16 | 0;
               d2 = Math.floor(d2 / 16);
           }
           return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
       });
   }
    const firebaseConfig = {
//insert your firebaseConfig below
       apiKey: "AIzaSyCwe-3H4-bcBRVMVUDh9OVN-JUC4AaoqJA",
       authDomain: "web-push-4e988.firebaseapp.com",
       projectId: "web-push-4e988",
       storageBucket: "web-push-4e988.appspot.com",
       messagingSenderId: "547479027002",
       appId: "1:547479027002:web:e71af6f41f1f753594e403",
       measurementId: "G-MFXVZH805X"
     };
//insert your vapidKey below
     const vapidKey = "BEOEqKl-ClK2syw76a6EX7Ee-sqIanSuGdSezgEErASzoqGZDgd4ZNHhZt485WcOUFYYgnUZxGWdUC50Sa6CAa0";
//insert your push_express_app_id below
     const push_express_app_id = "20605-7";
     const external_id = generateUUID();
     const sw_path = "";
     const redirect_url = "";
 </script>
 <script src="https://sdk.push.express/js/v1.3.0/push-express-sdk.js"></script>
 <script>initPushExpressSdk();</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 for service worker below.

importScripts('https://sdk.push.express/js/v1.3.0/push-express-sw.js');

Example code push-express-sw.js

 importScripts('https://sdk.push.express/js/v1.3.0/push-express-sw.js');

Example ready code

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

PreviousDemo apps NextKotlin

Last updated 4 months ago