Page MenuHomePhabricator

MobileFrontend should adopt an app manifest
Closed, ResolvedPublic

Description

tdlr:

  • Add to head <link rel="manifest" href="/manifest.json">
  • Serve a manifest.json (either static file/generated via PHP)

Not to be confused with cache manifests
We should strive to make the Wikipedia mobile site a good example of a mobile web app.

The app manifest standard is currently in Chrome and soon Firefox:
http://www.w3.org/TR/appmanifest/

There's a good post here courtesy of Paul Kinlan:
https://developers.google.com/web/fundamentals/device-access/stickyness/web-app-manifest?hl=en

Benefits

  • We currently have a bunch of things in meta tags in the header for this purpose.
  • Chrome prompts users to install to home screen when the icon is present. This could be a good opportunity for Wikipedia mobile users to add a bookmark to their home screen and increase engagement.
    • We should explore if people do this and whether this leads to them using the site more often.
{
	"short_name": "Wikipedia",
	"name": "Wikipedia Mobile",
	"orientation": "portrait",
	"icons": [
	],
	"start_url": "/wiki/Main_Page",
	"display": "browser",
	"theme_color": "#252525"
}

In future we may want to explore changing the start url (the design team have been prototyping a feeds experiment [1] for example)
[1] http://feeds-a.meteor.com/

Event Timeline

Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson added subscribers: Aklapper, Jdlrobson.
Jdlrobson set Security to None.
Jdlrobson triaged this task as Low priority.Sep 4 2015, 5:34 PM
Jdlrobson moved this task from Backlog to Discussing on the MobileFrontend board.Nov 4 2015, 5:02 PM
Jdlrobson renamed this task from Adopt a web app manifest to drive more users to the site to MobileFrontend should adopt an app manifest.Jul 7 2016, 4:34 PM
Rudloff added a subscriber: Rudloff.

Hello,

I am interested in this feature so I would like to work on a patch.
Is someone already working on it?

Jdlrobson changed the task status from Open to Stalled.Nov 24 2016, 12:53 AM

Sorry @Rudloff only just sure this comment. Feel free to work on this!

Change 323652 had a related patch set uploaded (by Rudloff):
Add a webapp manifest

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

Reedy updated the task description. (Show Details)Nov 26 2016, 4:45 PM

Change 323654 had a related patch set uploaded (by Rudloff):
Add a webapp manifest

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

Sorry, I made a mistake and created a new change instead of updating the previous one.

Change 323652 abandoned by Rudloff:
Add a webapp manifest

Reason:
Duplicate of 323654

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

Change 323656 had a related patch set uploaded (by Reedy):
Add a webapp manifest

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

Change 323656 abandoned by Reedy:
Add a webapp manifest

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

Jdlrobson changed the task status from Stalled to Open.Dec 6 2016, 6:38 PM
Jdlrobson added subscribers: ovasileva, Nirzar.

Have moved this into sprint board in case @Nirzar or @ovasileva want to review.
This means users when saving the app on their homepage in Chrome will see an icon and description that we can configure.

Change 323654 merged by jenkins-bot:
Add a webapp manifest

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

Nirzar added a comment.Dec 6 2016, 6:48 PM

@Jdlrobson where is the app icon coming from? should i provide one with correct spacing around W?

The icon is the apple touch icon and for Wikipedia is defined here:
https://en.wikipedia.org/static/apple-touch/wikipedia.png

Nirzar added a comment.Dec 6 2016, 7:39 PM

@Jdlrobson can we update it? it's sooo old :P or maybe out of scope. i will create another task.

Yep please create a task!

Although I see a link to manifest, Chrome doesn't seem to be able to parse it. Here is a screenshot:

And the link: view-source:https://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page

Is it because the returned data is not encoded as JSON?

It is because the manifest is not on the same domain as the page (and the Access-Control-Allow-Origin HTTP header is not properly set).
I think the easiest way to fix this is to have a relative URL in the <link> tag.
I will submit a patch for this.

Change 325905 had a related patch set uploaded (by Rudloff):
Use relative URL to web app manifest

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

Change 325905 merged by jenkins-bot:
Use relative URL to web app manifest

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

FYI the api module uses cache control for 24hr period. Not sure if it's possible to invalidate that but it means we might not be able to sign off for 24hrs.
https://en.wikipedia.beta.wmflabs.org/w/api.php?action=webapp-manifest

It's been 24 hours. Link to the manifest is still the same:

<link rel="manifest" href="https://en.wikipedia.beta.wmflabs.org/w/api.php?action=webapp-manifest"/>

On close inspection we're still using getFullUrl() when we should be using getLocalUrl.
@Rudloff are you able to submit a patch?

Change 326185 had a related patch set uploaded (by Rudloff):
Use local URLs in web app manifest

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

Change 326185 merged by jenkins-bot:
Use local URLs in web app manifest

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

bmansurov closed this task as Resolved.Dec 12 2016, 3:55 PM
bmansurov claimed this task.

Thanks @Rudloff ! I hope to see some more patches from you. Thanks for the positive and productive interaction!

A follow up will be required - T153250 - @Rudloff not sure if you have time to look before me?