Menu
Menu Sheet Overlay
Search
Search Sheet

      Detecting Offline Browsing

      Progressive Web Apps (PWA) enter Offline Mode when the viewing device is not connected to the internet. This feature improves the user experience by providing offline access to previously visited pages. When navigating to pages not previously visited, the user will be shown an error page reminding them that they are offline.

      Prerequisites

      Customizing offline components

      Offline Mode uses 3 components to inform the user that they are offline:

      • OfflineBanner, found in web/app/containers/offline/partials/offline-banner.jsx
      • OfflineModal, found in web/app/modals/offline/index.jsx
      • Offline, the page shown when the user navigates to a new page while offline. This component is found in web/app/containers/offline/container.jsx.

      By default, all of these components are styled to match Merlin’s Potions, our demo site. Update the styles and content of these components to match your brand.

      Testing

      On a mobile device, simulate an interrupted connection by toggling airplane mode.

      In Chrome Dev Tools, use the throttling options under the Network tab.

      1. While the device is connected to the internet, browse to a product listing page (PLP).

      2. After the page fully loads, switch the device offline. There should be a banner that says “Offline mode, this site may not work as expected” or similar.

        Screenshot of a product detail page with an offline mode banner displayed beneath the header

      3. Navigate to a whitelisted page (one you expect to work offline) by clicking on any other product listing page. There should be a custom offline splash screen stating the site is offline and needs to go online to retrieve more data.

        Screenshot of offline splash screen

      4. Navigate to a page that is not whitelisted. The default browser offline page is shown.

        Screenshot of the default Chrome offline page

      5. Navigate to a product detail page (PDP) from the PLP that you visited before. The PDP should show cached content:

        • Name, Short Description, Price, Stars.
        • Small image (same image as on product listing page)
        • Reviews and other content may be unavailable.
      6. Navigating to previously visited pages should show them in a cached state (the same state as when online).

      Analytics

      Pageview events are queued while the device is offline. After the device reconnects, the queued events are sent along with a summary of offline pageviews.

      • For each pageview that shows cached content, Engagement Engine will send a pageview event with status: offline_success
      • For each pageview that shows the offline splash screen, Engagement Engine will send a pageview event with "status": "offline_failure"
      • There will also be an "action": "offlineModeUsed" event that summarizes the number of successful offline pageviews "page_success" and failed offline pageviews "page_failed"

      FAQ

      Q: Which Offline Mode features require service worker? #

      A: In order to survive a page refresh and continue browsing offline, the service worker must be installed and supported by the user’s browser. Other Offline Mode features are able to work without the service worker.

      Q: Does this work on iOS? #

      A: Yes! However, due to lack of support for service workers on iOS browsers, cached pages will not persist after the user manually refreshes the browser.

      Q: What if the service worker loader is not yet installed? #

      A: Follow the steps for Developing without the Mobify Requirements

      IN THIS ARTICLE:

      Feedback

      Was this page helpful?