Offline Notice

By default, PWA introduces the Service Worker that gives us an ability to browse offline. And since we can work offline as well as online, it’s a good idea to let the user know when the app can’t reach the internet so that they don’t get frustrated when new data doesn’t show up after they refresh.

Once you are offline, a yellow sticky note will appear below the header of your store on both mobile and desktop.

Offline mode sticky notice

In the offline mode, we have removed the loading animation of placeholders. The user will the content that was loaded previously only.

Non-loading placeholders in the offline mode

In case of accessing the page that was not loaded previously, the "You are offline note" will appear in full-screen.

Offline page