How to query PWA offline state to inform user

Question

I try to make a angular 8 PWA app. So far so good, The cache is working in offline mode both for static resources and APIs.

But I'd like to inform the user about the offline state and let them know that the information displayed (API) is not necessarily up to date.

I tried to find a guide or doc about querying the service worker from angular, but found nothing. What is the best way - if any - to know if the service worker uses cache?

Thx.

score 0 · Answer 1 · answered Sep 28 '19 at 17:36

Browser generates events 'offline' and 'online' depending on the network connectivity, you could listen on this event to inform the user:

window.addEventListener('online', hideOfflineIndicator); 
window.addEventListener('offline', showOfflineIndicator);

function showOfflineIndicator() {
    // Your code to inform the user they are offline.
}

function hideOfflineIndicator() {
    // Your code to inform the user they are back online.
}

This has good browser support

More information on these events can be found here

How to query PWA offline state to inform user

1 Answers1