Skip to main content

Implementing web push

Step 1. Download Toolkit​

After you configure push notification channels, save the resource. This way, you will get access to push implementation toolkit. You can find the toolkit on the tab "Install". Download it.

There are two ways to install the necessary files on your website:

a. Add the code to the site and Upload the installation files to the root directory​

If you're going to use this method, read the instructions in the left side. Add the code to the site, save changes and upload the installation files to the root directory of the site:

  • manifest.json — project information for Google Chrome;
  • service-worker.js — service worker, service worker, a users' browser extension to receive push notifications.

Here service-worker.js file is dynamic. It is automatically updated every time you make changes to the resource settings.

Service-worker.js example
importScripts('https://pxl.altkraft.com/service-worker.js?id=MXw3');

b. Download push Toolkit for Developers​

If you're going to use this method, read the instructions in the right side. Click the "Download" button. The Toolkit will be downloaded as a .zip file. Unpack the archive and put Toolkit files to the root directory of your site.

This toolkit consists of four files:

  • README.txt — installation instructions for the Toolkit
  • ak-push.js — web push opt in script for your website
  • manifest.json — project information for Google Chrome
  • service-worker.js — service worker, a users' browser extension to receive push notifications

Here service-worker.js and ak-push.js files are static. It means that every time you change the resource settings you need to re-download the Toolkit and update the files on the site.

info

If you use the developer toolkit, you can change the path to service-worker.js. To do this, open ak-push.js, find the swPath property and specify the desired path to the file.

Step 2. Add scripts to the site​

When the Toolkit is uploaded to the site, add the code, that will be responsible for showing a window for subscribing to the required action.

Example for the Subscribe button:

<button id="init_sub">Subscribe to updates!</button> // The button

<script>
  $("#init_sub").click(function(){ // On button click..
    try {
     	var akPush = new AKPush();
     	akPush.initSubscription() // ..show subscription pop-up
        } 
	catch (e) {
      console.log(e); // or write errors to browser console
 			  } 
  });
 
</script>

Once everything is set up, you can go to the site and subscribe to push notifications. When the client confirm the subscription, Service worker is installed in his browser. Service worker can display messages even when the browser window is minimized.

Last updated on