Check out a free preview of the full JavaScript in the Background course

The "Background JavaScript Execution Rights" Lesson is part of the full, JavaScript in the Background course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano discusses the limits of executing code in the background and available options, including Google Play Store PWA, App Store PWA, service worker background APIs, and playing audio and video.

Preview
Close

Transcript from the "Background JavaScript Execution Rights" Lesson

[00:00:00]
>> So the problem is that some of you, some of your use cases, will actually say, hey, I wanna still execute code in the background. It's actually, in fact, something that some projects and some PM sometimes they, but I wanna follow the user wherever it goes with my PWA.

[00:00:20]
Of course, this is limited, okay, so we are going to see here what we can do in the background. We are not a native app. We're not going through an app store review process on mobile, for example. So the browser will never give us infinite background execution rights, okay?

[00:00:38]
But there are still some things that we can do, and that's what we're going to cover today, okay? So options available today, as a summary first. You can go to the Play Store, publish a PWA for Android and then you can have your website on one side, and you can have native code that can execute code in the background.

[00:01:00]
Because it's going through the App Store review process, you have full power, okay? But yeah, it's not 100% a web app, okay? On Android you can create a service and also many other things, but that service can actually execute Kotlin or Java code in the background, okay, even every ten seconds.

[00:01:25]
Something similar can be done with an abstract PWA. We're not going to cover this because we are web developers here, so we are not making native code today, at least. And we will cover service worker background APIs, and these are some additions available on top of the service worker stack that will let us execute code in the background, in any of the background situations that we mentioned before, okay?

[00:01:55]
And we will see later in which ones. But again, the background means that when it's hidden, and when my timers are down or when everything is dead, I don't know, that's the background. So we will see how we can execute code there. And also recently, we have another use case for background execution, recently, I'm talking about in the past year or less.

[00:02:19]
So on every browser today we have new APIs for audio and video playing in the background. So if your web app is playing audio or video, now we have ways to keep our web app running in the background, because we need to still work on that background audio.

[00:02:38]
If it's live playing, typically, sometimes we can run our own JavaScript code that will start downloading the new piece of audio or video that needs to be sent to the player. So in this case, we will see, and we have an example later so we can test this on our computers, on our code, how that works.

[00:03:03]
And even there are some tricks that I will show you later, that's on desktop actually, that maybe you don't have video playing. You don't have video on your website, but you can still trick the browser that you have video, okay? You can render something that maybe it's not a video, it can be a game, it can be a DOM element, a cCanvas, wherever.

[00:03:24]
And you can be playing that as a video and then you can execute code in the background, okay? That trick works only on desktop, okay? Make sense? So those are the things that, I mean, the last two are the things that we will be coding later. For the rest you need to learn Kotlin or Swift to actually inject your PWA inside and then have background execution rights.

[00:03:52]
But even with that on iOS, background execution rights are granted per basis and it's not so simple. Like, yeah, I wanna execute code anytime, it's not so simple on iOS. Any question, do you have any question?
>> I do.
>> So these are related to mobile applications. And do we have-

[00:04:14]
>> The first two, I'm sorry, for the last two, it's actually multi platform, so it's desktop as well. But these two are actually mostly mobile. I'm saying mostly, because now, for example, on Mac, you can actually run iOS and iPad applications. It depends on the Mac you have, if you have a DM1, blah blah blah.

[00:04:35]
Well, not the Google Play Store, actually, but if you take your Android application and you publish your Android application in the Amazon App Store, it appears in Windows 11, Microsoft Store on desktop as well. So it's kind of desktop as well, okay? To be honest, at least on Windows 11, the Android runtime, that background thing, it's tricky, so it's tricky, but anyway, it's there.

[00:05:07]
So it's also desktop. Again, it's not a direct desktop solution but it may work on desktop as well. On desktop, if you care about desktop, of course, you always have the way to create a hybrid for desktop as well, okay? And then you use any of the frameworks available out there to create desktop web applications, okay?

[00:05:35]
And then you can execute code in node.js, okay, on the desktop and then the UI is your web app. I mean ,VS code or Slack, they're using those techniques. So they are websites, web apps, but they are wrapped within a native container. Electron, for example, is one of the well known frameworks to do that, okay?

[00:06:01]
But on those situation we are getting out of the web platform for a minute.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now