In diesem Video erstellen wir eine funktionierende Implementierung von Web-Push-Benachrichtigungen mithilfe des npm-Pakets ‘web-push’ und einer Webseite mit einem Push-Handler im Servicemitarbeiter. Links zu den verwendeten Beispielen: PS Ich bin gerade beigetreten und kaufe mir einen Kaffee :-).

Kommentare (42)

  • Sergiu Mare Antworten

    Does web push trigger when the browser is closed? I'm interested in case of a Progressive web app, in an IOS/ android environment?

    14. März 2020 um 18:11
  • raj shekhar Antworten

    looking for workbox

    18. März 2020 um 4:08
  • Sergey Onufrienko Antworten

    Thanks a lot!

    20. März 2020 um 17:38
  • Satyam Singh Antworten

    Does it notify user when data change?

    24. März 2020 um 7:06
  • Konrad Stępień Antworten

    (index):27 Uncaught (in promise) DOMException: Registration failed – push service not available
    subscribe @ (index):27
    async function (async)
    subscribe @ (index):20
    onclick @ (index):11

    Did you have something similar? I don't know how to resolve it.

    30. März 2020 um 13:02
  • fausta leonardo Antworten

    Amazing. Thank you and keep up the good work. I am sure you channel will be keep growing up 🙂

    3. April 2020 um 14:10
  • Elmar Hasanov Antworten

    Hello. how many k notifications would be sent per second with this method?

    6. April 2020 um 21:22
  • sagar gautam Antworten

    in the first few seconds, what did you type on the cmd at the end to go to visual studio?

    19. April 2020 um 14:47
  • ashutosh mishra Antworten

    when i do this… my pushmanger returns { } …

    26. April 2020 um 19:44
  • Juan José De Arana Antworten

    Nice content. The fan background noise though…

    4. Mai 2020 um 23:17
  • Ademola Segun Antworten

    Thanks for the tutorial, Nice One but pls which software did you use to make Video?

    9. Mai 2020 um 7:59
  • Micha Antworten

    Good example, thank you. But starting at 9:18 it's a kind of flickering magic. 🙂

    11. Mai 2020 um 20:44
  • Ping Pong Antworten

    How can you implement this to notify someone of the update of a specific website they've visited in the past?

    23. Mai 2020 um 13:13
  • Konrad Soares Antworten

    Thanks for the video. I've created some monitoring with puppeteer and your example.
    Checkout at

    26. Mai 2020 um 1:44
  • Jimi Viita-aho Antworten

    I saw so many tutorials suggesting that web push should be implemented trough firebase or some other third party service, so thank you so much the introduction to this topic! This was way clearer than the Chrome developers guide👌👌👌

    15. Juni 2020 um 0:56
  • Alex Gomez Antworten

    Loved this tutorial. As a noob, I have been looking for straight forward tutorials on Push notifications.
    Lst me correct some of the code though. I had to refactor a line on Push.js from require (not ES6 friendly) to import
    import push from 'web-push';
    I couldn't find a github repository to branch, then submit, so this is the next best thing.
    Thanks so much for your tutorial. Now on to Part 2.

    23. Juni 2020 um 18:27
  • WerneriaBit Antworten

    Excellent tutorial

    26. Juni 2020 um 5:29
  • John Blair Antworten

    Thanks for video. I expected the notification to be "test message" rather than "Hello world!" – so i got the showNotification rather than the sendNotification – why?
    fyi your sw.js code has sendNotification initially instead of showNotification

    26. Juni 2020 um 18:37
  • Abhishek Singh Antworten

    Pretty great stuff

    29. Juni 2020 um 14:38
  • John Blair Antworten

    I see some implementations take the VAPID public key and convert it to a Uint8Array to get the subscription – do you know which approach is correct?

    29. Juni 2020 um 15:11
  • Marius Bechtold Antworten

    Thank you! Would this also work on an android and ios device?

    21. Juli 2020 um 22:11
  • Mathis Antworten

    (node:13083) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Request path contains unescaped characters
    Not even google has an answer 🙁

    10. August 2020 um 21:24
  • isaac gavin Antworten

    im facing problem with the service worker. when i deploy it, i got an error "Uncaught (in promise) TypeError: Failed to register a ServiceWorker" do you know anything about this?

    14. August 2020 um 9:15
  • Parth Akbari Antworten

    Cool dude. Do u have demo on PWA web app

    14. August 2020 um 23:49
  • Ivan Francisco Jara Antworten

    Best (and well explained) web push tutorial ever, thank you

    9. September 2020 um 8:04
  • Bestin Art Antworten

    When I tried to communicate with firebase through my web api(c#) getting error :-<ExceptionMessage>The remote server returned an error: (401) Unauthorized.</ExceptionMessage>.Let me know the reason.

    22. September 2020 um 13:00
  • Shiva Pal Antworten

    Vapid public key should be 65 bytes long when decoded.

    3. November 2020 um 6:36
  • Shiva Pal Antworten

    error: Vapid public key should be 65 bytes long when decoded.

    3. November 2020 um 6:37
  • Shanur Rahman Antworten

    awesome video, btw was your cpu overclocking this entire time ?

    7. November 2020 um 17:43
  • SeethaLakshmi P Antworten

    Haven't signed in for youtube for a long time. Just done it to upvote this video and subscribe… You are rocking..

    16. November 2020 um 17:45
  • НА РУСИ Antworten

    ни х… не понял как это работает

    2. Dezember 2020 um 9:42
  • Sunleang Yim Antworten

    There is no sw.js in the source can you help me solve this problem ?

    17. Dezember 2020 um 8:26
  • Sinisa Radinovic Antworten

    What if we want to use Chrome(PC, Android) internal
    service worker with Web-push? Thanks

    19. Dezember 2020 um 16:59
  • Anurag verma Antworten

    explained clearly

    26. Dezember 2020 um 9:55
  • josh mcgee Antworten

    first half was just what I needed, nice and bare bones, straight to the point

    8. Januar 2021 um 14:31
  • Okan Ozdemir Antworten

    Doe it also work with PWA on heroku Sir, may I remind you are remarkABLEE!EEEEEE

    15. Januar 2021 um 12:11
  • Blogging Malls Antworten

    Hello, if you have a subscriber to your web push notification and at the time you send the notification the said user is not online and or not currently on the web page how can the user receive the notification?

    6. Februar 2021 um 22:59
  • Mohamed fanah Antworten

    Does this work android mobile chrome or other browsers

    13. Februar 2021 um 16:35
  • dhanielr Antworten

    Nice! Is this work on Safari?

    5. März 2021 um 17:41
  • Aayush Agarwal Antworten

    I am using firebase notification, did the same for adding buttons.But the notification is only showing the text and not the action buttons… Here is the code snippet :
    self.addEventListener('push', function (event) {

    console.log('Push Notification Received.');

    var eventData =;

    obj = JSON.parse(eventData); //Parse the received JSON object.

    notifyPayload = obj;

    var options = {



    actions: [


    action: 'coffee-action',

    title: 'Coffee',

    icon: ''



    action: 'doughnut-action',

    title: 'Doughnut',

    icon: ''



    event.waitUntil(self.registration.showNotification("Hello world", options));


    6. April 2021 um 15:19
  • shneor nagar Antworten

    works for me.

    20. April 2021 um 9:51
  • Mr. Gigi Antworten

    I can hear your computer fan from here … 😀😀😀😀

    8. Mai 2021 um 15:39

Schreibe einen Kommentar

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