Use firebase-messaging-sw.js file in quasar 1.5.8

[alhidalgodev]

i follow all the instruction on https://firebase.google.com/docs/cloud-messaging/js/client for user push notification and need put the firebase-messaging-sw.js file into root dir but i could not do this .

I have placed the file in the following directory without success:

src
create a public
in src-pwa

An error occurred while retrieving token.  FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:8080/firebase-cloud-messaging-push-scope') with script ('http://localhost:8080/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration).
    at eval (webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:2010:32)

The url http://localhost:8080/firebase-messaging-sw.js Cannot GET /firebase-messaging-sw.js

[alhidalgodev]

I solved it using webpack copy plugin in this post. https://forum.quasar-framework.org/topic/2472/robots-txt-in-root/5

in quasar.conf.js file

const CopyWebpackPlugin = require('copy-webpack-plugin');
/// ...
extendWebpack(cfg) {
   cfg.plugins.push(new CopyWebpackPlugin([{ from: 'src/myCustomFolder/', to: '' }]));
  /// ...
}

Update:

Create a dir “myCustomFolder” in src dir and copy my firebase-messaging-sw.js into “myCustomFolder”

https://forum.quasar-framework.org/topic/2472/robots-txt-in-root/5

[donpuerto]

@itslab3rt can i see your code? This is a pain in the ass to implement. I hope there is an quasar extension for FCM

[ArkIv]

-> messaging.useServiceWorker(registration); registration = any ServiceWorkerRegistration
https://quasar.dev/quasar-cli/developing-pwa/handling-service-worker
… ready(registration){
const messaging = firebase.messaging();
messaging.useServiceWorker(registration);
}

Use custom-service-worker.js instead of firebase-messaging-sw.js

[ArkIv]

Copy to dist:
package.json
“scripts”: {
“build”: “npm version patch && quasar build -m pwa && cp -R distAdd/* dist/pwa”,

[jitendra16]

@ArkIv Can you provide more clear idea with detailed info?

[ArkIv]

@jitendra16 ???
npm run build - start
npm version patch - increment version ( package.json “version”: “0.0.1”)
quasar build -m pwa - build pwa ( process.env.version - get version in project )
cp -R distAdd/* dist/pwa” - copy all files from directory distAdd to dist/pwa after build
UPD: That process.env.version would work
quasar.conf.js
. . build: {
. . . env: { version: JSON.stringify(require("./package.json").version) },
. . .

[alhidalgodev]

I come from the future, the plugin “copy” changed its syntax.

const CopyWebpackPlugin = require('copy-webpack-plugin')
// ..
build: {
  extendWebpack (cfg) {
    // Copy the firebase service worker file
    cfg.plugins.push(new CopyWebpackPlugin({
      patterns: [
        { from: 'src/firebase/', to: '' }
      ]
    }))
  }
}

[ArkIv]

quasar/app v2.0.0 released https://forum.quasar-framework.org/topic/6192/quasar-app-v2-0-0-released-major-improvements

• Support for a /public folder which replaces /src/statics. The new folder will allow you to supply static content at the root/app base level, rather than as statics/*.

[dannykln]

@alhidalgodev You save my day, thanks !!!

[ngekoding]

@alhidalgodev Hi, I can’t make it working because my app in subfolder, the app always find for the firebase-messaging-sw.js in root.

How can I solve this?

Thanks in advance

[alhidalgodev]

@ngekoding Yes, read my last comment

[jrhopkins83]

Has anyone been able to get FCM working with a background message notification that will navigate the user to a specified url when the message is clicked?

I’ve tried different approaches from the answers above as well as other approaches and none of them seem to work.

I can display the notification but cannot get it to navigate to the app url if it’s already opened or open a new tab/window with the url.

If anyone has solved this problem can you share your solution?

Thanks

[nulele]

@jrhopkins83 Hi, I have the same problem. Did you solve? Thanks.