Displaying "Network Offline" in an Angular and Ionic

One of the key features of a Progressive Web Application is the ability to run it completely offline. This means even if there is no network connectivity, your application should continue to run as completely as possible.​

Obviously, if your application needs to be online for some functions, those functions won’t work, and you’ll want to be able to degrade your functionality gracefully, and at least let the user know that some features will not be available. ​

In this short video, I will show you how to provide a visual indicator to let your users know that your Angular PWA is offline. To do that, I make use of a modest Ionic Framework component and a handy little npm package that will help do this in an Angular friendly way.