Getting Started

Requirements:

Example: Link

Supported Browsers:

  • Chrome 50+
  • Chrome for Android 50+
  • Firefox Android 44+
  • Firefox 44+
  • Samsung Internet 4+
  • Opera 42+
  • Opera for Android 37+

Note: The Pushclient Library is build for Browsers supporting ES2015+ and can break on old browsers. If you want support outdated Browser like IE9 and older have a look at our FAQ.

1. Upload Service Worker Files

The Service Worker is required to listen for push notifications and display them.

  • Download the ServiceWorker File: Link
  • Upload the file to the top-level root of your site directory.
  • Ensure that the file is publicly accessible (Example: https://www.example.com/service-worker.js)

Note: The Service Worker can also be served from sub-directories, but don’t forget to adjust the path config option later. If you serve the Service Worker from a sub-directory, push will only work for this sub-directory and it’s child directories.

2. Add push to your site

In this step you add the pushclient to your site. You can find an example implementation here.

2.1 Add the script to your site

Add this snippet somewhere between your “body” tags.

<script>
  !function(t,e,i,s,c){t[c]||(t[c]=function(){(t[c].q=t[c].q||[]).push(arguments)},
  t[c].l=1*new Date,n=e.createElement(i),firstScript=e.getElementsByTagName(i)[0],n.async=1,
  n.src=s,firstScript.parentNode.insertBefore(n,firstScript))}(window,document,"script",
  "//www.tickaroo.com/pushclient-web/pushclient.js","_tikPush");
</script>

The snippet has been optimized to provide the best possible speed and stability for your site rendering. It is non-blocking during DOM rendering and provides an asynchronous API which allows to make calls even before the script has been loaded.

This has to be done only once on the page.

2.2 Initialize and configure the pushclient

_tikPush('init', {
  applicationServerKey: "your_application_server_public_key",
  authToken: "your_access_token_subscription"
});

applicationServerKey: This is the public vapid key (Application Settings -> Web Push Connection). You have to generate a pair of keys and click save if the fields are empty. You should not change this keys unless neccessary.

authToken: This is a Subscription Access Token (Application -> Access Tokens). We recommend to create one particular for web push.

Further usefull config options:

debug: Set debug to true, if you want detailed information in the logs. This can be usefull for development.

path: Defaults to “/”. If you place your ServiceWorker in a subdirectory, you need to specifiy the path here. The path should be absolute. Example “/some/sub/dir/”.

2.3 Use the pushclient

Now everything is ready to go.

The next steps could be:

  • Show UI Elemets to control push features depending on browser support.
  • Provide functions for onclick events to subscribe/unsubscribe channels.

Show controls:

// Check if push is available
_tikPush('pushAvailable', function(isAvailable, reason){
  if(isAvailable){
    // browser supported case
    // show some channel subscribe ui elements
  } else {
    // browser not supported or user denied notifications for your site
    // reason is 'denied' or 'browserNotSupported'
  }
});

This code can be placed anywhere after the initialization code. We recommend to hide push control ui elements by default und show them if push is supported.

Subscribe to channel:

function subscribeToChannel(channel){
  _tikPush('ready', function(pushclient){
    pushclient.subscribe(channel);
  });
}

This function can be called when the user wants to subscribe a channel. For example in the click event of a button. The ‘ready’ call ensures that the pushclient is loaded and initialized. Furthermore it checks for browser support and if the user allows notifications.

More details on our reference page.