Service Worker Integration

About service workers

Service workers are a great way to provide mobile-app-like features to websites. If you are not familiar with Service Workers, you can get acquainted here.

Web push notifications require the use of a service worker and WonderPush provides its own service worker.

Web applications can only have a single service worker. This guide explains how to integrate WonderPush when you already have your own service worker.

Step 1. Specify the path to your existing service worker

There are 2 ways of doing this:

1. in the web settings page of the dashboard (Settings / Platforms / Edit Web Settings)
2. in your pages, by adapting your call to init

You can specify the URL of your service worker in the web settings page:

Alternatively, you can specify the URL of the service worker used by WonderPush when calling init like this:

WonderPush.push(["init", {
  webKey: "YOUR_WEBKEY",
  serviceWorkerUrl: '/sw.js',
  // … other initialization options 
}]);

Please adapt the following in the above example:

• /sw.js should be adapted to the actual path to your existing service worker, relative to your domain name.

Step 2. Include our service worker in yours

In your existing service worker file, adapt YOUR_WEBKEY and add the following code at the top:

importScripts('https://cdn.by.wonderpush.com/sdk/1.1/wonderpush-loader.min.js');
WonderPush = self.WonderPush || [];
WonderPush.push(['init', {
  webKey: "YOUR_WEBKEY",
}]);

Please adapt the following in the above example:

• YOUR_WEBKEY should be replaced with your actual webkey.

📘

If you use Workbox to generate your service worker

You just have to give the option importScripts: ["./wonderpush-worker-loader.min.js"] to workbox for its generateSW step.
Here's how to do it using:

• Webpack
• Workbox-build
• Gulp
• CLI

Step 3. Test your integration

Try subscribing to push notifications and receive a push notification to test your integration. Remember we are here to help.