Firebase push notification for web using JavaScript and PHP | Firebase Cloud Messaging
ฝัง
- เผยแพร่เมื่อ 29 เม.ย. 2023
- Hi, this video is all about using Firebase push notifications for websites with JavaScript and PHP. If you know nothing about Firebase or web push notifications then you don't need to worry because here you will learn everything from start to end. Here, we will create a Firebase project and then create an app for the notifications in the Firebase project in completely free. We will enable cloud messaging API and will get our server key. We will also create a web push notification certificate that will use on the client side to generate device tokens. Everything is done step by step so don't miss any step to learn everything about Firebase push notifications. I hope this video will definitely help you in this regard. Still, if you have issues with this topic then comment below or contact us on FB.
Note: Read the blog to learn about Web Push Notification using the latest method. The method in the video will depreciate soon. The source code and live demo are also available in the blog.
www.slidesmaker.me/blog/fireb...
Firebase in javascript on web
• Firebase JavaScript
Chapters:
1:12 Demo
0:53 Creating Firebase Project
2:27 Start Coding JS
5:40 Sending Notification using Firebase Console
11:39 Creating Custom Backend in PHP for sending Notifications
16:39 Test on multiple devices with Live Server
------------------------------
Lights by Sappheiros / sappheirosmusic
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/LightsSappheiros
Music promoted by Audio Library • Lights - Sappheiros (N...
------------------------------ - วิทยาศาสตร์และเทคโนโลยี
Note: Read the blog to learn about Web Push Notification using the latest method. The method in the video will depreciate soon. The source code and live demo are also available in the blog.
www.slidesmaker.me/blog/firebase-web-push-notification-javascript-php
Excellent thank you very much! Can you make a video explaining the new method?
Will make soon.
@@hacodes The "get_access_token.php" is missing in the repo..
Excelente, me ayudo muchísimo tu video, te agradezco, espero sigas haciendo videos como estos.
Excellent! Just what i need it, thanks
Awesome video and and very good website clean and direct download the code, thnq
Nice 🎉
tnx bro....superb
Thank you
Tiene un límite de suscriptores en notificaciones push?
No limits
Hello! I cant send notifications for IOS devices, but I can't send them, I never show the "allow notifications" message
I have added the image is not displayed on ubundu chrome ?
Can i used for web push notifications for blogger platform?
what's about fcm v1 api? How can i receive notification on browser?
background music 😊?
Is it possible to send message to multiple recipients phone number?
notificationclick doesn't lead anywhere in workers, what's the problem?
Have you added worker in root folder?
Hi I want to ask, now the notification will get when browser is open right? If we close the browser it's same emthod? because I try my side no receive any notification when close the browser.
You will not receive any notification if browser is closed. Because there is a service worker js file that run in background when browser Open. This file is responsible for showing notifications.
OK understood. But I have 1 problem now. When I click the notification not direct go to the website. So, to add link on notification for click and will redirect go to website? @@hacodes
Hello, I've been doing some test with firebase push notification, and I've found some problems with google chrome, could you validate if you only have the same problem with this browser? because I did the test with edge and mozible and the notification works, but I'm not sure why in chrome not works
My be you have blocked push notification in chrome, plz allow notification on clicking lock icon then try. It's working for me on chrome.
@@hacodes thank you for your reply, doing some research about that and tests, I found that apparently there is a problem with my Google chrome notifications in my PC, in other computers were working, so the firebase notificación push is working fine
Thank you!
I had the same problem on chrome. I updated chrome and it worked
Can we send notification some selected user by using firebase??
Yes, we are using users browser data to send notifications. You can filter them out and can send notifications to only selected users.
@@hacodes any tutorial?
Helped me
Sir, If online can not be used. Btw im using byethost (free hosting)
I didn't understand you.
Can i modify the code depending in my database to notify the user if there is a new data
Yes, the whole process will remain the same, just DB queries can be different.
does it can make notification like facebook or youtube inside web, not notification of browser
No, this method cannot do that, You need to do real-time fetching from database and show data as notification within website.
@@hacodes can i choose user before send noti
Yes, you need to provide device token to send notification with is unique for each device
how can i schedule the notification at some time it will automatically send
You can use Firebase notification dashboard to send notifications, and there you can schedule notifications
this method is not working anymore. Do u know how to do it with the new method?
What error you are getting?
@@hacodes No error. Its just not working anymore because its deprecated
Ok I'll check and reply you later.
Index page just run once and return a token that will further use for sending notifications from server.
how many push notification we can send per day using firebase free account ?
Unlimited free of costs, for both methods.
@@hacodes thank you sir
Not Work 😥😥
i am not able to get the device token please help me
Any error you are getting?
manual thodi koi token dale ga code me
You can add, but you need to enable proper security for firebase app. Then nobody can use your public token.
WHat is YOUR_SERVER_ENDPOINT? please explain
I need to check that but it may be the api endpoint that will get the token and store in database so that it will further use for send notifications.
Hello, does this firebase push notifications for websites with JavaScript and PHP also work with android and ios?
Yes, you can use push notification using react native or other JS framework for Android/IOS, if you want to use JavaScript. But there is other documentation for that.
@@hacodes but this example of yours does not work with Android/Ios?
This will not work natively but work in browser of Android and iOS. For native, you need to use documentation for the language you use for app development.
@@hacodes it is not generating the device token when we access it through the IOS browser.
the token only created when accessed by android
do you have any solution?
can we crate createcustomtoken
For which purpose?
@@hacodes we have to create token from userid
This is obsolete. You need V1 now.
can i get The code plz?
Yes, Get it from description
@@hacodes thx
Literally using deprecated API that is being removed within a year.
I have checked, no API is deprecated, But if, something will deprecate in future, firebase will give a new and more simple way to use this service.
@@hacodes deprecated != Removed. It is going to be removed in Q1 next year. You even enabled the service in the video. And you can clearly see it says it is "legacy" and to be removed.
@@hacodes No, the new API requires oAuth2 and token refreshing. That's not simpler.
@@jondyczthis method is not working anymore. Do u know how to do it with the new method?
for python (sending messages) you might need to have to refresh token each time or you can have the sdk...
Is that free?
Yes
the code isn't working , it's just wasted my 2 hours
Can you you tell me what error you got?
@@hacodes in service workers it didn't show me Active
@@hacodes send me your email i will send the code to it
Bro voice over
What?
i have a error
Loaded new content
(index):42 An error occurred while retrieving token. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('localhost/firebase-cloud-messaging-push-scope') with script ('localhost/firebase-messaging-sw.js'): ServiceWorker script evaluation failed (messaging/failed-service-worker-registration).
at Ze (registerDefaultSw.ts:43:25)
at async updateSwReg.ts:27:37
at async Xe (updateVapidKey.ts:28:26)
DevTools failed to load source map: Could not load content for chrome-extension://clldacgmdnnanihiibdgemajcfkmfhia/contentScript.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/_form_check.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
There is a JS file named firebase-cloud-messging-sw.js, move the file in root directory, so that the file is available on the path localhost/firebase-cloud-messging-sw.js. this will register a service worker
i cant recive payload in console.log
It will show only if your page is active, if you are trying to send notification on same device, your page becomes inactive, if there is issue in console or during sending, then reply me with error, I'll try to solve.
@@hacodes thank you, but they denied permission
Where permission denied?