Push messages to browser notifications
Part 2: Adding a Service Worker
In part 1, we set up a Firebase project, web page and bash script so we can send messages to a web page from a linux command line.
But we don’t yet display browser notifications, and the web page only receives messages when it is the open tab.
The good news is we can solve both of those problems by using a service worker.
A service worker is just some Javascript that runs in the browser. It’s installed by your web page, and it continues running when you switch to another tab. It even keeps running if you close the page. This makes it ideal to receive and handle messages from Firebase.
(When the web page is open in the current tab, Firebase messages go to the onMessage function in webpage.js.)
If you’re just interested in the damn code, the final version is on github.
Adding a service worker
We created an empty file, firebase-service-worker.js in part 1 because that is the default Firebase service worker and it needs to load it.
Our service worker code will live in a file called service-worker.js — we’ll use a different file so that we can see how the registration works. This will receive the Firebase messages and create notifications, and handle clicks to open a tab with our web page.
Copy the following code to the file service-worker.js. Update the url variable with the URL to your web page.
The method onBackgroundMessage is called with the Firebase message, and we can handle clicks by adding a click event listener.
Registering the service worker
We need to explicitly register our service worker before it will be loaded, and then we can use the registration to create notifications for Firebase messages received in the onmessage function.
Update the webpage.js file to register the worker before getting the token, and then to use the registration to display notifications in the onMessage function (displayMessage doesn’t change):
Reload the page, and generate a couple of messages.
When the current tab is our page, a notification appears and the page is updated. This is because the Firebase message was delivered to onmessage.
If the the current tab is a different page, the notification appears but the message isn’t added to our page (if it is open). This is because the Firebase message was delivered to onBackgroundMessage in the service worker, and it cannot access our web pages DOM.
Managing your service worker
If you change the service worker code but it doesn’t seem to update, use the browser inspection window.
You can use the update link to force the service worker to reload.
Summary
This is pretty good — we have notifications even if our web page isn’t open, and if it is open in the current tab, the page shows the messages.
But it would be kind of nice if we could update our page if it wasn’t the curent tab. And even nicer if when we open our page, it shows the messages that were received while it was closed.
For that, we need to be able to store the messages, and communicate between the service worker and the web page Javascript thread.
Read on in the conclusion, part 3!
