Skip to main content

Connecting Web Push to a Website

Downloading the Toolkit​

Once the necessary resource settings are filled in, you can save it and download the Toolkit, parts of which are then placed on your website. The Toolkit is a set of files designed to enable Web Push notifications on your site. It helps configure user subscriptions and send notifications via browsers.

info

The Toolkit itself does not trigger the subscription prompt; it only contains the necessary files and scripts for working with notifications. To show the subscription prompt to users, you need to add code to your website that calls the corresponding function from ak-push.js.

The Toolkit will appear in the Install section, replacing the warning message "Save the resource to download the toolkit":

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

  1. Adding code to the site and uploading installation files to the root directory of the site;
  2. Downloading the developer toolkit.

Method 1: Adding Code to the Site and Uploading Installation Files to the Root Directory​

The steps for this method are shown on the left side of the interface. Add the specified code to the website, then save and upload the installation files to the root directory of your site:

  • manifest.json — project data for sending push notifications via Google Chrome;
  • service-worker.js — a service worker that is registered in users' browsers and receives push messages.

The service-worker.js file is dynamic. It automatically updates each time you make changes to the resource settings.

Example service-worker.js
    
importScripts('https://pxl.test.com/service-worker.js?id=MXw3');

Method 2: Downloading the Developer Toolkit​

The steps for this method are shown on the right side of the interface. Click the "Download" button to download the Toolkit archive. Extract the archive and place the Toolkit files in the root directory of your site.

The Toolkit consists of four files:

  • README.txt — installation instructions for the Toolkit;
  • ak-push.js — a script that displays the subscription prompt to users;
  • manifest.json — project data for sending push notifications via Google Chrome;
  • service-worker.js — a service worker that is registered in users' browsers and receives push messages.

Here, the service-worker.js and ak-push.js files are static. When using this method, you must re-download the Toolkit and update the files on the site after making changes to the resource settings.

tip

When using the developer toolkit, you can change the path to the service-worker.js file. To do this, open the ak-push.js file, find the swPath property, and edit it to specify the correct path to the file.

Adding Scripts to the Website​

Once the Toolkit is uploaded to the site, add the code that will display the subscription prompt when needed.

Below is an example code snippet for a "Subscribe" button. This code initializes the library and starts the subscription process:

    
<button id="init_sub">Subscribe to notifications</button> // Subscription button

// ..Main part of the code..

<script>
	document.getElementById('init_sub').addEventListener('click', function() { // On button click..
	try {
		const akPush = new AKPush();
		akPush.initSubscription() // ..show the subscription form
		}
	catch (e) {
		console.log(e); // ..or log the error to the browser console
		}
	});
</script>

tip

Through the Altcraft platform, you can create a custom popup prompting users to subscribe. Learn more in this article.

The code described above works as follows:

  • The user clicks the button;
  • The initSubscription method is called;
  • A browser system window pops up, asking the user to subscribe to notifications for this site.

Users can customize the logic and decide how visitors will reach the system subscription window. The styles of the system browser window requesting push notification permissions cannot be changed.

Once everything is set up, users can visit the site and subscribe to push notifications. When confirmed, a Service Worker is installed in the client's browser, allowing messages to be displayed even when the browser window is minimized.

Note that a subscription to the same resource will be created separately for each browser (or account) the user operates. The identifier for the subscription is the browser token or account token. This means that a single profile may have multiple active push subscriptions if the user subscribed from different browsers.

When subscribing to notifications, the script can also transmit additional user data or register event information. Learn more about configuring this in this article.

Last updated on