How do I integrate Pushwoosh Web Push notifications with my existing Progressive Web App (PWA)?

Integrating Pushwoosh Web Push with a Progressive Web App (PWA) requires modifying your existing PWA service worker, as only one service worker can be active per scope.

Follow these steps:

1. Import the Pushwoosh Service Worker Script: Open your PWA's main service worker file (e.g., your-pwa-service-worker.js). Add the following line at the very beginning of the file:

   importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js' + self.location.search);
   

   Important: Ensure you include the + self.location.search part. This allows essential configuration details (like your Application Code) to be passed from your main page to the service worker.

2. Configure Pushwoosh Initialization: In your website's main JavaScript file or where you initialize Pushwoosh, make sure the serviceWorkerUrl parameter in the Pushwoosh.push(['init', {...}]) call points to your PWA's service worker file (the one you modified in step 1).

   var Pushwoosh = Pushwoosh || [];
   Pushwoosh.push(['init', {
       logLevel: 'error', // Use 'debug' for detailed logs during setup
       applicationCode: 'YOUR_PUSHWOOSH_APP_CODE', // Replace with your actual Pushwoosh Application Code
       safariWebsitePushID: 'YOUR_SAFARI_WEBSITE_PUSH_ID', // Replace with your Safari Web Push ID if applicable
       defaultNotificationTitle: 'Your Default Title',
       defaultNotificationImage: 'URL_TO_YOUR_DEFAULT_ICON',
       serviceWorkerUrl: '/your-pwa-service-worker.js' // <-- Make sure this path is correct!
   }]);
   

By importing the Pushwoosh script into your existing PWA service worker and correctly setting the serviceWorkerUrl during initialization, both your PWA's functionalities and Pushwoosh notifications should work correctly.