Docs

  • Channels Channels
  • Beams Beams
  • Developers
  • Support
  • Blog
  • Sign up
    • Search powered by Algolia
    • Sign in
    • Sign up
    • Channels
    • Beams
    • Getting started
      • Android
        • 1. Configure FCM
        • 2. Integrate SDK
        • 3. Initialize Beams
        • 4. Publish Notifications
      • iOS
        • 1. Configure APNS
        • 2. Integrate SDK
        • 3. Publish Notifications
      • Web
        • 1. SDK integration
        • 2. Safari configuration
      • Flutter
        • 1. Configure FCM and APNS
        • 2. Integrate SDK
        • 4. Publish Notifications
    • Concepts
      • Subscribers
      • Device interests
      • Authenticated users
      • Insights
      • Webhooks
    • Guides
      • Handle incoming notifications
        • Android
        • iOS
        • Web
        • Flutter
      • Publishing to multiple devices
      • Publish to specific user
        • Android
        • iOS
        • Web
        • Flutter
      • Web push guides
        • Using an existing service worker
        • Web notification permissions in Firefox
        • Handling Safari certificate expiration
    • Reference
      • Client SDKs
        • Android
        • iOS
        • Web
      • All Libraries
      • Server SDKs
        • Go
        • PHP
        • Node.js
        • Python
        • Java/Kotlin
        • Ruby
        • Swift
      • API
        • Publish API
        • Customer API
        • Device API
        • Reporting API
        • Webhooks
      • Platform Publish Formats
    • Pusher lab

    Using an existing service worker in the Web SDK

    The Beams Web SDK requires access to a Service Worker. By default, the SDK will register a Service Worker on your behalf. However, you may already be using Service Workers in your application. If you are only using Service Workers in your app with Beams, please ignore this guide.

    ∞ Import the Beams Service Worker in your existing Service Worker file

    Only one service worker per domain can be registered.

    If you already have a Service Worker file hosted on your domain you can integrate the Beams Service Worker by adding an import line at the top of the file:

    importScripts("https://js.pusher.com/beams/service-worker.js");
    // The rest of your Service Worker code goes here...

    ∞ Initialize the SDK

    Once you have imported the Beams Service Worker library, you will need to pass your existing Service Worker registration to the Beams Web SDK when it is initialized:

    window.navigator.serviceWorker.ready.then(serviceWorkerRegistration =>
    const beamsClient = new PusherPushNotifications.Client({
    instanceId: '<YOUR_INSTANCE_ID_HERE>',
    serviceWorkerRegistration: serviceWorkerRegistration,
    })
    )

    ∞ Next steps

    Now continue with our main guide from the Check your integration section.

    Contents

    • Import the Beams Service Worker in your existing Service Worker file
    • Initialize the SDK
    • Next steps

    Spotted something that isn’t quite right? Create an issue on GitHub.

    Copyright © 2024 Pusher Ltd. All rights reserved.

    • Support,
    • Status
    • Follow Pusher on Twitter Twitter
    • Subscribe to Pusher’s channel on YouTube
    • Follow Pusher on LinkedIn
    • Follow Pusher on Github GitHub
    • Follow Pusher on Twitch Twitch
    • Follow Pusher on Discord Discord