 Making your app work offline is one of the cornerstones of a good progressive web app. But not everything can be made to work offline, and letting your users know what they can and cannot do is important for a smooth user experience. As a simple example, while the landing page of your blog will surely be available offline, you probably won't have all your posts cached. Some blog posts on the landing page can be clicked, while others cannot. To convey this to the user, a simple trick is to fade out the links of articles that are not available. When the offline event is omitted, you can traverse all your links, check if they are in the cache by using the cache API, and set a style that fades the text out. Additionally, set pointer events to none so that they become unclickable. When the online event is omitted, remove the styles again and everything will be back to normal. And that's it! A simple trick with a couple lines of code to make your UI respond to changes in connectivity. Keep in mind, though, that an online event doesn't actually mean the user has connectivity. For example, they could be behind a captive portal at an airport, so li-fi is a thing. See you next time! Thanks for watching!