Web Push Notifications

Introduction

Fanplayr can deliver Web push notifications to users on your website. Web push notifications allow users to opt-in to timely updates from your site and allow you to effectively re-engage them with customized, relevant content.

Adding the Fanplayr Service Worker

Web Push Notification services rely on a technology commonly referred to as ‘Service Workers’. These are small code snippets that run in the browser, even when your users are not on your site. These service workers are defined by including a file in the root of your site’s web server and can be used for features other than Web Push Notifications. Your website may or may not already include a file that defines service workers. Use the appropriate installation instructions below.


My website already has a service worker

Note:

  • Your existing service worker must be served from the root of your webserver or use the Service-Worker-Allowed header technique described in the Troubleshooting section below.

1. Include the following inside your existing JavaScript service worker:

var fanplayrOptions = {
  version: 1,
  // When `true`, Fanplayr will add "install" and "activate" event handlers
  // to the Service Worker which will cause it to be installed and activated
  // immediately without waiting for any caches to load.
  // Set to `false` if your Service Worker implements either of these events.
  immediate: true
};
importScripts('https://static.fanplayr.com/client/sw.js?v=' + fanplayrOptions.version);

2. Include the following HTML on all pages of your website:

<script>
window.fanplayrServiceWorker = true;
</script>

My website does not have a service worker

1. Upload the following JavaScript file to the root of your website: serviceWorker.js.

  • This file should be public and accessible at the root of your server.
  • This file should be served with the Content-Type: text/javascript header.

2. Include the following HTML on all pages of your website:

<script src="https://static.fanplayr.com/client/sw-load.js" data-path="/serviceWorker.js"></script>
  • If you are using a service worker with a different file name, please update the data-path attribute accordingly.

Troubleshooting

1. Cannot upload the service worker JavaScript to server root

If you are unable to upload the service worker JavaScript file to the root of your server then you may be able to proceed if you can upload it elsewhere with specific headers.

  1. Ensure your server is delivering the service worker file with the following headers:

  2. Content-Type: text/javascript

  3. Service-Worker-Allowed: /

  4. If you are manually registering the service worker (not using our sw-load.js script) then you will need to update your code to force the worker to be loaded at the root scope. For example:

<script>
if ('serviceWorker' in navigator) {
  // Note: Replace PATH_TO_SERVICE_WORKER with correct path on your server.
  navigator.serviceWorker.register('/PATH_TO_SERVICE_WORKER/serviceWorker.js', {
    // Force service worker to load in root scope.
    scope: '/'
  }).then(function() {
    window.fanplayrServiceWorker = true;
  });
}
</script>

results matching ""

    No results matching ""