 Proste. V že. Ano. Nažal. Vzgelam Gabrieli Falazka. Vzgelam. In vzgelam, da bo se z njom, da se je srečen za provesivnega. Vzgelam. To je krom, da ja ne bil, ki so srečen. Srečen je problema for informacije. ... Sorry. ... for the information flush of an application because you don't have the data. And now I will show you how to manage the data also for offline. Zvok z različa, Google Play je vzalo, da je progressive web app izgleda na stor. In tako, po vzal jaz progresive web app od Google Play Store. To je dobro. Kaj je progressive web app? Progresive web app je analizujna z web aplikacije in Netiv application. Here is a web application that you can install on your mobile device and it has a look and feel of a Netiv application. If you have an existing web application, if you want to migrate it to a progressive web app, you have to follow this step. Musite ještje odrednjati, da je vseče fertilizeri udzivno poslušovati tato QPS protokol, musite zvom taj občat, svoj dovolj nečično kasiče. Svoj izvom odgovali ti dnežen umočkost, da opravil mobilne visualizale. Aspešite vseče uspeši vseče daježjen. OK. Let's here a cup for server-side rendering versus client-side rendering. OK. Server-side rendering is the... Most of the websites are also in server-side rendering. So the browser make a request to the server and the server returns a complete static page. And after the page loads all remote assets, CSS, JS, images, and the reaction on the page causes the full reload of the browser tab. OK. In client-side rendering the server returns only a blank template. OK. And after through JS you have to fetch the data and show to the user. But the pro is that every action on the page reload only the part of the code where action is triggered. OK. If you want to cache things in server-side rendering, you can cache CSS, JavaScript or asset and static page. OK. In client-side rendering application, you can cache CSS, JavaScript template, images, and you can cache the data received from the network for offline use. If you have simple data, you can use cache API. But if your data is a bit complex, you can use index.db. And you can manage the offline state through JavaScript in this mode. If you are checking navigator dot offline flag, or there is a solution even based in JavaScript, you can catch the offline and online events. OK. You know service worker? There are a piece of code that sits between the application and the network. And the service worker can cache things, can intercept all the fetch requests, and you can use particular APIs, such as web payment or, I don't know. OK. What you can do with service worker? Caching things, register for push notification, use various API, I just see, and other things. OK. This is the first strategy for caching things in progressive web app. You have to create your app for this schema. You have to separate the application shell, so the old scaffolding part of the application from the dynamic content. OK. In this mode, when you start the application, you can cache immediately the application shell, and after you can get the content dynamically. OK. Let's start with the real caching strategies. Let's start talking about when to cache resources. OK. This is the first approach. You can cache resources on install. OK. When a service worker is instantiated, he is trigger an install event, and in the callback of this event, you can, is ideal for caching all the dependencies of the application. So, JavaScript, CSS, images, and other data, you can consider statically for your application. OK. Another event is activate. When you update your service worker, and the new service worker is activated, the old one is not working anymore. So, you can catch the activated event of new service worker, and use this event for purge the old data, purge the old service worker data, and you can manage migration schema for your indexed DB. OK. For caching resources, you can use also user interaction. So, you say, read later, save for online buttons. On the click of the button, I cache the data, the proper data. So, as you can see, the cache API is not available only in service worker, but you can use also in the regular page. Another strategy is caching data on network response. Is a good approach for not big data, because for a moment, you have two instance of the data, as you see response.clone. So, if you fetch very bigger data, it could be problem of memory, because the weight is doubled for a moment. OK. You can cache things also on push message. You know push notification, yeah. OK. And with service worker, you can register for a push notification service, and if you want, you can store data in cache with a push notification, when the app is closed, but the device receive the notification and we start to caching the data of the notification. This is a new API, but in this moment is not standard. The background sync API in JavaScript for service workers. We can start a sync, a background sync update of the data, and during this update, you can cache the things you are updated, but sync API is not W3C standard in this moment. OK. This is a cool approach. The approach used, for example, for the WhatsApp avatar. Are you sure? When a user changes avatar, you continue to see the old one for a bunch of time, and after the other launch of the application, the update. OK. I showed to the user the data I have in cache, but I recovered the new data from the network for the next time. Is ideal for if you have data that you don't need the last update. OK. OK. Now let's see how to respond to request. We can see when use cache data or when use network data, or let's see also hybrid approach. OK. This is the simplest. Oh, I have a fetch. OK, make the fetch. This is ideal for all not get request. So for submission, you can't cache the request because you have to send data to the server. And for non get request, you can do anything. Another, this is the most used strategy. OK. This is the standard strategy, and all other strategies can be exception from this. Oh, I have a fetch. OK. I have the result, yes. This is the result. No, I don't have the result. OK. I made the request on the network. This is the old approach of the social network, of all social network. I tried to recover the latest data, but is the network fails. I show you the caching data. And now this is the new approach. The code is split into slide because it is longer. This is the code you have to use in the application page, and this is the code of service worker. OK. And in this strategy, you show immediately to the user the cache data, and after show the data, you can recover the latest data on the network and put it in the same feed of the user. OK. So this is the code of the service worker, ideal for content that updates frequently, such as social media timelines. OK. Other strategies, but let's use this cache network race and generic fallback. Generic fallback is the classical error page. So I don't have the data, sorry. And cache network race is extremely particular situation. You can use it only if you are sure that device where it is installed at the app, are very slowly discussed. OK. So I start contemporary the cache call and the network call, and I use the first result, the result of the winner of the race. OK. Oh, let's see a real service worker that... OK. You see the code? OK. Now you can read. OK. This is a service worker for a Pokedex. You know the Pokedex Pokemon? OK. On install event, I cache the main chunk of my application, is a react application, OK? The main chunk of the application, is a JavaScript. I fetch the list of the Pokemon, because the Pokemon are there. And I cache the Pokemon images, OK? I create a function for generate an array of images, URL, and I cache it. And after I intercept the fetcher, I use the different strategies for many cases, for learning purposes, because are not the optimal strategies for these cases. OK. If I want to see an ability of a Pokemon, I use the network cache fallback approach, OK? And if I want to see the move of the Pokemon, I use the network only. I use this because I can show you the difference between cache call and network call, OK? And for other call, I use the network cache fallback approach, OK? Let's see the application. OK. So, if I refresh the page, you can see, this is all Pokemon images, OK? If I open an URL, I see the request timing is 0 millisecond, because I have already in my cache. The same is for the call of the Pokemon list, 0 millisecond. And is, so, Bulbasaur, OK. And if you want to see the detail, if I want to see an ability, I have to recover the data from the network, OK? And the timing is, the request is lowly, then the others, OK? If I return to the home and I refresh, it's done timely, OK? So, I'm finished. Have you got a question? I've been doing a little bit of work with PWAs, and one question that keeps coming back from other people involved in the project is, what happens if the app is not connected for a period of time? Because you can't guarantee that the caches are going to be kept. So, you can't guarantee that the cache gets maintained, persisted for a long period of time. It might get flushed out of the system. What sort of strategies have you got for that if you're not going to be connected to a network? So, the example I can give is people out on a shipping boat, they've got their app, they're doing some work using that, they might be away from shore for a couple of days. So, the cache is persistent, but there are limited space, OK? And some browser, as to, when this limit is reached, start to flush all the data. And Safari polish the cache randomly. Randomly it starts the cache polish. Are there any strategies that you've come across to help, in case of that, perhaps using other parts of web APIs maybe to maintain to work with that? Are there any particular strategies that you've come across to help with that situation? You have to study case for case. That's what we got to, as well, I was just wondering. OK. About the previous question, one of the strategies, maybe the persistent data, you can ask for this persistent data. Sorry, I was saying about the previous question, maybe I can just add there is a persistent API, not available everywhere. But anyway, that's not my question. My question is, what's the, again, what's the strategy to update the application itself? So, when there's a new version of the application, so how to deal with that? So, I install it with the service worker and then how to inform the user. Yeah, when you install new service worker, you can catch the activator event of new service worker and you can clear the old data and update your data. Yeah, but how do I know that I need to delete my old version of the application and download the new one? How to check the new version? This depends of... So, the cache is versionated, OK? So, you can use a different cache for any version of the application. And on activator event, you can purge the older cache and use also the new with the new service worker, OK? Is there a question? Yeah, thanks. It's not a question, it's an addition. You don't have to implement the whole caching strategies. At first, there are a lot of tutorials out there. And secondly, there are libraries for that out there. One of them is, for instance, Workbox. It's a pretty good library. You probably know it, but the others don't. Workbox, but I want to show without it because it doesn't make sense, but I think it's important that you say this. To know the concept, yeah, absolutely. Was there a question? No? OK, thank you. OK, thank you.