Understanding Offline Applications

[00:00:00]
>> Maximiliano Firtman: We're going to talk about how to make your app offline capable, we know that it's not mandatory anymore, okay? Again, you know that it's not mandatory for creating a PWA. And by the way, what happens if we are offline with a PWA? Is this eye appearing? That's a good question.

[00:00:16]
I mean, let's try it not by, I'm not going to go offline manually, but I can turn off my server. So what happens if I turn off my server? So now we look at the whole 3000 is not refunding. Of course, if I'm in the browser, I know what happens, so my little guy, but actually it's not appearing right, so you need to turn it on.

[00:00:39]
But we have this our TRX. But what happens if I try to open the app? So code bad masters, I try to open the app, well, it's already open, so let me close it, and if I open the app again, I'm seeing the message which, yeah, it's not what I want.

[00:00:59]
On Android, on the other hand, we are going to get a default offline page by default that actually looks similar to the launcher image, the startup image that says you're offline, okay? But not on the desktop yet at least, I think Chrome is changing that, but it's not we are not there yet, so maybe we want to offer.

[00:01:19]
Maybe we don't want our app to be available offline completely. Maybe we wanna offer a page saying, hey, I'm sorry, we don't have connection with your logo, your theme. There are some newspapers that when you get into the website and you don't have connection, of course, you are not going to see a news, but you see a crossword.

[00:01:39]
Well, let's play a [LAUGH] game. If we don't have a connection, let's play a game, okay? Well, let's talk about that. It's a large topic, we will talk about service workers. And if you wanna get deeper into that, there is another Frontend Masters course that I deliver, that they offer on.

[00:01:56]
It's called Offline JavaScript, where we get deeper into the topic, okay? But you will get the idea, we will make it work and that, but Chef, how in mind that it's a big topic. So let's think about native apps. When you have a native app from the App Store, by the way, some people are changing now the idea.

[00:02:18]
In fact, from Google they have a guideline now on their own documents, they don't talk about native apps anymore. They talk about store apps, store based apps, because you may have an app in the store that is not completely native. It can be used in cross platform framework, or it can also be a PWA, but Max, the title says that you don't need that app store.

[00:02:42]
We'll see later that if you still want an app store, maybe you can. So, but let's talk about native apps or apps from the store. How does it work? So, the app store has a lot of packages in the cloud. The package is actually a zip file with your compiled code.

[00:02:59]
So, you go and install the bundle, that's the package. You install that in your device, a Mac, iPhone, Android, wherever, and then the bundle, now is client side install, and then it makes API calls to your web server, that's how that works. What happens if there is no connection, if you're offline?

[00:03:19]
What happens with your offline? Well, you cannot make API calls, they will fail, but the bundle is already on your client, on your computer, okay, make sense? Simple to get. Classic web apps, the web apps we are doing every day. So you have your device, you have a web runtime that typically it's a browser, but we know it can be TikTok as well, so it can be something else or a PWA or whatever.

[00:03:45]
And you have a web server and your web server you have assets, you have HTML, CSS, JavaScript, PNGs, blah, blah, blah, SVGs. You go and download the web page over HTTPs. Then that web page is Loaded into the runtime. The runtime, it realized, I need a JavaScript file.

[00:04:02]
So it downloads the JavaScript file that goes to a runtime, then images and so on. And finally, you get your UI. What happens if you try to access the classic web app with no connection? Before that, that web runtime, next API calls, okay, as native apps, just the same.

[00:04:23]
What happens if you try to open the app and you don't have connection? Nothing, you see nothing, you see this guy, this little guy, okay? So, that's a problem with web apps. If you're offline, you see the error as we saw before. So with progressive web apps and offline progressive web apps, we have the same web app architecture, okay?

[00:04:47]
Initially, we download the webpage, but here comes the difference. The webpage comes with something else, with a service worker registration, so it goes to the web runtime. And now, we have two things there, the web runtime and the service worker. Actually, we can discuss if the service worker is below the web runtime, it's part of or if something different semantics, it's not really important here.

[00:05:15]
So then you download JavaScript file, the service worker will say, yeah, let's keep that JavaScript file here. Web resources, images, HTML, yeah, I'm going to store everything client side. So then when the web runtime needs files, they're being served by the service worker, this is a simplification by the way of all the possibilities that we have.

[00:05:40]
So, what happens if we don't have connection? Well, first, I always forget this part. Then, if we have API calls, API calls go from the web runtime to the server through the service worker. But the service worker says, well, this is not for me, most of the time it says, no, we need to go to the server.

[00:06:01]
Okay, let's go, okay? And if we don't have connection and we open the app, this is what happens. So the service worker can still serve all the assets to render the app, but not the API calls.