Page MenuHomePhabricator

Offline mode
Closed, ResolvedPublic

Description

Background

A partner site could provide access to their content even when a reader is offline. How might we show Wikipedia Preview in an offline scenario

Request

Create messaging to show user that they cannot view a Preview because they are offline

Design Details

Note: Below designs are only for the mobile portrait & landscape view.

Basic preview offlineOffline inside media viewer
Basic preview offline landscapeOffline inside media viewer landscape
zeplin

https://app.zeplin.io/project/5edf645eef92dfb2dc2f8ce8/dashboard?seid=5f2057a7f682417fdf53e8a2

  • The offline state shows up when the user's device is not connected to the internet.
  • Tapping on Try Again will show the loading state and if still no connection available then control comes back to offline state.
  • Users can close the preview by tapping on a close icon or area outside.
  • Present media viewer error state if a user loses internet connection while viewing the image. Refresh CTA will show media viewer loading state(bouncing dots) and if still no connection available then control comes back to offline state.

Note: There are some other offline strategies that can allow users to read the preview in offline mode. For the scope of this ticket, we will consider displaying the offline state UI, however, showing preview offline would be a mutual discussion with interested partners.

Event Timeline

AMuigai created this task.Jun 24 2020, 7:46 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 24 2020, 7:46 PM
AMuigai triaged this task as Medium priority.Jul 20 2020, 12:52 PM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
SGautam_WMF moved this task from Backlog to Design doing on the Inuka-Team (Kanban) board.
SGautam_WMF removed SGautam_WMF as the assignee of this task.Jul 28 2020, 4:53 PM
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF removed a project: Design.
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF added a subscriber: SGautam_WMF.

I'd recommend displaying the footer portion that links to Wikipedia regardless of whether a preview can be shown.

This way the preview will not stand in the way of Wikipedia.org itself natively working offline for the end-user. For example, users can bookmark pages offline in Safari or Chrome, and if they have our Wikipedia app that app might have related information available. There are also third-party Wikipedia apps like Kiwix which even have complete snapshots of the entire Wikipedia database available offline.

SGautam_WMF updated the task description. (Show Details)Jul 28 2020, 5:41 PM
SGautam_WMF updated the task description. (Show Details)Jul 29 2020, 7:23 AM
SBisson added a subscriber: SBisson.

Moving out of the kanban since this is planned for September.

@SGautam_WMF could you update the layout here based on the changes to the wordmarks (T260408)?

@SGautam_WMF @AMuigai could you please consider @Krinkle's comment above about keeping the Wikipedia CTA in case the user has access to Wikipedia content offline on their device? I don't know how likely this is for our target audience but it's worth thinking about.

Thanks @Krinkle for sharing your thoughts on this. We would certainly consider this when we decide the overall offline strategy for Wikipedia preview. Ideally, we would like to provide an unbreakable experience while the user is offline, however, we still need to collect some more information about our targeted audience and partner's preference on this.

@SBisson I will update the ticket with new mock-ups.

SGautam_WMF updated the task description. (Show Details)
SGautam_WMF moved this task from Backlog to Design doing on the Inuka-Team (Kanban) board.
SGautam_WMF removed SGautam_WMF as the assignee of this task.Sep 22 2020, 1:49 PM
eamedina claimed this task.Sep 22 2020, 6:03 PM
eamedina moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Sep 28 2020, 7:40 PM
eamedina moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Oct 5 2020, 12:24 AM
hueitan moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Oct 6 2020, 2:23 PM

Discussion on-going on PR thread, we are testing cache behaviors on different browsers

AMuigai closed this task as Resolved.Nov 3 2020, 2:47 PM