terug naar overzicht

21/07/20

Insight insight

.NET Applicatieontwikkeling

Daan Stolp

+31 35 539 09 09


21/07/20

Dealing with data when your Angular PWA is offline

How do you add offline capabilities to a web application? If you search for an answer to these questions, the answer that will invariably pop up is to turn your application into a Progressive Web App (PWA). It is easy to find tutorials that cover the basics. But then the difficult questions arise: what architectural pattern do I use to fetch, store and cache my app’s data? How do I synchronize local changes to the data back to the server? How can I test all this?

Online-first vs offline-first

Once you master the basics of creating a PWA and using the Service Worker, you need to decide how to use these capabilities in your own application. There is an infinite number of options here, but they can roughly be divided into two approaches: online-first and offline-first.

Online-first

With an online-first approach, you would create your web application as if it were a regular, always-online web app. Then, at certain strategic points in your app, you add in offline capabilities. This comes mostly in the form of caching. You simply cache the results that your app makes to the API. Then when you happen to be offline, the app can simply load the cached results and remain operational.rnrnThis approach is arguably the easiest to implement. You simply create a regular web app, and ‘bolt on’ some bits where you need offline capabilities. For simple data caching strategies, the Angular Service Worker implementation offers most of the required functionality out of the box. However, you are quite limited when it comes to offering a rich offline experience. The only data that you have available, is data that you have retrieved and cached previously. And when you need to temporarily store outgoing data (POST/PUT calls to your backend), you need to build your own mechanism to handle this.rnrnSo how do you do this, exactly? How can Angular’s service worker implementation help? What patterns can you use to cache and store data? We’ll see some specific answers to these questions in part two.

Offline-first

In an offline-first approach, you will design your app with the assumption that you do not have a network connection. Some scenarios do require a connection of course, such as the initial loading of the app, or synchronizing data between your app and your backend. But every other action in your application should be designed to work offline. Any data that your app needs or produces should be fetched or pushed at controlled moments and stored in a local data store.rnrnUsing this approach, you have the most control to create a rich offline experience. Since u003cstrongu003enotu003c/strongu003e having a network connection is the default assumption in this approach, the app will naturally have a very powerful and rich offline experience. This does come at a cost, though. Compared to the online-first approach, it is much harder to add such capabilities to an existing (online-only) app. Common operations such as authentication, the retrieval of simple reference data, or even making available simple assets such as web fonts or external scripts, all need to be re-thought and re-built to fit the offline-first approach.rnrnIn part three, we’ll dive deeper into this approach. We will look at techniques for creating a sync mechanism and storing your data locally.rnrnBut when we talk about “offline” capabilities, it is worth examining what “offline” means, exactly. Because that is more complex than it seems.

Delen