webhintio.github.io
webhintio.github.io copied to clipboard
Notifications and custom Service Worker
Right now we are using an Hexo package that provides a Service Worker out of the box, but we've had some bad experiences with it. We should write our own that will enable also to receive notifications once the scan has finished if the user decides to.
Research and my thoughts about the things that need to be done here:
-
Register service worker in
index.html, preferentially using sw-precache since it takes care of adding hash to the assets , updating the hash if there are changes, and also the cache first logic. This will be registered as a filter in hexo so that the list of cached files is generated automatically. This is very similar to what hexo-offline does, but some changes are needed because we need access to the registered service worker inscanner-submit.jsto register for push notifications. -
Then in
scanner-submit.js, We ask for users' consent and then subscribe topushManager. The registration information returned is then submitted to the backend and saved along the scan's id. The registration info includes anendpointwhich will be used to identify to which service worker the notification should be pushed to. -
On the server side, once a scan is finished, we use web-push to trigger a push with a payload (containing the
scan id). Not sure about the details in the server side: Can we push directly fromonline-serviceonce a job is done? -
In
service-worker.js, we register handlers forpush(when a new notification is received) andnotificationclick(when a notification is clicked by a user). We can custom the url opened on click with thescan idavailable to us in the payload. https://stackoverflow.com/a/44025413
In addition, I find the following posts helpful:
- https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications#what_are_push_notifications
- https://developers.google.com/web/fundamentals/codelabs/push-notifications/
- https://serviceworke.rs/push-get-payload_service-worker_doc.html (with examples)
- To add additional handlers in
sw-precache's service worker : https://stackoverflow.com/a/44524987
It looks good! I think I'd work first on 1 without push notifications, PR that, and then continue with the rest.
Not sure about the details in the server side: Can we push directly from online-service once a job is done?
We probably will have to register in the DB the notifications we need to send and check periodically if any of those jobs have finished, and if so notify. @sarvaje, thoughts about this?
We probably will have to register in the DB the notifications we need to send and check periodically if any of those jobs have finished, and if so notify. @sarvaje, thoughts about this?
After register the notification in the DB, I think the sync service can send the notification if needed.