Note: The Designing App-Like Patterns series is intended for interaction designers. This series will show you how to use the Mobify Platform to design performant shopping experiences, with app-like user experience best practices.
Progressive Web Apps (PWAs) enter Offline Mode when the viewing device is either not connected to the Internet, or on low-quality networks. This feature improves the user experience when internet is limited: instead of seeing a disruptive 404 error page, users can continue to browse previously-visited pages. When the user tries to navigate to a page they have not previously visited, the user is shown an error page reminding them that they are offline.
In Offline Mode, the user can view previously-loaded content while offline, which means that shoppers can continue browsing for products, even if their network connection becomes limited. It is our job as designers to make the Offline Mode experience the best that it can be for users, especially since it is an unfamiliar feature. Designers should craft the UI elements that will help communicate this state to users, including banners and 'Retry Connection' buttons.
Immediately losing internet connection
If the user loses internet connection while browsing, the Mobify SDK’s Banner component will be displayed automatically to inform the user about Offline Mode. (For example, see the image above, on the left.) If the user taps on the information icon in the Offline Mode banner, a modal will pop up. The modal will explain what Offline Mode is and give the user two options: "Retry Connection" or "Continue Offline."
Navigating to a new page
If the user navigates to a new page while they’re in Offline Mode, a custom offline error screen will be shown. This screen will let the user know that the site is offline, and that they need to go online to view the page. Be sure to customize the content, styling, and colours of the error screen to be consistent with the PWA's brand.
Previously visited pages
If the user navigates to a page they had previously visited in Offline Mode, all content should be cached and shown immediately. There should be no missing information when browsing previously visited pages, even after the user enters Offline Mode. This is just like the regular PWA experience, except an Offline Mode banner will be shown at the top of the screen.
Navigating to a new page that uses the same page template
If the user navigates to a new page that uses the same page template as previously visited pages, the cached data from previously visited pages should populate into the template, and skeleton placeholders should be in place for all unavailable data.
A classic example of this is when a user browses to a product list page and one product details page, but loses internet connection. Imagine that the user then clicks on another product from the product list page. Instead of showing nothing, we can display information that is relevant from the product list page, and we can use skeleton placeholders in place of the remaining unavailable data.