While users are on the move, their mobile devices are always close at hand, consuming content to stay informed and entertained. While most forms of transportation can present flaky connections or no connection at all, Marfeel PWAs (Progressive WebApp) are built with offline features so users can keep consuming and interacting with a publisher's content.
For publishers, this type of offline access contributes to brand loyalty, keeping power users engaging with and discovering content while delivering UX and performance benefits. It also increases readership by attracting users from competitors who don't offer the same features.
These offline features are built into Marfeel PWAs with UX best practices that prioritize the reader and support the following two different situations:
- Flaky connections
This feature is available to users running the Chrome and Firefox browser for sites that are HTTPS compliant. For more information regarding why HTTPS is necessary for emerging technology and why all publishers should make the switch, see this article.
These features will also be available in the Edge browser v17 and to iOS users running the Safari browser for a site under HTTPS when iOS 11.3 is released.
Flaky connections refer to situations where users experience an unplanned or unexpected loss of connection for a small period of time that can range from a few seconds to a few minutes. Typical examples may include losses of coverage while in subway transit, travelling in areas with spotty connections, or bad handovers between cell towers from dead zones in network tessellation.
In these situations, users can keep reading pre-cached content on a publisher's PWA while temporarily offline.
How it works
Offline access with Marfeel PWAs in flaky connections is possible because Marfeel pre-fetches and caches articles and sections as the reader navigates. From a UX perspective, the section and articles maintain and promote the smooth scrolling and swiping behavior that Marfeel delivers.
Marfeel renders as late as possible but pre-fetches as soon as possible. Content being available while the user temporarily loses connection is one consequence of this technique. The other is that when a user clicks on the article, it's already downloaded and ready for consumption, removing any kind of delay and maximizing speed perception.
When a user temporarily goes offline, they are informed that they have lost connection, but can still keep reading content with the following UI element.
When a user has previewed all the content that was pre-cached and available to them, the following message is displayed, prompting the reader to try and reload content if they've come online again. This might happen when they try to access a section that wasn't pre-cached.
In situations where users are completely offline, Marfeel PWAs provide the option to download sections to be read when they are offline. Most of the time, these offline circumstances are planned such as long trips on high-speed trains and planes, or vacations in locales with no coverage.
Users normally know that they will not have connection in these scenarios beforehand, and can anticipate and download desired content to be consumed when online access is lost.
How it works
When users access the lateral menu, they have the option to download all the articles within one of the displayed sections.
Clicking the download icon will download all articles within that section and can be viewed when the user is offline. When the content has been downloaded, the date the action was taken is displayed.
The content is stored in the browser's cache and is available for 7 days.
After 60 minutes have elapsed, the download icon reappears when the user accesses the lateral menu, providing the reader with the ability to download content again in case any updates have been made to the section or the articles available.
Why all contents aren't downloaded by default
Marfeel doesn't automatically download all content by default and implement the full offline mode for all situations without a voluntary action by the user for a couple of reasons: Firstly, it's to not unnecessarily consume a user's data plan minutes, and secondly, to save disk space on their device.
Monetization and analytics
Monetization is currently not available with offline features. As only Marfeel content is cached, mobile ads are not displayed when the user is offline.
In addition, images that are not pre-loaded and video content are not viewable if the user is not connected.
For engagement metrics, offline access is tracked for Google Analytics and sent to the corresponding UA account when a connection is restored.