DEV Community

PWA Push Notifications with Firebase (Cloud Messaging)-Part 1

Pato on February 03, 2020

Push Notification In Your PWA Have you ever wondered how to add the famous/annoying push notifications to your app? Well, in this tutori...
Collapse
 
_nsvetlanav_ profile image
Наговицына Светлана • Edited

Help me please. I did everything according to the instructions. A window appears with the text allow or block notifications. I click on allow or block, an error appears in the console
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
akattack profile image
AkAttack

you need to check your html file and make sure that the -->



is present, then check your index.js file and make sure you see -->

const errorMessage = document.getElementById("error");
Collapse
 
orimdominic profile image
Orim Dominic Adah • Edited

Thanks man! I got stressed at one other tutorial I was using. This was well explained. I was able to achieve my goal reading and following through with this.
Thanks again.

One thing though, you can style the code in your markdown by typing the language e.g javascript, typescript, after the first triple quotes. For example
'''javascript. It helps with readability

Collapse
 
joakflores profile image
Joak

Hi, thanks for share.
I have some issues, could you help me please?

I have tried with CDN

In the line
firebase.initializeApp(config);

I have gotten the error "firebase is not defined

So, I copied the 2 files (firebase-apps.js & firebase-messaging.js into my carpet js and I have gotten the same error.

what's wrong?

Collapse
 
devpato profile image
Pato This Dot

Can you send me a link to your repo?

Collapse
 
joakflores profile image
Joak

Maybe I found the error, please give me if I'm right ....

1) This code has to be on service worker, right?
var firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxx",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);

2) Firebase seek a specific service worker name in the app? , I have one with the name sw.js, that name works?

Regards

Collapse
 
after_ui profile image
After UI

Hi, I have two environment staging and production, how do I make this service worker use the correct firebase config based on environment? i try with import xxx from '../myFirebaseConfig' and process.env but it doesnt work in a public folder.

importScripts('gstatic.com/firebasejs/7.14.5/fire...)
importScripts('gstatic.com/firebasejs/7.14.5/fire...)

firebase.initializeApp({
apiKey: ‘xxx’,
authDomain: ‘xxx’,
databaseURL: ‘xxxx’,
projectId: ‘xxx’,
storageBucket: ‘xxxx’,
messagingSenderId: ‘xxxx’,
appId: ‘xxxxx’,
measurementId: ‘xxxx’
})

const messaging = firebase.messaging()
..

…. other code