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

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

importScripts('https://static.fanplayr.com/client/sw.js');

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. Create a new JavaScript file in the root of your website called serviceWorker.js with the following content:

importScripts('https://static.fanplayr.com/client/sw.js');

Or download a file we have prepared here: serviceWorker.js

Note:

  • 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>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/serviceWorker.js', { scope: '/' });
  window.fanplayrServiceWorker = true;
}
</script>

Note:

  • If you are using a service worker with a different file name, please replace "serviceWorker.js" with the file name instead.

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.

Upload serviceWorker.js to any location on your server and ensure that it is served with the following headers:

Content-Type: text/javascript
Service-Worker-Allowed: /

Use the following HTML instead of the one in Step 2 above, replacing PATH_TO_SERVICE_WORKER with the new location.

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/PATH_TO_SERVICE_WORKER/serviceWorker.js', { scope: '/' });
  window.fanplayrServiceWorker = true;
}
</script>

results matching ""

    No results matching ""