Page MenuHomePhabricator

[Bug] Gallery images not cached after gallery is dismissed
Closed, DuplicatePublic

Description

Steps to Reproduce

  1. https://en.m.wikipedia.org/wiki/Barack_Obama
  2. Tap the lead image
  3. View the subsequent three images in the carousel
  4. Go offline
  5. Press the back button four times
  6. Press the forward button four times

Expected Results

  • All previously viewed images are available when offline

Actual Results

  • Images are unavailable after the gallery is dismissed and the loader spinner shows forever even after the network request fails

Environments Observed

Browser Version

  • Chromium v66.0.3359.181

OS Version

  • Ubuntu 18.04 64b

Device Model

  • Desktop

Device Language

  • English

Event Timeline

This is not a bug but rather a product decision. We haven't added any offline support to the app. Given that the image is sourced via the api we would have to cache our api locally for this to work. I'm not convinced of the benefits here of providing offline support in a session and the trade offs with maintaining a cache - cache invalidation is rarely troublesome.

Im guessing there is an xhr request made to the api in offline mode that never resolves?

The request that fails is the MW API request to get extra image info:

https://en.m.wikipedia.org/w/api.php?action=query&format=json&prop=imageinfo&titles=File%3APresident_Barack_Obama%2Ejpg&formatversion=2&iiprop=url%7Cextmetadata&iiurlwidth=640&iiurlheight=1024

{
  "batchcomplete": true,
  "query": {
    "normalized": [
      {
        "fromencoded": false,
        "from": "File:President_Barack_Obama.jpg",
        "to": "File:President Barack Obama.jpg"
      }
    ],
    "pages": [
      {
        "ns": 6,
        "title": "File:President Barack Obama.jpg",
        "missing": true,
        "known": true,
        "imagerepository": "shared",
        "imageinfo": [
          {
            "thumburl": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/President_Barack_Obama.jpg/640px-President_Barack_Obama.jpg",
            "thumbwidth": 640,
            "thumbheight": 799,
            "url": "https://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg",
            "descriptionurl": "https://commons.wikimedia.org/wiki/File:President_Barack_Obama.jpg",
            "descriptionshorturl": "https://commons.wikimedia.org/w/index.php?curid=23956389",
            "extmetadata": {
              "DateTime": {
                "value": "2013-01-18 13:17:38",
                "source": "mediawiki-metadata",
                "hidden": ""
              },
              "ObjectName": {
                "value": "President Barack Obama",
                "source": "mediawiki-metadata",
                "hidden": ""
              },
              "CommonsMetadataExtension": {
                "value": 1.2,
                "source": "extension",
                "hidden": ""
              },
              "Categories": {
                "value": "6 December|Barack Obama in December 2012|Barack Obama in the Oval Office|Crossed arms (left over right)|December 2012 United States photographs|December 2012 in Washington, D.C.|Executive Office of the President files|Featured pictures on Wikipedia, Arabic|Featured pictures on Wikipedia, Persian|Images with extracted images|Men wearing blue neckties|Official portraits of Barack Obama|Photographs by Pete Souza|Photographs from the White House during the Obama administration|Photographs of politicians with the national flag of the United States in background|Portrait photographs of men smiling|Resolute desk|Standing men|Taken with Canon EOS 5D Mark III|White House in 2012",
                "source": "commons-categories",
                "hidden": ""
              },
              "Assessments": {
                "value": "",
                "source": "commons-categories",
                "hidden": ""
              },
              "ImageDescription": {
                "value": "<a href=\"//commons.wikimedia.org/wiki/President_of_the_United_States\" title=\"President of the United States\">U.S. President</a> <a href=\"//commons.wikimedia.org/wiki/Barack_Obama\" title=\"Barack Obama\">Barack Obama</a>'s official photograph in the <a href=\"https://en.wikipedia.org/wiki/Oval_Office\" class=\"extiw\" title=\"w:Oval Office\">Oval Office</a> on 6 December 2012.",
                "source": "commons-desc-page"
              },
              "DateTimeOriginal": {
                "value": "2012-12-06 15:46:01",
                "source": "commons-desc-page"
              },
              "Credit": {
                "value": "<a rel=\"nofollow\" class=\"external text\" href=\"https://www.flickr.com/photos/whitehouse/8390033709/\">P120612PS-0463</a> (<a rel=\"nofollow\" class=\"external text\" href=\"http://farm9.staticflickr.com/8369/8390033709_fd364647a4_o.jpg\">direct link</a>)",
                "source": "commons-desc-page",
                "hidden": ""
              },
              "Artist": {
                "value": "Official White House Photo by <a href=\"https://en.wikipedia.org/wiki/Pete_Souza\" class=\"extiw\" title=\"w:Pete Souza\">Pete Souza</a>",
                "source": "commons-desc-page"
              },
              "LicenseShortName": {
                "value": "Public domain",
                "source": "commons-desc-page",
                "hidden": ""
              },
              "UsageTerms": {
                "value": "Public domain",
                "source": "commons-desc-page",
                "hidden": ""
              },
              "AttributionRequired": {
                "value": "false",
                "source": "commons-desc-page",
                "hidden": ""
              },
              "Copyrighted": {
                "value": "False",
                "source": "commons-desc-page",
                "hidden": ""
              },
              "Restrictions": {
                "value": "",
                "source": "commons-desc-page",
                "hidden": ""
              },
              "License": {
                "value": "pd",
                "source": "commons-templates",
                "hidden": ""
              }
            }
          }
        ]
      }
    ]
  }
}

The gallery already knows the images that need to be shown and the images themselves are in the cache. We just need to show them immediately instead of blocking on the spinner for metadata.

The request that fails is the MW API request to get extra image info

Which is needed to display the image. We'd need to also cache these requests if we want this to work offline.

Ugh, I see. What do you think about adding these URLs as data in the server render and we can pass them to the gallery instead of issuing separate requests for each image viewed on the client?

Change 439629 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Error handle the image overlay

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

Ugh, I see. What do you think about adding these URLs as data in the server render

These are pretty bulky and would add a lot of bloat to the serverside request. Even if we did we'd not be able to cache all the meta data for images for offline usage, we'd still need internet to retrieve the image to show in the overlay (which we request at a higher resolution).

Personally I would recommend adding better error handling in the image overlay (e.g. show offline image for this case rather than a spinner that never finishes spinning - https://gerrit.wikimedia.org/r/439629 ). We're not an offline webapp right now and I don't think there is a big expectation for this to work. If we want better offline support, I'd suggest that would be worthy of an entire project where we take an offline-first approach. Doing anything now would be premature.

Related discussion on forever spinner in T193172.

Vvjjkkii renamed this task from [Bug] Gallery images not cached after gallery is dismissed to k9aaaaaaaa.Jul 1 2018, 1:04 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from k9aaaaaaaa to [Bug] Gallery images not cached after gallery is dismissed.Jul 2 2018, 9:41 AM
CommunityTechBot closed this task as a duplicate.
CommunityTechBot lowered the priority of this task from High to Medium.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.

Change 439629 abandoned by Jdlrobson:
Error handle the image overlay

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