Observing Mobile Background JavaScript

[00:00:00]
>> What about mobile? So this Safari on iOS. So I'm doing the same but remotely, with a remote inspection here. So if you go to a new tab, you can see that everything goes down as on desktop, so it's pretty similar. The service worker is stop almost immediately.

[00:00:21]
Okay, when you go to another tab, it says, okay, the user is not there, I will stop the service worker, okay. The worker thread is still there, so this is different from Safari on the Mac, for some reason, it's a different algorithm. And that's because I'm still in the browser.

[00:00:37]
So I'm still in safari, Safari is still the active app, okay, here. But what happens if I change my app to a different app? Okay, in that case your code will stop executing almost immediately. Actually you have around three seconds before you are suspended. And that's because the whole Safari is suspended, it's not like iOS is killing you.

[00:01:09]
It's actually suspending Safari, so Safari is suspending JavaScript execution, everything, okay? So that's iOS. So also the same happens with an installed PWA. Here I have the same website but as an installed PWA. So when you get out of the PWA you have like three seconds before actually everything pauses and stop.

[00:01:35]
But there is a weird trick here, let me show you. So here I was testing this PWA background, okay? So that was the PWA that you saw before this one, okay? So I get out of that PWA, but then I open another one. So of course here, if I go back, everything goes back to green as expected.

[00:02:00]
But what happens if I open another PWA? For example, Airhorner, but it's a different PWA from a different origin, nothing to do with mine, okay? So if I open another PWA, my PWA is back for some reason you will see that now. So if I open the other PWA, my PWA is also back.

[00:02:22]
So it feels weird. So and if you close my PWA now it's stopped. So what's going on here? This is how iOS implements PWA installation. They are using the same process, kind of, they're like the same browser for all the PWAs that you have installed on the iPhone or the iPad.

[00:02:43]
So that means that you may have different PWA's open. But all of them they have the same execution rights if one is active because the process is active, make sense? Again, I'm going to PWA, I'm going to Twitter PWA. Then press the homescreen, so now the Twitter PWA is suspended.

[00:03:05]
And then I open the Tik Tok PWA. Twitter will also wake up. Okay, it's a weird one it's a weird trick but that's how it works, yeah.
>> What if it's a PWA installed through like the app store, like the Twitter you install-
>> Okay so if the PWA is installed through the app store, so that's a different app, it's a different process, it's going to use the web view.

[00:03:28]
And it's a complete different life cycle. So in that case, it won't be running. Okay, unless you reopen that app. Okay, but have in mind that PWA is on iOS, not on Android, on iOS, coming from the store they're using a different web engine. A completely different web engine, so from a process point of view within the OS, it's a different process.

[00:03:57]
So they don't share anything including the lifecycle, okay, makes sense?. So on iOS and iPad OS, your website becomes not visible in the lock screen. Think about things like on desktop, we don't think about this a lot, but yeah, long screen. So, yeah, maybe my app, my website is still there.

[00:04:20]
But now my phone is locked. Or the user goes to the home screen, open another tab and what was in the background, they can be in memory or not, how can we tell? We can't, we don't know. If we see a background tab on iOS or if we see a background PWA on iOS, we don't know if it's in memory or not.

[00:04:45]
Okay, the UIs always a screenshot and it's not updated. Remember I mentioned that nine years ago I did a zombie tab trick. Well with that zombie tab we're actually going through this. And in the background, the tab was actually going back to life, it was actually a trick.

[00:05:08]
So, typically you have 2 to 3seconds, but for some reason sometimes it gives you 30 seconds. Of course nothing from Apple officially saying what's going on. But I couldn't find any reason of why sometimes it gives you more seconds to execute code, who knows. So but having mind that after you're done you need to be really quick if you wanna do something such as saving the state in IndexDB, or something like that.

[00:05:40]
Because you don't have so much time. If the PWA still in memory open another PWA will also give you a background execution rights. Again, that's a tricky thing, but it can be good or bad, I don't know. But having mind that maybe you think that your PWA is back, but it's not.

[00:06:01]
So your JavaScript code is executing code again and you say, we're back, the user is using our PWA again, no, he's using another PWA, not yours, okay? You gonna still know with an API that we will see later if we are visible or not. Okay, so you can still check that.

[00:06:21]
And the last thing that I have here is Android, okay? So on Android, of course, the basic part is the same. So if you open another tab, for example, everything goes down as expected, okay? Compared to other browsers is actually the same. But what is not the same, is what happens, I think I'm going back now to the tab, so everything is green again and 100%.

[00:06:47]
What happens if I minimize the app, or if I press the home button, or if I open another app? So the worker thread is it still executing 100%. The service worker also. My timers were throttle, the standard window timers, okay? And that will happen for around five minutes.

[00:07:13]
For five minutes your web app is still there unless the user is actually killing the browser process or the PWA process, okay? But it will still be there for around five minutes. If I do that at that point is stop, okay? But that's interesting because that's different from iOS and also that's different from desktop.

[00:07:40]
On desktop you can still be there forever executing code with your timer throttle. On Android it's five minutes, Chrome on Android, different browsers will work differently, okay? And on a PWA it's actually the same thing because even if it's coming from the store, because it's using the same chrome engine.

[00:08:02]
So this is an installed PWA, it's just the same thing. So on Android, it's not visible, if it's in the lock screen, in the home screen. If you're going to the multitask way of seeing all of your open apps. If you open another tab or another app, in those cases, your web app, your JavaScript code will go to the background, okay?.

[00:08:25]
In this case, page navigations as on iOS can be memory or not, the UI is just a screenshot as with iOS. And on Chrome, you have up to 5 minutes of execution in the background and the service worker is roughly 30 seconds. If there is the service worker is doing nothing, and there are no more HTTP network requests.

[00:08:47]
The service worker or the browser will say okay service worker get out I don't need you anymore for now. Firefox in this case the page stopped immediately. Okay, and the worker thread has around three minutes after that. Different algorithms, okay? So one of the things that we have here, one of the problems that we have is that it's a mess, okay?

[00:09:13]
So this is the results of this research that I've been doing here about what's going on. I mean, it's not important to go now over the diagram or to each value doesn't matter. The thing is that this kind of change anytime, new versions of every browser or new versions of the OS can change how everything works.

[00:09:39]
So we need to plan for this, okay? So we need to plan for our app working in different situations