FCM integration/service-worker registration

What problem does this feature solve?

I used vue-cli to create a Vue app for development and so far the experience has been great. However, I also wanted to add FCM support to it which requires me adding a service worker. I have been working on the integration for two days but I still don’t know how to do it and register the service worker properly.

I’ve tried adding a new service worker firebase-messaging-sw.js inside the public folder and register it in App.vue using

const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}firebase-messaging-sw.js`)
messaging.useServiceWorker(registration)

which works but then I’ll have two service workers.

Then I modified vue.config.js to use this service worker instead:

module.exports = {
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'public/firebase-messaging-sw.js'
      // ...other Workbox options...
    }
  }
}

Then I encounter errors like The script has an unsupported MIME type ('text/html').

I’ve checked Workbox’s guides, @vue/cli-plugin-pwa but I still can’t make it work. Can someone show me how to do the integration, cause I really don’t know how to do it.

This discussion seems really close to what I’m asking for (https://github.com/vuejs-templates/pwa/issues/27).

I also asked the question on StackOverflow (https://stackoverflow.com/questions/50711933/vue-cli-3-and-firebase-service-worker-registration)

What does the proposed API look like?

I should be able to have a correct config to do FCM integration.

[LinusBorg]

1. This is not a feature request.
2. It might be a bugreport, but you didn’t follow the issue guidelines, which require a runnable reproduction
3. It isn’t even a bug report, really, since you are asking how to solve your specific problem.
4. Github issues are strictly reserved for feature requests and bug reports.

[kevguy]

First, I think it can be both. Why I think it’s more of a feature request is I need an API to merge a custom service worker to the one Vue provides. There’s a registerServiceWorker.js and vue.config.js which I think are the most relevant places where I should edit my code.

I can’t tell whether it should be a bug report or feature request because

• I don’t see any documentation about register-service-worker in registerServiceWorker.js unless you count the the sample config placed register-service-worker’s README.md.
• I do find something about service worker about how to edit vue.config.js, but it didn’t mention how I should register it properly (especially with FCM which requires firebase.messaging().useServiceWorker())
• Because of the lack of documentation and lack of answering on GitHub issues and StackOverflow questions, I can’t tell whether it’s a bug or it’s a new feature I have to request, or the solution is actually pretty simple and all I need to do is add some code.

Second, runnable reproduction is simple enough I thought I didn’t need to explicitly provide any. The replication step is simple:

1. you have js file as a service worker, the content don’t matter
2. you register that service worker without getting errors like The script has an unsupported MIME type ('text/html')..

Third, I’m not even asking for a solution to solve a specific problem for myself, I asked for a way to register a service worker with or without using registerServiceWorker.js because some people may need to do the navigator.serviceWorker.register manually, much less FCM. And notice the title, I didn’t say “FCM Integration”, I added a “/service-worker registration” next to it.

For

const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}firebase-messaging-sw.js`)
messaging.useServiceWorker(registration)

My purpose was to illustrate what I need was not merging multiple service workers, but I also needed to make use of the registration.

As for the vue.config.js part, I illustrated I already did what I could do by reading the scarce documentation I could find.

Fourth, I found it disappointing that instead of at least pointing me to the right direction to find a solution myself, you are more fixated on whether it’s a bug report or feature request because a strict policy triumphs everything. Before I opened an issue, I already looked at all the relevant issues here:

• listening to onpush event
• WorkBox does not perform update method
• Document how to disable/customize the prefetch plugin
• RFC: PWA Plugin
• Progressive Web App template
• service-worker.js erro

I even asked a question on StackOverflow and included a discussion from vuejs-templates here.

I’m not asking for handouts, I just want to make the app work, and opening issue here is what I thought I had to after trying different things for two days. Yet because of a “strict” policy I got shunned down. Thank you very much.