Advanced Push Notification Usage

Posted on 18. February 2021 by Jan Bunk


The basic concept on how you can send push notifications to individual users of your app is as follows:

In this guide, 'user' always refers to a person that has a user account on your website.
  1. Your user John opens the app.
  2. The app loads your website and calls the javascript function 'receivePushNotificationToken' with a push notification token as a parameter.
  3. Your website stores the token when the function is called (for example in John's entry in your user database).
  4. When you want to send a notification to John, you call the webtoapp.design API with the token and we will deliver the notification.

Defining the Javascript Function

You need to define the receivePushNotificationToken function on your website so that it can be called by the app. You can do so as follows:

        
        <script>
            function receivePushNotificationToken(token) {
                // store the token
            }
        </script>
        
    

Things to keep in mind:

  • The token is a long string, for example:
  • A user's token can change,
    • when the same user uses the app on a different device
    • when the app is uninstalled and reinstalled
    • when the app's data is cleared
    This means that old notification tokens of a user may no longer be valid, so you should regularly store the tokens. In case you want to support the same user using your app on multiple devices, you need to store multiple token for each user.
  • The app will call the javascript function on every pageload. It's normal that you will sometimes not do anything with the token, for example when the user is not logged in and you therefore can't store the token in the user database.
  • Obviously not every visitor of your website will be using your app, so the function won't be called on every page load.
  • Keep the push notification tokens secret.

Sending a Notification via the webtoapp.design API

Get your app-specific API key from your app dashboard.

Send your API key as a query in the URL and the request body in the JSON format.