Page MenuHomePhabricator

Provide a prompt to 'view/read later' when trying to access articles while offline in the Android app
Closed, ResolvedPublic2 Estimated Story Points

Description

User story
As a user who uses the app's offline reading feature, I want to be able to mark articles to view later when I am back online.

Current experience

  • When the user is offline and taps on an article link, a link preview card opens with a loading spinner in place of the lead paragraph, a primary call to action to "Read article".
  • When directly selecting to open an article whilst offline, user is directed to a 'Cannot connect to the internet' error screen' with a 'retry' call to action.

Proposed solution
Link preview when offline

  • Show a message advising that the article cannot be read
  • Replace the 'Read article' call to action with an action allowing the user to 'Add to reading list' for downloading when the user is back
Offline
Link preview - offline.png (1×720 px, 469 KB)
vs Online
Link preview - online.png (1×720 px, 738 KB)

Notes: a related task has been filed to update the message shown when an article is viewed whilst offline – see T157361

Event Timeline

Change 343415 had a related patch set uploaded (by Mholloway):
[apps/android/wikipedia] Update link preview to support offline state

https://gerrit.wikimedia.org/r/343415

Change 343415 merged by jenkins-bot:
[apps/android/wikipedia] Update link preview to support offline state

https://gerrit.wikimedia.org/r/343415

@RHo o/ The link preview piece of this is merged and should appear in the next alpha build.

It looks like the other part is actually a subsection of T157361. That task looks like a good chunk of work, and hasn't made it to the kanban board yet. I'm not quite sure what to do with this task for bookkeeping purposes in the meantime. What was your intention for the relationship between these tasks to be?

Ping @Dbrant—what say you to the above? Does pulling T157361 into kanban seem appropriate? It looks ready for dev.

@Mholloway – I filed T157361 thinking that implementation work might be related (since both are about showing the offline message when a user tries to open an article/article preview without internet access).

I'll update the description to remove the reference since this task is actually ready for review, but cc @Dbrant – can we get T157361 on the kanban?

hi @Mholloway, just had a couple of visual design tweaks thanks:

Offline ink preview comparison.png (867×1 px, 256 KB)

  • Reduce the size of the no article icon to 64x64dp
  • Reduce space between no article icon and text by 8dp
  • Reduce font-size of the text to 16sp (with leading 24dp or 1.5)
  • Reduce left and right padding around text area to 16dp (there should be a line break between the first and second sentence)

A couple more items are more overall updates to the link preview card:

  • the font-size of the 'Add to reading list' action seems larger than the 14sp Roboto Medium expected for button text
  • Lighten the bottom sheet background color to use the Base90 color (#F8F9FA) rather than the current #F0F0F0 - ideally it would be good to apply across all bottom sheets. (I've mentioned this in T159333 as well)

Change 347076 had a related patch set uploaded (by Mholloway):
[apps/android/wikipedia@master] Link preview error view design updates

https://gerrit.wikimedia.org/r/347076

Change 347076 merged by jenkins-bot:
[apps/android/wikipedia@master] Link preview error view design updates

https://gerrit.wikimedia.org/r/347076

hi @Mholloway – weirdly the 'article not loaded' illustration is now showing slightly warped in the bottom right hand corner (looks like some vertices may have been deleted to cause sharp edges):

main-MainActivity-04172017164812.png (1×1 px, 85 KB)

A second issue is that the 'no internet' illustration is now showing instead on the link preview card:

main-MainActivity-04172017164735.png (1×1 px, 187 KB)

hi @Mholloway – weirdly the 'article not loaded' illustration is now showing slightly warped in the bottom right hand corner (looks like some vertices may have been deleted to cause sharp edges):

Well, dang. I noticed that myself during testing, but only on emulators, so I convinced myself it was somehow an artifact of emulation. :/ I couldn't reproduce it on a physical device. What device is that screenshot taken from?

A second issue is that the 'no internet' illustration is now showing instead on the link preview card:

Oh, that was my mistake. There were a lot of patches flying around this set of changes. Will fix momentarily.

Change 348471 had a related patch set uploaded (by Mholloway):
[apps/android/wikipedia@master] [Oops] Update link preview offline icon

https://gerrit.wikimedia.org/r/348471

sorry should have included - this is happening on the Nexus 5 (Android 6.0.1, Wiki version 2.5.192-alpha-2017-04-12).

However just checked and weirdly it is rendering correctly on my Pixel (Android 7.1.2, Wiki version 2.5.192-alpha-2017-04-12).

Change 348471 merged by jenkins-bot:
[apps/android/wikipedia@master] [Oops] Update link preview offline icon

https://gerrit.wikimedia.org/r/348471

@RHo As for the icon rendering issue, it's a platform-level bug that will require some investigation (and most likely trial and error) to work around. I've created a new task for it:

T163230: R.drawable.ic_no_article is rendered incorrectly on Lollipop and Marshmallow

ABorbaWMF subscribed.

Tested on the App Build 2.5.194-alpha-2017-04-19

The article and the preview card are both showing the correct image and messaging. I tried a few scenarios and everything appears to be working.