Service Worker Background APIs

[00:00:00]
>> The background APIs that we're going to see are all abilities on top of the main spec, the main service worker spec, okay? We will write our service worker later, but compatibility differs per browser. I will show you how the situation looks like right now. But we need to have in mind, and we will focus on that in a minute, that in the background, maybe not, the user is not using our app.

[00:00:30]
So I cannot just update something in the DOM to render information for the user. You're in the background, okay? So if we wanna notify the user, we need to find other ways than just rendering in the DOM, okay? So have in mind that because the background is also a challenge.

[00:00:52]
So we have Web Push. Web Push, it's the only API that involves the server, the backend as well. So with Web Push, our server, so server side, we can decide to wake up Charles' group code in user's device anytime, okay? So, it's the only one that it happens server side, so the server can actually wake up the code in the background for our web app, okay?

[00:01:24]
Background Sync, it's another API. This is a very simple API, and we will test that later, that will let us expose to the browser that we have a pending sync operation. So we need to sync data to the server, okay? It can be anything. We may wanna download data.

[00:01:45]
We may wanna send data, okay, or both. And we're going to specify to the browser, hey, browser, I need to update data, remember that, okay? And maybe there is no connection right now, but later in an hour, the user gets connection, but the user is not using our app.

[00:02:03]
But the browser will remember that there is a pending operation, it will wake up our code. It will say, okay, try now, go now, sync your data, okay? That's Background Sync. Another one is called Periodic Background Sync, which is even more interesting. We can actually ask the browser, hey, browser, something like this.

[00:02:25]
Every morning, I wanna wake up my code, even if the user is not using my app and they wanna download some data. Is it possible today? Yes, we will see later how, okay? What are the options? How does it work? But it's possible. Background Fetch is for the case that you need to download large amount of data, okay?

[00:02:53]
So you're downloading a video, or a PDF, or whatever, and it's like 200 megabytes, a gigabyte. And yeah, if you're running that in the main thread, what happens when the user closes your app? So the user must be there present with your web app, active to download the data.

[00:03:14]
Well, with Background Fetch, we can do a fetch, so we can download data not matter if the user continues using my app or not, okay? Something like that. Payment Handler, it's the only API that we won't cover today because it's a very, very niche specific API. The idea is that, I'm not sure if you know, there is an API known as Request Payment API.

[00:03:41]
So it's the one that allows a website to use, for example, Apple Pay or you can use Android Pay, or you can use your store credit cards in your Desktop browser to pay on a website. Well, there is an extension to that API, it's called the Payment Handler API that has to do with pre-authorization.

[00:04:01]
I mean, when you go and you wanna put some gas in your car, you pre-authorize your car, because you don't know how much money you will actually spend. So then using this API, you can pre-authorize the charge. But then maybe you will charge the user in five minutes, in ten minutes.

[00:04:22]
What happens if the user closes the web app? Well, with the Payment Handler API, you can wake up your code in five minutes to actually finish the pending payment operation. It's a very niche situation, okay? But it's there, anyway. On Chromium, all these APIs are available, okay? So that's Google Chrome, Samsung Internet browser, Microsoft Edge.

[00:04:49]
The other Chromium browsers, it depends, sometimes they disable these APIs because of privacy reasons or because they want to, okay? But the main three, or even four, do you know Opera probably? The main four Chromium-based browsers, they all have these API's. Well, with Safari, Web Push only and with an asterisk.

[00:05:13]
So it works only on macOS Ventura, okay? Only from MacOS Ventura you can use Web Push, and iOS and iPadOS is coming 2023 at one point, no one knows, okay? And finally, Firefox, it's only Web Push, okay? So Firefox is only Web Push. So we don't have the other APIs.

[00:05:39]
But anyway, Chrome or Chromium, they have around 80% of the global market share, so 80% of the users will have all these APIs available. So that's the whole situation.