Internet connection might be unstable. In a worse case, it may be lost especially when you’re on a move. With PWA & offline working mode, it won’t be a problem anymore.
One of the most significant advantages of PWA is that you can visit websites even without a network connection.
Whether your app can maintain a consistent user experience under different scenarios depend on many factors, such as:
- How fast it is to download under various signal strengths.
- How your app works under the offline condition
- How your app & service work when it scales & attracts many more users every day
- How your app performs on older devices
With PWA, many internet-related issues are solved. This is also one of PWA’s strengths compared to the traditional website experience, which heavily relies on the network connection.
In this article, we will explore some of the best practices to use PWA local storage, which enables the offline working mode.
Best practice to use PWA local storage to optimize performance
One of the ways to speed up your PWA sites & improve their efficiency is to reduce network requests & maximize the use of response caching. There are many caching strategies, today, we will explore the most popular ones.
But first, let’s take a look at the service worker – the main operator for these strategies to work:
Service Worker Caching strategies
Service worker is a Javascript file running on the website background. It blocks resource requests, events & responses based on your pre-defined rules. As a result, you will have the freedom to control your app user experience, even in a poor-internet environment.
Service Worker’s characteristics:
- It’s a Javascript file
- It does not communicate directly with your website DOM. Instead, it uses a special interface (postMessage) to communicate with pages, and interact with DOM via those pages.
- The service worker is a programmable website proxy, thus, we can control how requests are handled.
- It will turn off when not in use.
- Service worker makes great use of promise
Stale-While-Revalidate
Stale-while-revalidate helps developers maintain the balance between immediacy & freshness. To put it another way, content is loaded right away while staying constantly updated.
It checks data in the cache. It separates fresh and stale cached responses. In general, fresh responses will be used to fulfill requests as normal, while stale responses have to go through a revalidation process. Then, if the data is invalid, the service worker will fetch responses from the network & save data in the cache.
PWA uses this strategy on high-priority files & non-GET requests (e.g POST requests). A response to a POST request is different every time it’s sent. Thus, it’s suitable to use with local storage practices that allow frequent data fetching such as the stale-while revalidate.
Cache-first
This strategy focuses on checking the cache to see whether your request data is stored on your local PC. If yes, the requests will be served from there. The service worker will only retrieve data from the network if the cache has errors.
The cache-first strategy is often used for GET requests, which allows a faster static content download. Here are the codes you can use to provide resources from the cache:
PWA takes advantage of this strategy for images, videos, CEE, etc & other files that are not important to web applications.
Cache-first is also a great strategy to reduce network dependency, but it will impose some limitations if it’s widely used for your app.
Network First
Unlike the cache-first strategy, the network-first strategy will try to fetch responses from the network. If successful, it will save responses to the cache. If the network is unavailable, it will find data in the cache.
PWA mainly uses this strategy for frequently-updated requests, especially POST requests. Online users receive the most updated data, while offline users receive cache-saved data.
This is great in case of a slow network connection. Users will have something to see on the screen while the web is loading. It’s better than a “network error” notification.
Cache Only
This strategy only checks data in the caching. It does not send requests to the server.
It applies to content that need not changing after it is saved into the cache the first time. For example, you may never have to change the PWA logo so it only needs to be saved into the cache once.
Network Only
This strategy only looks for & retrieves data from the network, it does not check any caches.
Unlike the cache-only strategy, the network-only strategy is ideal when content & files are frequently updated.
Cache And Network (for Apollo)
Besides the aforementioned strategies, it’s worth noting the cache-and-network strategy, which is widely used in the Apollo Client Library.
Apollo client implements queries against both your cache & your GraphQL server. After Apollo client retrieves query results from the servers, it automatically updates those results in the local cache.
Thus, it enables a fast response while maintaining the data consistency between the cache & the server.
Conclusion
We have explored some best practices to use local storage with the server worker, how they work & their use cases.
With different types of content & needs, you can apply a suitable PWA local storage practice to improve your web app’s performance.
We hope that the article is helpful for you to improve your website.
Next step:
It’s an amazing blog post, and it is really helpful as well.