image


Browser SDK tutorial


Contents

  1. Example 1: HTTPS website
  2. Example 2: Only for non-secure HTTP website

Example 1: HTTPS website

  1. Download the library:

    3.1.12 version https://descargas.indigitall.net/IndigitallBrowsers_v3.1.12.zip

    Last version available https://descargas.indigitall.net/IndigitallBrowsers.zip

  2. Unzip files

  3. Now you have the readme and SDK files. Copy the indigitall folder to the root of your web server:

    https://domain/indigitall/

  4. Move the service-worker.min.js to the root of your website https://domain/service-worker.min.js:

  5. Replace the default settings in indigitall.json file:

    Parameter description
    APP_TOKEN The application ID (given by indigitall team)
    WEB_SITE_PUSH_ID  The Apple certificate identifier for Safari browser
    ICON The default notification icon (you can also replace the file indigitall/logo.png)
    TITLE The default notification title
    DEBUG_MODE Enable/disable console.log lines
    VAPID_PUBLIC_KEY Our servers public key (given by indigitall team)

    indigitall.json

    {
      "APP_TOKEN": "12345a67b...",
      "WEB_SITE_PUSH_ID": "web.com.domain",
      "ICON": "/indigitall/logo.png",
      "TITLE": "indigitall",
      "DEBUG_MODE": true,
      "VAPID_PUBLIC_KEY": "BPNci1jg-deZqNqeFdeYWodJ78bF7fsYvbbsDlgO..."
    }
  6. Code some JavaScript to initialize the SDK:

    document.addEventListener('indigitallReady', function() {
      navigator.indigitall.loadIndigitall(function(){
          console.log('Success!!');
        }, function(error){
          console.log('Error!! ' + error);
      });
    });
  7. Load the indigitall library. It is important to load it after the previous block, never before:

    <script type="text/javascript" src="/indigitall/indigitall.min.js?v=x.x.x"></script>

When finished, we would have something similar to this example:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo indigitall</title>
</head>
<body>
  <script>
      document.addEventListener('indigitallReady', function() {
        navigator.indigitall.loadIndigitall(function(){
            console.log('Success!!');
          }, function(error){
            console.log('Error!! ' + error);
        });
      });
  </script>
  <script type="text/javascript" src="/indigitall/indigitall.min.js?v=x.x.x"></script>
</body>
</html>

Don't forget to change indigitall/logo.png by your own logo! and the URL by default in indigitall/safaribridge.php.


Example 2: Only for non-secure HTTP website

Notice: we do not recommend this configuration.

Requirements:

Secure HTTPS page

  1. Download the library:

    3.1.12 version https://descargas.indigitall.net/IndigitallBrowsers_v3.1.12.zip

    Last version available https://descargas.indigitall.net/IndigitallBrowsers.zip

  2. Unzip files

  3. Now you have the readme and SDK files. Copy the folder to the root of your secure web server, where your signup page is going to be:

    https://push.example.com/indigitall/

  4. Copy the service-worker.min.js to the root of your website https://push.example.com/service-worker.min.js:

  5. Replace the default settings by editing indigitall.json:

    Parameter description
    APP_TOKEN The application ID (given by indigitall team)
    WEB_SITE_PUSH_ID  The Apple certificate identifier for Safari browser
    ICON The default notification icon (you can also replace the file indigitall/logo.png)
    TITLE The default notification title
    DEBUG_MODE Enable/disable console.log lines
    VAPID_PUBLIC_KEY Our servers public key (given by indigitall team)

    indigitall.json

    {
      "APP_TOKEN": "APP_TOKEN",
      "WEB_SITE_PUSH_ID": "web.com.domain",
      "ICON": "/indigitall/logo.png",
      "TITLE": "indigitall",
      "DEBUG_MODE": true,
      "VAPID_PUBLIC_KEY": "BPNci1jg-deZqNqeFdeYWodJ78bF7fsYvbbsDlgO..."
    }
  6. Create a signup page (https://push.example.com/index.html) where you will redirect the user to ask him for notification permissions.

  7. Insert the following code to initialize the SDK:

    document.addEventListener('indigitallReady', function() {
      navigator.indigitall.loadIndigitall();
    });
  8. Load indigitall library after the code block above:

    <script type="text/javascript" src="/indigitall/indigitall.min.js?v=x.x.x"></script>

When finished, we would have something similar to the following:

https://push.example.com/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script type="text/javascript">
        document.addEventListener('indigitallReady', function() {
            navigator.indigitall.loadIndigitall();
        });
    </script>
    <script src="/indigitall/indigitall.min.js?v=x.x.x"></script>
</body>

</html>

Non-secure HTTP page, the main page

  1. Include the following block in your main non secure web. Change the INDIGITALL_FOLDER parameter with your signup web (https://push.example.com/indigitall)

    document.addEventListener('indigitallReady', function() {
        var options = {
            INDIGITALL_FOLDER: 'https://push.example.com/indigitall/'
        };
        navigator.indigitall.loadIndigitall(options, function(newUser){
            console.log('Successs!! is new user: ' + newUser);
          }, function(error){
            console.log('Error!! ' + error);
        });
    });
  2. If onLoadSuccess function receives true as first parameter, it means that the user is not signed up on web push notifications. In this case, we have to redirect him to the secure signup web

    function onLoadSuccess(newUser){
      if(confirm('Whould you like to receive push notifications?')){
        window.location.assign("https://push.example.com/indigitall/");
      }
    }
  3. If the user say NO to push notifications, save response in order to avoid asking him again.

    function onLoadSuccess(newUser){
      if(window.localStorage.getItem("UserRejectedNotifications")){
        return;
      }
    
      if(confirm('Would you like to receive push notifications?')){
        window.location.assign("https://push.example.com/indigitall/");
      }else{
        window.localStorage.setItem("UserRejectedNotifications", true);
      }
    }

Don't forget to put your web logo in indigitall/logo.png!, and your web name in indigitall/indigitall.json file, and change the default URL in indigitall/safari-bridge.html.

Tips

  • A gateway is a secure HTTPS server equivalent to a communication channel. You can have several non-secure HTTP pages connected to the same gateway and all of them will receive the same notifications.

  • The Indigitall SDK has some functions that enable you to access the localStorage of the gateway and store whatever data you want to. In this way, you can access data from any of your non-secure HTTP pages, even if they are in different domains.

  • You can view a more complete demo at http://wp.indigitall.net, and you can see the source code on your browser by clicking the Ctrl+U key combination.