Get notified of new strips through push notifications (BETA)

Webcomic Push Notification Manager (BETA)

This BrowserApp's Subscription Status

FYI: you are now viewing this page in a regular browser tab.

FYI: you are now viewing this page in a PWA environment.

About

In these days of short attention spans and people expecting machines to do all the work for them, I reckon it makes sense to provide web push notifications when a new S.O.N.A.I.S. webcomic strip is published. It has almost cost me my sanity to implement this, but here it is.
The BETA label means this is likely to contain bugs and not behave according to my quality standards. Given the current state of how Web Push notifications are handled across different platforms, I'm afraid I will not be able to remove the BETA label in the foreseeable future, if ever.

Instructions

In a nutshell:
First open this page on the device where you want to receive the notifications.
There are 2 possible ways to deploy the notification system:

1. Install a so-called PWA, a “Progressive Web App,” basically a webpage bookmark on your home screen that gets a special treatment to make it act like a regular app. This is what you should use on mobile devices (iOS, Android; in fact, on iOS it is the only way to make it work).
   Detailed instructions are below. After deploying the PWA, open it and continue following these instructions shown inside it. It looks like you have already deployed the PWA, and we're inside it. Good. Now the only thing left to do, is press the Subscribe/Refresh button if you haven't already.
2. Subscribe your web browser itself to the notifications. This is the recommended way on PCs/Macs/laptops (most of them won't even support deploying a PWA anyhow).
   In this case, just press the Subscribe/Refresh button to subscribe this browser to the notifications. (If that button is not even available, you are likely using a mobile device and will need to deploy the PWA.)

Unfortunately the current state of push notifications is still shrouded in black magic and arcane rituals—not only for developers, but also for users. However, I expect anyone who reads the S.O.N.A.I.S. comic to be geeky enough to figure it out. If you are unfamiliar with push notifications, I'm sorry to say that you will have to read through the entire pile of text below, to have a good chance of the notifications working and not breaking after a while—welcome to the Internet anno 2024.

More details:

• Push messages are registered for the specific browser on the specific device where the Subscribe button is pressed. For instance, if you want the messages to show up on your smartphone, navigate to this page on that phone (and if needed/desired, do the PWA ritual as described below), and press the button there.
• On iOS Safari (iPhones and such), you need at least iOS version 16.4, it won't work in older ones. Even in compatible versions, this will not work directly in the Safari app. There, you must first install this as a PWA.
  To do this, press the ‘Share’ button that is either in the top right of the display or at the bottom (scroll up to make it appear), and then choose “Add to Home Screen.” Then open this newly installed ‘app,’ and follow the instructions inside it. In iOS, you must deploy this as a PWA, but it looks like you already did this. 👍
• It looks like you have already deployed the PWA and are now reading these instructions inside it. Good. The only thing left to do, is press the Subscribe/Refresh button if you haven't already.
• Even on Android or other non-iOS mobile devices, I recommend deploying the PWA, for reasons of convenience and reliability.
  You might get a prompt to deploy the PWA upon opening this page. If not, it can be installed through the browser menu in a similar way as described above for iOS. First decide whether you want the PWA or not, and only then press the Subscribe button either inside the PWA or in your regular browser tab. Do not try to do both, or things may get hairy.
• The registered app must stay “open” for notifications to appear (mostly) reliably, although you don't need to keep any of this website's pages open; notifications are handled by a ‘service worker’ that stays present in the background. (Don't worry, resource usage is minimal.)
  When you reboot your device, it is recommended to re-open the PWA or browser app to ensure you keep receiving notifications. (In theory, iOS and MacOS Safari do not require keeping the app open; in practice though, you will encounter bugs if you don't.)
• If you want notifications on multiple devices, you need to subscribe each of them, but each device will be unaware that you already opened a message elsewhere, so I would suggest picking only your most convenient device. If you want to migrate to a new device, unsubscribe the old one and repeat the subscription process on the new one.
• You should open this pagePWA from time to time, to allow the notification system to update itself to a newer version if available.
• I recommend opening this PWA at least once a month, to avoid that your device thinks you do not actively use it—recent mobile operating systems are really eager to automatically disable stuff.

Remarks

• This requires a fairly recent browser to work. If you are using Chrome or Firefox on any non-antique device, it should work. Safari on iOS works from version 16.4 onwards. Safari in MacOS works from Ventura (13.0) onwards (but, see remark below).
• The local notification test button creates a fake notification to see if at least that part works. It does not test receiving messages from the server. The only way to verify that, is to wait for the next strip to be published. It is not abnormal for the first message not to appear, so don't panic until you have seen at least 2 new strips on the S.O.N.A.I.S. website without being notified.
• Safari in (a compatible version of) MacOS does does have one upside: you should still receive notifications even when Safari is “closed*.” However, the downside is that you may also have to jump through extra hoops here, see the troubleshooting section below.
  • (* spoiler: Safari never really closes. Apple is now doing exactly what they accused Microsoft of back in the days: making their browser too intertwined with the OS. How times have changed… or not.)
• When opening a notification, the comic page should be opened either in an embedded browser inside this PWA, or in your regular browser app, this varies per browser and device brand.
  Random bugs in Web Push may cause you to end up on this ‘app’ page instead of the comic page. In that case, you can always hit the SONAIS logo above to go to the comic.
  If opened inside the PWA and you're done reading, close the embedded browser or hit the ‘back’ or ‘Done’ button to return to this UI, but mind the iOS bug mentioned below.
• If you want to remove notifications from this particular device, first hit the ‘Unsubscribe’ button while connected to the internet. It makes sense to uninstall the PWA afterwards (remove it from your home screen and/or apps list).
• This comes without any promises. Use at your own risk—although the worst that can go wrong is that you either get no notification when you should, or perhaps get a few duplicates of the same notification. Reliability depends on Google's FCM, my ability to work around other people's (and my own) bugs, alignment of the stars and planets, and the degree to which certain companies succeed in pushing their disgusting agendas rife with dumb short-sighted greedy policies aimed at hurtling us all back to the pre-internet era.
• This has the least risk of spontaneously breaking if the subscribed browser is pretty much guaranteed to be always running. Reliability seems best on a desktop/laptop machine. A smartphone that is always online should also work most of the time; a tablet that is only sporadically used, not so much…
• This works without logins or authentications. I opted to implement the messages through Google's FCM, a.k.a. Firebase service. The FCM server keeps a unique ID for this particular ‘app’ on the browser where the Subscribe button is pressed. If you want to have this ID wiped from the servers, it can be done, but you will have to contact me. In general it is pointless to be paranoid about this; this little bit of data is of no use to anybody and will vanish a few months after unsubscribing anyway.
• Don't try to go all Zhang on this to see if you can break it with typical QA practices like hitting the buttons like a madman. The server might decide you behave like a bot, and trigger an automated ban. Also do not try to install the PWA multiple times even if it seems possible.

Troubleshooting

• Push message subscriptions are fragile. Expect notifications to break as soon as you change something about this site's notification permissions in your browser's preferences, or if you indiscriminately delete site data.
  If you don't use a device for a long time, it will no longer receive messages. A month is guaranteed problematic, but it might already decide to quit working after less than 2 weeks of inactivity. You should check the subscription from time to time by coming back to this page, or opening the PWA if installed.opening this PWA. If you suspect notifications might be broken, hit the ‘Subscribe/Refresh’ button.
• In iOS Safari, at some point you may start seeing duplicate notifications. I will apologise in advance: there is nothing I can do about this, it is caused by the combination of a bug in FCM and how iOS treats push notifications. Safari does not honor the notification ‘tag’ concept. Apple finds it paramount that the user sees every single push message ever received, even outdated ones or duplicates caused by bugs in the push server. Due to the nature of the duplicates bug, unsubscribing and re-subscribing will not fix this, in fact it could make it even worse, so don't. With some luck, the duplicates will go away again after a while—again, no promises.
• Also in iOS Safari, yet another Apple bug: you may end up on a blank page after opening a notification and pressing ‘Done.’ The only remedy is to restart the whole notification app: do the weird gesture to get an overview of open apps, swipe the SONAIS app upwards to close it, then re-open it. To reduce the risk of this bug occurring, keep the app open.
• If you are using Safari in MacOS, and you get an error about ‘PushManager’ when clicking the Subscribe button, this is perfectly “normal,” because Apple. The remedy is to quit Safari and reopen it—don't ask why: Apple. Then click the Subscribe button again, and it might work; if not, repeat this process a few times. If it keeps failing, why not try Firefox or Chrome instead? You might like it.
• In recent versions of Chrome, you may end up in a “default” situation where it seems as if you denied notification permissions, even if you didn't. This is a total mess and I might try to debug this at some point. Until then, the proper way to escape this mess is unclear, but you have a decent chance of fixing it by unsubscribing (if need be, using the ‘force’ option from Geek Mode), entirely uninstalling the PWA if installed, and deleting any notification settings for www.dr-lex.be in your browser's settings. Then re-subscribe.
• Some devices may postpone showing the notification when they are in airplane/silent mode, even if WiFi is enabled.

Why is this so complicated?

If this all seems terribly complicated and confusing, that's because it is. The Web Push ‘standard’ is an organically grown atrocity of which every device/browser vendor has a different interpretation. If it looks awkward as a user, imagine what it took to get all this working from a developer point-of-view. When I started working on this, I thought it would be relatively straightforward to implement, but oh boy, was that a naïve idea.

For those interested, I have summarised my experiences gathered while implementing this push message system.
There seem to be proposals to make web push messaging less of a pain to implement and use, but for the time being, this is how it is.

Back to the S.O.N.A.I.S. comic