Extension:PWA

The PWA extension transforms any MediaWiki installation into a PWA (Progressive Web Application). Subsets of the wiki can be configured to run under different PWA configurations.

Progressive web applications allows a wiki to run in a standalone browser page on Android or iOS (or any OS for that matter) and integrate with the environment as if it were a full-fledged app rather than a browser tab.

Compared to native mobile apps, PWAs have the following advantages:
 * harness the full power of the web
 * fully reuse you mobile skin or responsive design as well as all of you wiki's functions and extensions (code once, deploy everywhere), allowing your wiki to be truly multi platform without the heavy development and maintenance costs of having dedicated web, android and iOS apps
 * allow you to entirely bypass the App Store or Google Play
 * update themselves just like any website rather than having to publish versions.

PWAs can access most of their platform's hardware (cameras, speakers, microphones, GPS) and can even work offline and show push notifications.

They are very reliable on most platforms except iOS as Apple is really lagging behind in term of feature implementation. This is best explained by the technology allowing developers to completely bypass the 30% publication fee they levy on the App Store and their whole vetoing process of apps.

Their main caveat is that their install logic differs from a native app. Basically speaking, users need to add them to their home screen to install them. On Android, this involves tapping a simple prompt. On iOS, the user needs to manually add a shortcut to their homescreen in Safari.

Live demo
For a live demo, head to https://wikimedi.ca (preferably on a mobile phone) and scroll to the bottom of the page to find the install buttons.

Deploying your PWA
The PWA extension does not work out of the box, it requires a few steps to inform browsers on how to best present your app to the world.

Browsers are informed of the existence of a PWA through the  tag in. The extension takes care of outputting that tag with the correct link.

For detailed information on how PWAs work behind the scene, see this page.

Step 0: requirements
Your MediaWiki installation needs to be served over HTTPS, else the PWA installation process will simply not work.

The MobileFrontend extension is strongly recommended and so is a mobile skin (such as Minerva or a responsive skin).

Step 1: configure
See the section for detailed explanations of each settings.

Configuring a single PWA
This PWA will be available on each page of your wiki.

Configuring multiple PWAs
The extension iterates over all PWA extensions in order and selects the first match for inclusion in the rendered page. Whenever an install button is clicked on that page, it's the currently available PWA that will be installed and none other.

Configuring a development PWA
Having a production and development version of your PWA is useful when you're experimenting with your manifest.json file or making changes to a service worker.

Step 2: create your manifest.json
Manifests tell the browser how your web content should be displayed by the OS. Where a manifest parameter is configured in  you must create a json file in your wiki. This is the simplest of manifest:

See this page on web.dev for a full list of the parameters. You can also check this wiki's main PWA manifest.

Your manifest can be debugged using DevTools in Chromium-based browsers or the Inspector tool in Firefox.

Some of the manifest's parameters will have side effects on the wiki:
 * : if different from the general main page (MediaWiki:mainpage), all links to the main page will be replaced with it's value (so that PWA apps can have their own main page).

Step 3: define a ServiceWorker
In order to be installable, a ServiceWorker must accompany your PWA. Define it in.

Step 4: make some icons
At the very least, PWAs need one 512 by 512 pixels icon. If you set the, it will be overridden the extension.

All icons are set in your manifest page.

Step 5: define your recent changes tags
To track which edit was made with the PWA in standalone mode and to (gather trafic stats), the extension defines a general recent changes tag named. It also defines one tag per PWA with the following syntax.

Labels and descriptions for those tags need to be defined in Special:Tags.

Step 6: have visitors install your PWA
For now, you have access to two install buttons:

Where  is the id you used in   to define each PWA. If you define install buttons for many PWAs, only those for the current PWA will work. Others will be disabled.

Depending on which button they click, the following will happen:
 * On Android and other browsers (including desktop Safari), the browser will prompt the user with a native dialog if they want to install the PWA and will do so upon request.
 * On iOS, a gif animation instructing the user on how to manually add the PWA to the home screen is shown (iOS chooses not to implement the prompt logic [because PWAs drive customers and developers away from the App Store]).

Customizing your PWAs further
The extension provide several facilities to customize your PWAs further:
 * : CSS that is included only from within your PWAs
 * : JS that is included only from within your PWAs
 * Service workers code (coming soon): code that will be run from withing your service worker.

Adding install buttons to skins
Here is an example on how you might add install buttons to various skins.

After you have initialized the extension in, add:

Integration on the App Store or Google Play
The main caveat of PWAs is that their install logic differs from a native app. PWAs need to be added to the home screen using the browser rather than installed from the App Store or Google Play. Google allows PWAs on Play as Trusted Web Activities (TWA) but with Apple products it's another story.

There have been reports of developers being able to package PWAs and push them on the App Store. However, most apps will likely fail to pass Apple's app requirements.