Support offline display of cached watchlist data if available.
**Technical requirements**
1. Watchlist data should be cached in a lightweight way (akin to widgets and talk pages with `SharedContainerCache`) to the filesystem
2. On any successful API fetch of the user's watchlist items in the main watchlist list view, replace the cache with this latest fetch. It's not necessary to do any comparison to find the diffs here – just replacing the watchlist cache on success is sufficient.
3. Ideally this work happens in the Data framework – the Components frameworks should not have knowledge about whether the data it is receiving is freshly fetched or cached content, or even about caching at all.
**Presentation details**
1. When the Watchlist list view is presented, perform fetch for user's currently watched article data
2. If the user is offline (API call fails), display cached data
3. If no cached data is available, display empty state
4. If the user is offline, let them perform any change diff taps as usual. We'll rely on those pushed views failing in response to no internet connection rather than disability user interaction based on Reachability.
**Previous description below:**
---
**Background**
The aim of this task is to enhance the offline functionality of the watchlist feature in the Wikipedia iOS app. This aims to provide a seamless user experience irrespective of internet connectivity, allowing users to interact with their watchlist and view cached articles. This involves ensuring a clear, intuitive interface that informs users about their connectivity status and the last data sync time.
**Task**
[ ] To create designs for the iOS Offline Mode behavior
[ ] To implement the designs into offline capabilities for the iOS Watchlist
**Requirements**
- To implement caching, develop a mechanism to store and retrieve the 7 most recently appearing items from the watchlist.
- To handle no cached items, display a generic error message indicating the unavailability of cached data.
- To ensure offline access, cache the latest viewed diff and display a persistent banner indicating the user is offline.
- To provide offline feedback, design a banner displaying "Not connected to the internet" and show the last sync status.
- To handle edge cases, display appropriate error messages for offline scenarios similar to Android.
- To allow offline navigation, show cached watchlist items, ensure non-scrollability, and display an offline banner.
- To disable offline interactions, make the watchlist cards unclickable when the user is offline.
- To prevent access to unavailable options, disable three-dot overflow menu actions when the user is offline.
- To disable offline access, gray out and disable the watch selection option in the overflow menu.
- To inform the user, display a generic error message indicating no internet connection when attempting to access the diff view offline.
- To support offline searching, implement a search functionality for cached items.
- To update the offline banner, change the message to "Data connection not allowed" and persistently display it.
- To determine screen visibility, consult with engineers during the iOS planning meeting and identify the portion displayable when offline.
- To assess real-time online/offline status, inquire during the iOS planning meeting about using technologies like jQuery for dynamic feedback.
- Rebecca and Jazmin to first sign off on this
**Current Android Watchlist offline mode behavior**
# When going to view an article
The button to add an article to the Android watchlist is still selectable when offline which is confusing to say the least because a user is unsure if an article has been added or not.
{F37142826}
# When offline, this error is displayed to users:
{F37142829}
**# Ideas for iOS Watchlist offline mode behavior**
**1. Pre-caching and caching:**
We should cache the 7 most recently appearing items from the watchlist. We should also cache watchlist items that have been recently opened.
If no items have been cached, then display generic error message
Latest viewed diff should be cached in case a user goes offline with banner that person is offline
**2. Banner:**
A banner displaying that the user is offline should be displayed to say “Not connected to the internet. It can also display last sync status?
**3. Default for any edge cases or unplanned/unexpected scenarios:**
When offline, an error should be displayed to users just like in android
**Scenario: User is offline on a different page and wants to navigate to the Watchlist**
Display cached watchlist items
Should be non scrollable past
Should display banner saying, “User is not connected to the internet”
The cards should be unclickable when they user is offline.
{F37142832}
The three dot overflow options should all be disabled. Therefore when offline users should never be able to go to the diff or any other page
All options should be grayed out and should be unclickable including:
- Userpage
- User talk page
- User contributions
- Thank
- Watchlist expiry
**Scenario 2 : user is offline looking at an article and goes to the overflow menu to select**
The watch selection should be grayed out an unclickable
{F37142834}
**4. Diff**
It should show a generic error message when the user is offline to tell the user that they are not connected to the internet similar to the Android Watchlist message:
{F37142826}
**5. Search**
Users should be able to search for cached items.
{F37142829}
**References**
- [[ https://meta.wikimedia.org/wiki/Wikimedia_user_groups#:~:text=groups%20in%20discussion-,What%20are%20Wikimedia%20user%20groups%3F,players%20in%20the%20Wikimedia%20movement. | Usergroups ]]
- [[ https://www.figma.com/file/YFtut34Eaq3vwS0lJQPbbE/iOS-Watchlist?node-id=35-1733&t=7ckQxTz5xiKJeAeI-4 | Figma ]]
- [[ https://docs.google.com/presentation/d/1GmPclh0FO1IdP2K15DDW1_gBnST9gyZiTtO3fi0r5pM/edit#slide=id.g2238869534f_0_174 | Shallowdive ]]
- [[ https://docs.google.com/presentation/d/1XnhtnsZxrVBgaV8byqR60Q6oGIDBdBuOI1_urGfhHPQ/edit#slide=id.g2238869534f_0_174 | Deepdive ]]