0:00 Funktionsweise der Push-Benachrichtigung 6:40 Implementierung der Push-Benachrichtigung 14:16 Web-Push sendNotification () 14:54 SwPush Payload 17:56 Nachrichten in SwPush 19:48 BenachrichtigungKlicks in SwPush Push-Benachrichtigung ist eine ziemlich wichtige und wichtige Sache in eine progressive Web-App. Die Push-Benachrichtigung folgt dem Web-Push-Protokoll. In Angular Service Worker verwenden wir SwPush aus dem Service Worker-Modul, um die Push-Benachrichtigung zu verarbeiten. Im Backend, dh node.js, verwenden wir für unseren Fall ein Web-Push-Paket von NPM. Hier werden Web Push Protocol- und VAPID-Schlüssel für die Kommunikation verwendet. Sponsor: #ServiceWorkers #PushNotification #SwPush GitHub-UI: GitHub-BE: Progressive Entwicklung von Web-Apps: Zwietracht: Slack: Sie können mich auf Patreon unterstützen: Danke fürs Zuschauen ….

Kommentare (28)

  • Smita Mishra Mishra Antworten

    Very informative

    11. Mai 2020 um 12:37
  • Anil Antworten

    Hey Subrat why can't you make production grade application playlist. Take your own time but make a big application

    16. Mai 2020 um 4:28
  • Forbidden Souls Antworten

    Man, you helped me a lot, Thank you so much! Cheers!

    2. Juni 2020 um 19:38
  • Sudhanshu Tripathi Antworten

    Thanks 😊
    In my case I'm getting multiLingual_key for notification and then want to translate it in current language.
    and then I want to show notification to user.

    Do you know, how can I achieve that?

    6. Juni 2020 um 4:28
  • jaydeep dhimate Antworten

    Can you please make end to end video on push notifications using firebase in angular

    8. Juli 2020 um 5:30
  • Studio OverSound Antworten

    error : Service workers are disabled or not supported by this browser

    12. Juli 2020 um 17:22
  • Manoj Radharapu Antworten

    how to get the web-push valid-keys programmatically in component.ts without using command ??????????????? in angular

    14. August 2020 um 12:34
  • SKY Antworten

    Please show that saving keys of subscription to the database with the express , mongoose and mongo atlas

    14. August 2020 um 14:21
  • Sachazero Antworten

    Hi Subrat, awesome content you have here! Been looking around to find a good solid ngsw swpush tutorial. Do you have any advice on implementing this with firebase? Once again good job on the content and thank you! 😄

    18. August 2020 um 2:00
  • Manoj Radharapu Antworten

    UnhandledPromiseRejectionWarning: Error: The subscription p256dh value should be 65 bytes long. … i am getting this error

    18. August 2020 um 13:25
  • Manoj Radharapu Antworten

    UnhandledPromiseRejectionWarning: WebPushError: Received unexpected response code

    at IncomingMessage.<anonymous> (F:AngularChallengeFunOFHeroisticweb-pushnode_modulesweb-pushsrcweb-push-lib.js:347:20)

    at IncomingMessage.emit (events.js:205:15)

    at endReadableNT (_stream_readable.js:1154:12)

    at processTicksAndRejections (internal/process/task_queues.js:74:11)

    (node:7756) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) in node i am facing this issue , any clue

    26. August 2020 um 10:50
  • Manoj Radharapu Antworten


    name: 'WebPushError',

    message: 'Received unexpected response code',

    statusCode: 401,

    headers: {

    'content-type': 'text/plain; charset=utf-8',

    'x-content-type-options': 'nosniff',

    'x-frame-options': 'SAMEORIGIN',

    'x-xss-protection': '0',

    date: 'Wed, 26 Aug 2020 09:10:30 GMT',

    'content-length': '40',

    'alt-svc': 'h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"',

    connection: 'close'


    body: 'authorization header must be specified.n',

    endpoint: 'https://fcm.googleapis.com/fcm/send/e5AoPi2f7hw:APA91bEct14moB2bVGzqB1Ch2mtMsH7uMoVec1SVfEykt1HBtmGXVBpNuyddc7pq88_-t1mqAdxkrMrrstGXFY3t-6csu71mdQ0HqpLkebEklMdlHeg6uRJ4w72ZrGeShAHB6plsJfPf&#39;


    26. August 2020 um 11:14
  • Deepesh Gupta Antworten

    You are great. You explained each and every topic very clearly. Thanks a lot Sir.

    1. September 2020 um 18:03
  • Lohith Karlapudi Antworten

    hi subrat, i am getting the following error while running the app.js file in the server , can you pleas ehelp me here? the error is "Error sending notification, reason: Error: The subscription p256dh value should be 65 bytes long"

    27. Oktober 2020 um 13:17
  • Matheus Leal Antworten

    Is it possible use web push in IOS? I tried and doesn´t work.

    30. November 2020 um 16:42
  • Data Kosongan Antworten

    I have tried SwPush on Angular with your tutorial and it worked. But why don't notifications appear on the smartphone screen?

    does it only work on the desktop only?

    I have activated all permissions on the smartphone and have tried to activate notifications but still when doing the app.js node only on the desktop display that appears and not on the cellphone. I hope you reply to this message 🙂

    9. Dezember 2020 um 13:35
  • Anant Shekhar Antworten

    you have hardcoded the value of public key in frontend but public key value changes everytime we run the server..So are we supposed to make a get call to fetch public value from server first??

    26. Dezember 2020 um 19:25
  • Pankaj Shiva Antworten

    23 89 aa aana I have to say aaaa

    31. Dezember 2020 um 3:56
  • Raif Antworten

    is it working when tab is closed or browser is closed? i think i works when only tab is cloesed ?

    20. Januar 2021 um 12:14
  • alexander leonardo Antworten

    Hi, i tried to do web push notification in Angular when the browser is closed but its not working. Are you having the same behaviour?

    28. Januar 2021 um 8:06
  • Leo Garcia Antworten

    this is amazing

    28. Januar 2021 um 17:44
  • Prabhakaran Suyambukesan Antworten

    if i convert angular app to android app the pwa i have used will work on android app or not,please tell me

    25. Februar 2021 um 6:06
  • Shannon Dunne Antworten

    I have an Angular 2 pwa project. If I implement web push this way, then add to db etc.. will it work if I build and deploy it? are you using a separate project for the server?

    13. März 2021 um 23:19
  • Giri charan Antworten

    sir make a video to retrieve the data from database

    24. März 2021 um 16:39
  • KYATHAM DEEPAK Antworten

    Please make full video on web push notifications server to client client to server

    10. April 2021 um 19:32
  • Ezequiel Regaldo Antworten

    Dude, love your videos, THANK YOU SO MUCH

    19. April 2021 um 9:38
  • Laura Rodriguez Antworten

    does anyone else have this error?
    Access to fetch at 'https://fcm.googleapis.com/fcm/send/c940Z9gKMC4:APA&#39; from origin 'https:/*myweb*.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

    22. April 2021 um 9:40
  • Mohana B Antworten

    Plz make a video for retrieve the data from database

    6. Mai 2021 um 7:00

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.