Skip to content
0
  • Home
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
  • Home
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (Sketchy)
  • No Skin
Collapse

Wandering Adventure Party

  1. Home
  2. Uncategorized
  3. Native Push Notifications Support for NodeBB

Native Push Notifications Support for NodeBB

Scheduled Pinned Locked Moved Uncategorized
pushnotificationodebbnotificationspushapi
46 Posts 8 Posters 0 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • julianJ This user is from outside of this forum
    julianJ This user is from outside of this forum
    julian
    wrote on last edited by
    #1

    Our relationship with push notifications has been rather circuitous…

    1. First Andrew (psychobunny) tried plain desktop notifications via the Notification API (that’s the desktop notifications plugin), but notification delivery stopped when you closed your browser.
    2. Then I wrote the PushBullet plugin, but they went from free to paid and that went out the window
    3. Around that time I wrote the Firebase plugin, which was a dead end because there was no iOS support.
    4. I then wrote the ntfy plugin, which works really well, but does rely on a freemium third-party service and app (written by @binwiederhier@discuss.ntfy.sh)

    Thanks to some recent discussion from crazycells and bh4-tech, I learned that the Push API had reached general availability across most modern browsers. In fact, this actually happened over a year ago, so compatibility should be even better.

    So I set about working on yet another push notifications plugin, hopefully for the last time, and this time using the native Push API on the client-side.

    To enable them, simply navigate over to the “Push Notifications” menu item in your user profile, and flip the switch.

    6da06989-f902-492b-866f-14c39b34a9ca-image.png

    So, let’s dogfood! I de-activated the ntfy plugin on this site and activated the web-push plugin so you can try it out right now.

    The plugin is in the proof-of-concept phase, so there might (read: most definitely will be) issues. Please let me know any you find here.

    julianJ bh4 techB <baris>B dave1904D Pankaj SoniP 8 Replies Last reply
    1
    • julianJ julian

      Our relationship with push notifications has been rather circuitous…

      1. First Andrew (psychobunny) tried plain desktop notifications via the Notification API (that’s the desktop notifications plugin), but notification delivery stopped when you closed your browser.
      2. Then I wrote the PushBullet plugin, but they went from free to paid and that went out the window
      3. Around that time I wrote the Firebase plugin, which was a dead end because there was no iOS support.
      4. I then wrote the ntfy plugin, which works really well, but does rely on a freemium third-party service and app (written by @binwiederhier@discuss.ntfy.sh)

      Thanks to some recent discussion from crazycells and bh4-tech, I learned that the Push API had reached general availability across most modern browsers. In fact, this actually happened over a year ago, so compatibility should be even better.

      So I set about working on yet another push notifications plugin, hopefully for the last time, and this time using the native Push API on the client-side.

      To enable them, simply navigate over to the “Push Notifications” menu item in your user profile, and flip the switch.

      6da06989-f902-492b-866f-14c39b34a9ca-image.png

      So, let’s dogfood! I de-activated the ntfy plugin on this site and activated the web-push plugin so you can try it out right now.

      The plugin is in the proof-of-concept phase, so there might (read: most definitely will be) issues. Please let me know any you find here.

      julianJ This user is from outside of this forum
      julianJ This user is from outside of this forum
      julian
      wrote on last edited by
      #2

      If you do not receive any push notifications, it is likely because your browser is using an old, cached copy of the NodeBB service worker. You will have to wait for your browser to download the new service worker, or manually clear it.

      Secondly, there is one specific caveat for this right now. Users on Safari currently do not use the service worker, and thus will not receive push notifications. This was due to a change in 2021 to work around a Safari bug, but I do not know at this time whether Safari has fixed the issue upstream.

      julianJ bh4 techB 2 Replies Last reply
      0
      • julianJ julian

        If you do not receive any push notifications, it is likely because your browser is using an old, cached copy of the NodeBB service worker. You will have to wait for your browser to download the new service worker, or manually clear it.

        Secondly, there is one specific caveat for this right now. Users on Safari currently do not use the service worker, and thus will not receive push notifications. This was due to a change in 2021 to work around a Safari bug, but I do not know at this time whether Safari has fixed the issue upstream.

        julianJ This user is from outside of this forum
        julianJ This user is from outside of this forum
        julian
        wrote on last edited by
        #3

        I’m particularly excited about this new development because it opens the door for richer integration between NodeBB and the push notifications themselves.

        With (probably) every iteration prior, when you clicked on the notification, it likely opened a new window. With direct access to the Push API and service worker, we can now accurately detect whether the site is already open (in another tab), and open it there.

        In the future, we’ll also be able to add in things like icons, pictures, and custom actions, right from the notification itself.

        One particular nice-to-have is the ability to update notifications. Being able to merge notifications (like they already do in NodeBB) or potentially rescind notifications would be a nice step forward in usability as well.

        phenomlabP 1 Reply Last reply
        0
        • julianJ julian

          Our relationship with push notifications has been rather circuitous…

          1. First Andrew (psychobunny) tried plain desktop notifications via the Notification API (that’s the desktop notifications plugin), but notification delivery stopped when you closed your browser.
          2. Then I wrote the PushBullet plugin, but they went from free to paid and that went out the window
          3. Around that time I wrote the Firebase plugin, which was a dead end because there was no iOS support.
          4. I then wrote the ntfy plugin, which works really well, but does rely on a freemium third-party service and app (written by @binwiederhier@discuss.ntfy.sh)

          Thanks to some recent discussion from crazycells and bh4-tech, I learned that the Push API had reached general availability across most modern browsers. In fact, this actually happened over a year ago, so compatibility should be even better.

          So I set about working on yet another push notifications plugin, hopefully for the last time, and this time using the native Push API on the client-side.

          To enable them, simply navigate over to the “Push Notifications” menu item in your user profile, and flip the switch.

          6da06989-f902-492b-866f-14c39b34a9ca-image.png

          So, let’s dogfood! I de-activated the ntfy plugin on this site and activated the web-push plugin so you can try it out right now.

          The plugin is in the proof-of-concept phase, so there might (read: most definitely will be) issues. Please let me know any you find here.

          bh4 techB This user is from outside of this forum
          bh4 techB This user is from outside of this forum
          bh4 tech
          wrote on last edited by
          #4

          julian Thanks a lot. Have enabled push on desktop(Edge) and mobile (Chrome), will report if anything unusual is noticed.

          1 Reply Last reply
          0
          • julianJ julian

            If you do not receive any push notifications, it is likely because your browser is using an old, cached copy of the NodeBB service worker. You will have to wait for your browser to download the new service worker, or manually clear it.

            Secondly, there is one specific caveat for this right now. Users on Safari currently do not use the service worker, and thus will not receive push notifications. This was due to a change in 2021 to work around a Safari bug, but I do not know at this time whether Safari has fixed the issue upstream.

            bh4 techB This user is from outside of this forum
            bh4 techB This user is from outside of this forum
            bh4 tech
            wrote on last edited by
            #5

            julian Although I don’t have an apple device, but I think web push will work properly now. I read in some articles that when apple first introduced service workers and push both were half baked, but things have improved with each new release of safari. Maybe, some iOS/macbook user would like to volunteer, by reversing the committ and then reporting the result on their device here. There is one caveat: On iOS, web push notifications work only on websites which are “Added to Home Screen” .

            1 Reply Last reply
            0
            • julianJ julian

              I’m particularly excited about this new development because it opens the door for richer integration between NodeBB and the push notifications themselves.

              With (probably) every iteration prior, when you clicked on the notification, it likely opened a new window. With direct access to the Push API and service worker, we can now accurately detect whether the site is already open (in another tab), and open it there.

              In the future, we’ll also be able to add in things like icons, pictures, and custom actions, right from the notification itself.

              One particular nice-to-have is the ability to update notifications. Being able to merge notifications (like they already do in NodeBB) or potentially rescind notifications would be a nice step forward in usability as well.

              phenomlabP This user is from outside of this forum
              phenomlabP This user is from outside of this forum
              phenomlab
              wrote on last edited by
              #6

              julian doesn’t seem to work for me even with cache cleared.

              julianJ 1 Reply Last reply
              0
              • phenomlabP phenomlab

                julian doesn’t seem to work for me even with cache cleared.

                julianJ This user is from outside of this forum
                julianJ This user is from outside of this forum
                julian
                wrote on last edited by
                #7

                phenomlab clearing the browser cache wouldn’t actually remove the service worker, unfortunately.

                It’s proving surprisingly hard to find instructions to teach people how to clear the existing service worker 😝

                Chrome, at least, will check for a new one after 24 hours I think .

                phenomlabP 1 Reply Last reply
                0
                • julianJ julian

                  phenomlab clearing the browser cache wouldn’t actually remove the service worker, unfortunately.

                  It’s proving surprisingly hard to find instructions to teach people how to clear the existing service worker 😝

                  Chrome, at least, will check for a new one after 24 hours I think .

                  phenomlabP This user is from outside of this forum
                  phenomlabP This user is from outside of this forum
                  phenomlab
                  wrote on last edited by
                  #8

                  julian OK. Still no activity for me though despite updates here. Did you also remove ntfy as that isn’t issuing alerts anymore.

                  A bit greedy, but this js would probably work

                  if ('serviceWorker' in navigator) {
                    caches.keys().then(function(cacheNames) {
                      cacheNames.forEach(function(cacheName) {
                        caches.delete(cacheName);
                      });
                    });
                  }
                  

                  Or perhaps this header

                  Cache-Control: no-cache,no-store,must-revalidate
                  

                  Or this modified js

                  function async deleteCaches() {
                    try {
                      const keys = await window.caches.keys();
                      await Promise.all(keys.map(key =&gt; caches.delete(key)));
                    } catch (err) {
                      console.log('deleteCache err: ', err);
                    }
                  }
                  
                  // run this function on your app load
                  function resetCacheForUpdate() {
                    if (!localStorage.getItem('cacheReset')) {
                      deleteCaches()
                        .then(_ =&gt; {
                          localStorage.setItem('cacheReset', 'yes');
                        }) 
                    }
                  }
                  

                  Source

                  https://jun711.github.io/web/service-worker-cache-busting/

                  Link Preview Image
                  Service Worker Cache Busting

                  Learn how to publish the latest version of your progressive web app.

                  favicon

                  Jun711 blog (jun711.github.io)

                  julianJ 1 Reply Last reply
                  0
                  • phenomlabP phenomlab

                    julian OK. Still no activity for me though despite updates here. Did you also remove ntfy as that isn’t issuing alerts anymore.

                    A bit greedy, but this js would probably work

                    if ('serviceWorker' in navigator) {
                      caches.keys().then(function(cacheNames) {
                        cacheNames.forEach(function(cacheName) {
                          caches.delete(cacheName);
                        });
                      });
                    }
                    

                    Or perhaps this header

                    Cache-Control: no-cache,no-store,must-revalidate
                    

                    Or this modified js

                    function async deleteCaches() {
                      try {
                        const keys = await window.caches.keys();
                        await Promise.all(keys.map(key =&gt; caches.delete(key)));
                      } catch (err) {
                        console.log('deleteCache err: ', err);
                      }
                    }
                    
                    // run this function on your app load
                    function resetCacheForUpdate() {
                      if (!localStorage.getItem('cacheReset')) {
                        deleteCaches()
                          .then(_ =&gt; {
                            localStorage.setItem('cacheReset', 'yes');
                          }) 
                      }
                    }
                    

                    Source

                    https://jun711.github.io/web/service-worker-cache-busting/

                    Link Preview Image
                    Service Worker Cache Busting

                    Learn how to publish the latest version of your progressive web app.

                    favicon

                    Jun711 blog (jun711.github.io)

                    julianJ This user is from outside of this forum
                    julianJ This user is from outside of this forum
                    julian
                    wrote on last edited by
                    #9

                    phenomlab It is not the service worker cache that is at fault, it’s the fact that the service worker itself is outdated on your machine 😓

                    But that will resolve over time, and I will look into further strategies.

                    That said, twice already I’ve lost my subscription to the push service. Will have to dig into it and see what error is thrown.

                    phenomlabP 1 Reply Last reply
                    0
                    • julianJ julian

                      phenomlab It is not the service worker cache that is at fault, it’s the fact that the service worker itself is outdated on your machine 😓

                      But that will resolve over time, and I will look into further strategies.

                      That said, twice already I’ve lost my subscription to the push service. Will have to dig into it and see what error is thrown.

                      phenomlabP This user is from outside of this forum
                      phenomlabP This user is from outside of this forum
                      phenomlab
                      wrote on last edited by
                      #10

                      julian understood. I now have this working on my phone at least.

                      Edit - and it works perfectly. I get the notification, click it and it uses my already open browser session to display.

                      julianJ 1 Reply Last reply
                      0
                      • phenomlabP phenomlab

                        julian understood. I now have this working on my phone at least.

                        Edit - and it works perfectly. I get the notification, click it and it uses my already open browser session to display.

                        julianJ This user is from outside of this forum
                        julianJ This user is from outside of this forum
                        julian
                        wrote on last edited by
                        #11

                        phenomlab Glad to hear it!

                        I updated the service worker so that when it is sent to the browser, it indicates that it is to immediately replace the existing worker, so hopefully my changes should be reflected quicker.

                        1 Reply Last reply
                        0
                        • julianJ julian

                          Our relationship with push notifications has been rather circuitous…

                          1. First Andrew (psychobunny) tried plain desktop notifications via the Notification API (that’s the desktop notifications plugin), but notification delivery stopped when you closed your browser.
                          2. Then I wrote the PushBullet plugin, but they went from free to paid and that went out the window
                          3. Around that time I wrote the Firebase plugin, which was a dead end because there was no iOS support.
                          4. I then wrote the ntfy plugin, which works really well, but does rely on a freemium third-party service and app (written by @binwiederhier@discuss.ntfy.sh)

                          Thanks to some recent discussion from crazycells and bh4-tech, I learned that the Push API had reached general availability across most modern browsers. In fact, this actually happened over a year ago, so compatibility should be even better.

                          So I set about working on yet another push notifications plugin, hopefully for the last time, and this time using the native Push API on the client-side.

                          To enable them, simply navigate over to the “Push Notifications” menu item in your user profile, and flip the switch.

                          6da06989-f902-492b-866f-14c39b34a9ca-image.png

                          So, let’s dogfood! I de-activated the ntfy plugin on this site and activated the web-push plugin so you can try it out right now.

                          The plugin is in the proof-of-concept phase, so there might (read: most definitely will be) issues. Please let me know any you find here.

                          julianJ This user is from outside of this forum
                          julianJ This user is from outside of this forum
                          julian
                          wrote on last edited by
                          #12

                          The web-push plugin has now been promoted in v4 beta to “bundled” status, with a corresponding demotion of the ntfy plugin.

                          Link Preview Image
                          fix(deps): swap ntfy for web-push plugin · NodeBB/NodeBB@aa060d3

                          Node.js based forum software built for the modern web - fix(deps): swap ntfy for web-push plugin · NodeBB/NodeBB@aa060d3

                          favicon

                          GitHub (github.com)

                          phenomlabP julianJ 2 Replies Last reply
                          0
                          • julianJ julian

                            The web-push plugin has now been promoted in v4 beta to “bundled” status, with a corresponding demotion of the ntfy plugin.

                            Link Preview Image
                            fix(deps): swap ntfy for web-push plugin · NodeBB/NodeBB@aa060d3

                            Node.js based forum software built for the modern web - fix(deps): swap ntfy for web-push plugin · NodeBB/NodeBB@aa060d3

                            favicon

                            GitHub (github.com)

                            phenomlabP This user is from outside of this forum
                            phenomlabP This user is from outside of this forum
                            phenomlab
                            wrote on last edited by
                            #13

                            julian Is there a link where we can install the v4 beta version of this plugin? I’d love to test it out over on Sudonix.

                            EDIT - NVM - I found the link…

                            julianJ 1 Reply Last reply
                            0
                            • phenomlabP phenomlab

                              julian Is there a link where we can install the v4 beta version of this plugin? I’d love to test it out over on Sudonix.

                              EDIT - NVM - I found the link…

                              julianJ This user is from outside of this forum
                              julianJ This user is from outside of this forum
                              julian
                              wrote on last edited by
                              #14

                              phenomlab glad to hear you found it 😄

                              For those interested in updating, you can just grab the latest commit from activitypub branch or perhaps the more the specific commit:

                              git fetch
                              git checkout activitypub    # if you're not already on activitypub branch
                              git reset --hard 86f624f8172fb96fbd3c83683affd8814e8b5156`
                              
                              phenomlabP 1 Reply Last reply
                              0
                              • julianJ julian

                                The web-push plugin has now been promoted in v4 beta to “bundled” status, with a corresponding demotion of the ntfy plugin.

                                Link Preview Image
                                fix(deps): swap ntfy for web-push plugin · NodeBB/NodeBB@aa060d3

                                Node.js based forum software built for the modern web - fix(deps): swap ntfy for web-push plugin · NodeBB/NodeBB@aa060d3

                                favicon

                                GitHub (github.com)

                                julianJ This user is from outside of this forum
                                julianJ This user is from outside of this forum
                                julian
                                wrote on last edited by
                                #15

                                The plugin also successfully removes notifications if they’re no longer relevant (e.g. queued posts that have already been handled), and merges notification content just like it does in-app:

                                22b1cb96-3763-48e9-b890-3f8443ace075-image.png

                                julianJ 1 Reply Last reply
                                0
                                • julianJ julian

                                  phenomlab glad to hear you found it 😄

                                  For those interested in updating, you can just grab the latest commit from activitypub branch or perhaps the more the specific commit:

                                  git fetch
                                  git checkout activitypub    # if you're not already on activitypub branch
                                  git reset --hard 86f624f8172fb96fbd3c83683affd8814e8b5156`
                                  
                                  phenomlabP This user is from outside of this forum
                                  phenomlabP This user is from outside of this forum
                                  phenomlab
                                  wrote on last edited by
                                  #16

                                  julian I’m using the GIT link you provided to install. Plugin installs fine, but cannot get it to send any notification - even on my mobile device which works fine for NodeBB?

                                  julianJ 1 Reply Last reply
                                  0
                                  • phenomlabP phenomlab

                                    julian I’m using the GIT link you provided to install. Plugin installs fine, but cannot get it to send any notification - even on my mobile device which works fine for NodeBB?

                                    julianJ This user is from outside of this forum
                                    julianJ This user is from outside of this forum
                                    julian
                                    wrote on last edited by
                                    #17

                                    phenomlab There’s not terribly much to configure, just make sure that when you start NodeBB, that you see the output info: [plugins/web-push] VAPID keys OK.

                                    That’s how the messages are encoded to be sent to the corresponding browser push endpoints.

                                    Other than that make sure the user has toggled push notifications on in their settings and allowed notifications for the site.

                                    On Windows, you have to specifically also allow your browser access to send notifications to the user.

                                    phenomlabP 1 Reply Last reply
                                    0
                                    • julianJ julian

                                      phenomlab There’s not terribly much to configure, just make sure that when you start NodeBB, that you see the output info: [plugins/web-push] VAPID keys OK.

                                      That’s how the messages are encoded to be sent to the corresponding browser push endpoints.

                                      Other than that make sure the user has toggled push notifications on in their settings and allowed notifications for the site.

                                      On Windows, you have to specifically also allow your browser access to send notifications to the user.

                                      phenomlabP This user is from outside of this forum
                                      phenomlabP This user is from outside of this forum
                                      phenomlab
                                      wrote on last edited by
                                      #18

                                      julian Yes, I’ve done that, but can’t seem to make it work.

                                      1 Reply Last reply
                                      0
                                      • julianJ julian

                                        Our relationship with push notifications has been rather circuitous…

                                        1. First Andrew (psychobunny) tried plain desktop notifications via the Notification API (that’s the desktop notifications plugin), but notification delivery stopped when you closed your browser.
                                        2. Then I wrote the PushBullet plugin, but they went from free to paid and that went out the window
                                        3. Around that time I wrote the Firebase plugin, which was a dead end because there was no iOS support.
                                        4. I then wrote the ntfy plugin, which works really well, but does rely on a freemium third-party service and app (written by @binwiederhier@discuss.ntfy.sh)

                                        Thanks to some recent discussion from crazycells and bh4-tech, I learned that the Push API had reached general availability across most modern browsers. In fact, this actually happened over a year ago, so compatibility should be even better.

                                        So I set about working on yet another push notifications plugin, hopefully for the last time, and this time using the native Push API on the client-side.

                                        To enable them, simply navigate over to the “Push Notifications” menu item in your user profile, and flip the switch.

                                        6da06989-f902-492b-866f-14c39b34a9ca-image.png

                                        So, let’s dogfood! I de-activated the ntfy plugin on this site and activated the web-push plugin so you can try it out right now.

                                        The plugin is in the proof-of-concept phase, so there might (read: most definitely will be) issues. Please let me know any you find here.

                                        <baris>B This user is from outside of this forum
                                        <baris>B This user is from outside of this forum
                                        <baris>
                                        wrote on last edited by
                                        #19

                                        On windows you need to enable notifications in the OS settings, it wasn’t working without that for me.

                                        image.png

                                        Link Preview Image
                                        phenomlabP 1 Reply Last reply
                                        0
                                        • <baris>B <baris>

                                          On windows you need to enable notifications in the OS settings, it wasn’t working without that for me.

                                          image.png

                                          Link Preview Image
                                          phenomlabP This user is from outside of this forum
                                          phenomlabP This user is from outside of this forum
                                          phenomlab
                                          wrote on last edited by
                                          #20

                                          baris thanks. That setting is already on for me.

                                          julianJ 1 Reply Last reply
                                          0

                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          • Login

                                          • Login or register to search.
                                          Powered by NodeBB Contributors
                                          • First post
                                            Last post