nuxt-community / firebase-module

🔥 Easily integrate Firebase into your Nuxt project. 🔥
https://firebase.nuxtjs.org
MIT License
641 stars 98 forks source link

feat(messaging sw): allow users to inject a string into the messaging sw #413

Closed nvitaterna closed 3 years ago

nvitaterna commented 3 years ago

This is a very basic implementation, but it would be nice to have something like this setup.

lupas commented 3 years ago

Hey @nvitaterna

I like the idea, a simple way to add additional code to the service-worker while keeping the basic functionality.

And to keep things separated and be able to write the code in plain javascript, one could do the following:

// nuxt.config.js
const fs = require('fs')

...
inject: fs.readFileSync('./fileWithCodeToBeInjected.js', 'utf8'),
...

I think for a start this is good, I'll add this as a feature to the module and if needed, one can always supply a PR to make this functionality more solid. However, in more complex cases I would just advise to load the service worker yourself instead of via this option.

Just out of curiosity, since I haven't encountered more I wanna do with the messaging service worker - what would be the use case to extend the service worker with more functionality? Any example?

lupas commented 3 years ago

@nvitaterna Released with v7.3.0

Thanks a lot for the PR - appreciate it!

nvitaterna commented 3 years ago

Hey @nvitaterna

I like the idea, a simple way to add additional code to the service-worker while keeping the basic functionality.

And to keep things separated and be able to write the code in plain javascript, one could do the following:

// nuxt.config.js
const fs = require('fs')

...
inject: fs.readFileSync('./fileWithCodeToBeInjected.js', 'utf8'),
...

I think for a start this is good, I'll add this as a feature to the module and if needed, one can always supply a PR to make this functionality more solid. However, in more complex cases I would just advise to load the service worker yourself instead of via this option.

Just out of curiosity, since I haven't encountered more I wanna do with the messaging service worker - what would be the use case to extend the service worker with more functionality? Any example?

Yep, that's actually the way I'm using it right now :). I've got a couple uses for adding more functionality. I'd like to just replace the sw.js with my own - but I need separate firebase configurations for dev/prod when testing and building.

First one is to be able to customize notifications. Instead of making a list of pre-defined actions, I like to generate them on the fly with custom JSON data:

messaging.setBackgroundMessageHandler(function (payload) {
  const notificationData = JSON.parse(payload.data.jsonData);
  const title = payload.data.title;

  return self.registration.showNotification(title, {
    ...notificationData,
    icon: `${self.location.origin}/icon.png`
  });
});

Second reason is to handle notification clicks on those actions:

self.onnotificationclick = function (event) {
  const action = event.action;
  const data = event.notification.data;
  if (data && data.actions) {
    if (data.actions[action]) {
      clients.openWindow(data.actions[action]);
    }
  }
};
lupas commented 3 years ago

Makes both sense, and I guess we could also build functionality for these use-cases into the module. However, at some point it gets easier to write the service worker yourself and

We could also provide an "empty" service-worker template with the module (-> i.e., only loading the config and importing the firebase module) and let the user handle all the rest with his/her "injected" javascript.

That would keep it quite simple and flexible..