Optimizing the Offline Mode Experience
Progressive Web Apps (PWAs) enter Offline Mode when the viewing device is 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.
The core features of Offline Mode include:
- Notification upon going offline
- Previous content remains visible when offline
- New content is replaced with offline-specific content when offline
These features are enabled by default in the Project Scaffold. There is an additional core feature that is not enabled in the Project Scaffold by default:
- Loading while offline
For the best possible PWA experience, all of these features should be used and customized to suit your brand.
Notification upon going offline
The user should be notified when they lose network connectivity. Typically, the PWA will detect when the user has gone offline, and will notify the user by displaying a small banner under the header.
To customize this feature, you can modify the
OfflineBanner component. This is located in
Previous content remains visible when offline
When the user browses to a page they’ve previously visited, the page content should still be visible. 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.
Let’s walk through an example:
- The user starts on a fully-loaded product listing page.
- The product details page is loading. Content that was available on the product listing page, such as the image, name, and price are shown. Unavailable content is replaced with placeholders.
- The product details page has finished loading and now shows all content.
- The user goes back to the previous page and loses internet, so they enter into Offline Mode.
- The user returns to the same product details page. The page content is all shown immediately.
This can be achieved by storing your page data in your state management system and using that data to render your page. This way, it will still be available even when the network connection is interrupted. Beware that this technique stores a lot of data globally, which can negatively impact your app’s performance.
In some cases, you may want to hide or modify content for Offline Mode. For example, you may want to change the state of the add to cart button to disable it while the user is offline.
New content is replaced with offline-specific content when offline
When the user browses to a page that they have not previously visited, they are shown specific Offline Mode content in place of the actual content for the page. Typically, this will be a message reminding the user that they are offline.
There are also cases that won’t result in the Offline Mode content being shown. For example, if the user has previously gone to a product details page, the PWA now has the code for rendering this page template. If the user browses to another product details page (PDP) while offline, the PWA can display partial content for this page.
Let’s explore an example to demonstrate:
- The user starts on a fully-loaded product listing page.
- The user browses to a product details page. The PWA loads the script for rendering the product details page.
- The user returns to the product listing page and goes offline.
- The user browses to another product details page. The product details page renders, but only contains the content that was available on the product listing page.
To customize this feature, you can modify either the
Offline or the
OfflineBoundary component, which is located within
Loading while offline
If a user refreshes their page while offline, a subset of the page still loads and the request returns a 200 status code.
The subset of the page that loads while offline differs for each project, which is why there is no default implementation included in the Project Scaffold. Instead, we will show one possible example in this doc; we encourage you to build on this based on your project requirements.
This feature requires the service worker to be installed. The service worker can be used to cache resources so the page can load offline. For example, say we wanted to cache the bundle assets and homepage response for a server-side rendered PWA. We want to use the version from the network by default, but fall back to the version from the cache if needed. That might look something like this:
workbox.routing.registerRoute(/\//, new workbox.strategies.NetworkFirst());workbox.routing.registerRoute(/\/mobify\/bundle\//,new workbox.strategies.NetworkFirst());
For your project, you’ll likely want to explore additional caching strategies. For example, you can choose to cache product listing and product detail pages, but avoid caching cart or checkout pages, as you do not want to ever show stale content on those pages. For an overview of caching strategies, read the Offline Cookbox. To see which caching strategies are available in Workbox, please read the Workbox Strategies documentation.
Testing offline mode
On a mobile device, you can simulate an interrupted connection by toggling airplane mode.
In Chrome DevTools, use the throttling options under the Network tab.
While the device is connected to the internet, browse to a product listing page.
After the page fully loads, switch the device offline. There should be a banner that says “Currently browsing in offline mode” or similar.
- Navigate to another page within the PWA by clicking on a product. There should be a custom offline splash screen stating the site is offline and needs to go online to retrieve more data.
- Navigate back to the previously-viewed product listing page. Navigating to previously-viewed pages should show them in a cached state (the same state as when online, plus the offline banner).
Analytics while offline
With Analytics Integrations, all analytics events will be queued when the user goes offline.
- For each pageview that shows cached content, Engagement Engine will send a pageview event with
- For each pageview that shows the offline splash screen, Engagement Engine will send a pageview event with
- There will also be an
"action": "offlineModeUsed"event that summarizes the number of successful offline pageviews
"page_success"and failed offline pageviews
Q: Which Offline Mode features require service worker?
A: The “Loading while offline” feature requires the service worker to be installed. The other features do not require the service worker.
Q: Does this work on iOS?
A: Yes, the “Notification upon going offline”, “Previous content remains visible when offline”, and “New content is replaced with offline-specific content when offline” features all work on iOS. The “Loading while offline” feature is possible for iOS versions which support the service worker API. The service worker API is supported on iOS 11.1, but contains a bug that limits its functionality. We recommend using a service worker on iOS versions 11.4.1 and above.