[GOAL] Make desktop and mobile site installable on web browsers as progressive web app (PWA) (add to home screen, web app install prompt)
Open, MediumPublicGoal
Actions

Assigned To

None

Authored By

	Jdlrobson
	May 10 2021, 10:47 PM

Description

The webappmanifest API was added a while back to MobileFrontend to allow installation on mobile devices.

Recently Chrome allows installation of apps on desktop and it's clear from the direction of other browsers that this is becoming less of a mobile-web concept and more of a web concept.

From a marketing perspective, as well as product perspective (potential source of new page views) it is desirable to make the new Vector installable for when the new Modern Vector skin rolls out to all wikis.

Goals

I should be able to install the Wikipedia website in browsers which support web app installations.

Technical goals

Web app manifest

The required checklist items for the manifest section should be ticked for mobile
The manifest file should be referenced for all skins including the desktop site
The API should be moved out of MobileFrontend into a more appropriate place. MediaWiki core is proposed given this is useful for all skins.
The manifest API should allow customization per skin. It should accept a "skin" parameter.
Skins should be able to customize certain values in the manifest using the hooks system. A hook onWebAppManifestGeneration( Skin $skin ) might be appropriate here.
The API response should be highly cached. Suggested: 1 week age to allow for updates via the train.

Service worker

We will likely need to add a minimal service worker to meet the criteria for Chrome web apps. To begin with our service worker might cache static assets such as the logo.

Details

	Subject	Repo	Branch	Lines +/-
	Add basic Webapp Manifest API support	mediawiki/core	master	+190 -0

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open	Goal	None	T282500 [GOAL] Make desktop and mobile site installable on web browsers as progressive web app (PWA) (add to home screen, web app install prompt)
		Declined		None	T237855 Adding home screen shortcut to Wikipedia on mobile phones adds link to main page instead

Event Timeline

Jdlrobson created this task.May 10 2021, 10:47 PM

Restricted Application added a project: Performance-Team. · View Herald TranscriptMay 10 2021, 10:47 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Kanbanana-FY-2020-21).May 10 2021, 10:47 PM

Jdlrobson updated the task description. (Show Details)

Izno subscribed.May 11 2021, 12:05 AM

Mainframe98 subscribed.May 11 2021, 9:30 AM

MSantos moved this task from Needs triage to Epics on the Product-Infrastructure-Team-Backlog-Deprecated board.May 11 2021, 10:56 AM

ovasileva added a project: Desktop Improvements (Vector 2022).May 11 2021, 1:51 PM

ovasileva moved this task from Incoming to Epics/Goals on the Web-Team-Backlog board.May 11 2021, 5:02 PM

Peter subscribed.May 17 2021, 6:08 PM

• dpifke moved this task from Inbox, needs triage to Radar on the Performance-Team board.May 17 2021, 6:36 PM

• dpifke edited projects, added Performance-Team (Radar); removed Performance-Team.

Volker_E subscribed.May 17 2021, 6:42 PM

could it be a duplicate of T218249 or vice versa?

Jdlrobson renamed this task from [GOAL] Make desktop and mobile site installable on web browsers as progressive web app to [GOAL] Make desktop and mobile site installable on web browsers as progressive web app (add to home screen, web app install prompt).Jun 1 2021, 10:16 PM

Jdlrobson merged a task: T218249: MediaWiki could allow you to "add to home screen" (web app install prompt).

Jdlrobson added subscribers: dbarratt, Berot3, Heddy10 and 4 others.

Jdlrobson added a project: MediaWiki-General.Jun 1 2021, 10:19 PM

dbarratt unsubscribed.Jun 1 2021, 11:05 PM

Jdlrobson triaged this task as Medium priority.Jun 2 2021, 6:06 PM

Jdlrobson merged a task: T283436: Ability to package wikis as PWAs through Vector.Jun 2 2021, 8:08 PM

Jdlrobson mentioned this in T283436: Ability to package wikis as PWAs through Vector.

Jdlrobson added subscribers: Frostly, RhinosF1.

Aklapper renamed this task from [GOAL] Make desktop and mobile site installable on web browsers as progressive web app (add to home screen, web app install prompt) to [GOAL] Make desktop and mobile site installable on web browsers as progressive web app (PWA) (add to home screen, web app install prompt).Jun 3 2021, 11:48 AM

Frostly awarded a token.Jun 3 2021, 6:05 PM

Frostly changed the subtype of this task from "Task" to "Goal".Jun 6 2021, 11:03 PM

Jdlrobson added a subtask: T237855: Adding home screen shortcut to Wikipedia on mobile phones adds link to main page instead.Jun 11 2021, 5:40 PM

Krinkle moved this task from Limbo to Watching on the Performance-Team (Radar) board.Jun 28 2021, 6:32 PM

Mainframe98 merged a task: T286177: Allow MediaWiki wikis to be installed as progressive web apps (PWAs).Jul 5 2021, 7:18 AM

Mainframe98 added a subscriber: Awesome_Aasim.

Awesome_Aasim awarded a token.Jul 5 2021, 11:41 PM

LGoto closed subtask T237855: Adding home screen shortcut to Wikipedia on mobile phones adds link to main page instead as Declined.Jul 13 2021, 9:55 PM

Krinkle removed a project: MediaWiki-ResourceLoader.Aug 28 2021, 1:02 AM

ovasileva moved this task from Incoming to For Iteration on the Desktop Improvements (Vector 2022) board.Aug 31 2021, 8:34 PM

• sdkim mentioned this in T293629: Web Manifest API.Oct 18 2021, 1:59 PM

Lectrician1 subscribed.Feb 9 2022, 2:41 AM

I really couldn't wait for that feature ;) The lack of a mobile app for an enterprise MediaWiki is a real drawback, so I took it upon myself to build Extension:PWA.

It also lets site admins define many PWAs per wiki installation (eg: one for finance, one for legal) and they in turn can have their own home pages, service workerks, designs, theme colors, etc.

Safari support is also built in. So are install buttons (but those would not be really meaningful on Wikipedia).

Nice! Thanks for building this! It's cool to have this feature usable without having to install MobileFrontend!
It's also interesting there is an option that you can edit the JSON locally on MediaWiki:default-manifest.json although it would be nice to also define that in LocalSettings.php

alistair3149 subscribed.Dec 7 2022, 6:46 AM

I think it makes sense to move the manifest API from MobileFrontend to core, it'll reduce maintenance and benefit other configurations.

As for fulfilling the installability requirements, the service worker does not need to do anything other than setting the event listeners. Here's the sw.js example I used in the Citizen skin, which is enough for the PWA install banner. The implementation is based on MobileFrontend, but I updated the icon getter and a few configs.

@alistair3149 would you be interested on working on this ticket to move the API to core with me reviewing your patches? I am going to be taking a break over Christmas, but would be happy to work with you towards that in January if you feel inclined.

In T282500#8471899, @Jdlrobson wrote:

@alistair3149 would you be interested on working on this ticket to move the API to core with me reviewing your patches? I am going to be taking a break over Christmas, but would be happy to work with you towards that in January if you feel inclined.

Glad to if I can be of any help!

Cool I'll circle back in January. Feel free to poke around at the code and Gerrit in the mean time :-)
Also off topic: it would be great if you could join us at https://www.mediawiki.org/wiki/Wikimedia_Hackathon_2023 to talk and build skins (scholarships are available if applicable!)!

Thank you for the invitation! I'll think about it but I'm unsure since I am not as active in WMF projects and it's pretty far.

Back to the main topic, is there any follow-up or useful information that came up with this patch (sorry for the necromancy)? I'm curious on the service worker feedbacks from Google and Mozilla as well, as caching (along with naming things) are not my strong suits :/

Not really any useful information but I personally wouldn't be comfortable with adding the service worker without input from the performance team and Krinkle. I'd suggest the initial focus should be on making the web app manifest usable in core so it works without MobileFrontend. Once we've got some momentum there I can check in with performance team about whether this is something they are interested in.

phuedx unsubscribed.Jan 4 2023, 10:11 AM

Change 881002 had a related patch set uploaded (by Alistair3149; author: Alistair3149):

[mediawiki/core@master] Add basic Webapp Manifest API support

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

gerritbot added a project: Patch-For-Review.Jan 17 2023, 8:06 PM

@alistair3149, thanks for the patch. Will there be a way to disable the default PWA behavior ?

Extension:PWA provides the capacity to define multiple PWAs per MediaWiki installation and will soon get offline browsing capacity. I understand that is not most people's use case for a PWA, but offering a disable switch for those wanting to implement their own would be essential.

In T282500#8532625, @Tinss wrote:

@alistair3149, thanks for the patch. Will there be a way to disable the default PWA behavior ?

As I am not sure how it will be implemented at the end, so I don't have an answer for it.

The patch is largely a WIP at the moment as it hasn't fulfill all the requirements above yet, and it only defines the API used to generate the manifest, not how it is being implemented on pages.

The API can expand to allow other extensions or skins to modify its properties with a hook, but I don't know the security or performance implications behind it. As for offline browsing, that is related to service worker and I suppose it can be approached the same way.

@Jdlrobson I have some questions regarding the implementation: