Webpush support in service workers

[swina]

Having developed before some vue app with webpush notification support thru a custom service worker is there a way to support webpush notifications ?
Your help will be really appreciated.
Thanks

[userquin]

@swina do you refer to something like this? If so, you need to use injectManifest, that is, you need to build your service worker.

You can see a reference on workbox here.

// service-worker.js
function getEndpoint() {
  return self.registration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.endpoint;
    }

    throw new Error('User not subscribed');
  });
}

// Register event listener for the ‘push’ event.
self.addEventListener('push', function(event) {
  // Keep the service worker alive until the notification is created.
  event.waitUntil(
    getEndpoint()
    .then(function(endpoint) {
      // Retrieve the textual payload from the server using a GET request. We are using the endpoint as an unique ID of the user for simplicity.
      return fetch('./getPayload?endpoint=' + endpoint);
    })
    .then(function(response) {
      return response.text();
    })
    .then(function(payload) {
      // Show a notification with title ‘ServiceWorker Cookbook’ and use the payload as the body.
      self.registration.showNotification('ServiceWorker Cookbook', {
        body: payload,
      });
    })
  );
});

[swina]

Hi thank you for your response. My current configuration of PWA from vite.config.js is:

VitePWA({
        registerType: 'prompt',
        manifest: {
            "theme_color": "#5c5555",
            "background_color": "#ffffff",
            "display": "fullscreen",
            "start_url": "./",
            "name": config.component.seo.title,
            "short_name": config.component.seo.title,
            "description": config.component.seo.description,
            "icons": [
                {
                    "src": "/icon-192x192.png",
                    "sizes": "192x192",
                    "type": "image/png"
                },
                {
                    "src": "/icon-256x256.png",
                    "sizes": "256x256",
                    "type": "image/png"
                },
                {
                    "src": "/icon-384x384.png",
                    "sizes": "384x384",
                    "type": "image/png"
                },
                {
                    "src": "/icon-512x512.png",
                    "sizes": "512x512",
                    "type": "image/png"
                },
                {
                    "src": "/apple-touch-icon.png",
                    "sizes": "180x180",
                    "type": "image/png"
                }
                
            ]
        
        }
        
      })

So if I have to add push support I will save the file you posted like service-worker.js and then add to vite.config :

VitePWA({
   //... code above
      filename: 'service-worker.js',
      base: '/',
      strategies: 'injectManifest',
})

Thank you again

[userquin]

@swina my code is just a snipet, you need to modify/add your logic. The code is only for push notifications, not for the pwa servive worker, see also the inject manifest.

You also need to add logic to your app to add subscriptor to the server...

[imShara]

Is I'm right that you need to fork vite-plugin-pwa service worker to add new functionality? Or just need to make module?