fune/mobile/android/android-components/components/feature/pwa

Android Components > Feature > Progressive Web Apps (PWA)

Feature implementation for Progressive Web Apps (PWA).

• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
• https://developer.mozilla.org/en-US/docs/Web/Manifest

Usage

Setting up the dependency

Use Gradle to download the library from maven.mozilla.org (Setup repository):

implementation "org.mozilla.components:feature-pwa:{latest-version}"

Adding feature to application

Creating basic homescreen shortcuts

WebAppUseCases includes a use case to pin websites to the homescreen. When called, the method will show a prompt to the user to let them drag a shortcut with the currently selected session onto their homescreen.

If you don't want to support full web apps and only want the shortcut functionality, set the supportWebApps parameter to false when creating WebAppUseCases. This causes all shortcuts to open a new tab in the browser.

Opening web apps

To open the pinned shortcut as a progressive web app, add mozilla.components.feature.pwa.PWA_LAUNCHER to your intent filter.

<intent-filter>
    <action android:name="mozilla.components.feature.pwa.VIEW_PWA" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:scheme="https" />
</intent-filter>

You must also process the intent with the WebAppIntentProcessor. This processor will create a new session with the webAppManifest and customTabConfig fields set.

The web app manifest will also be serialized onto the intent as a JSON string extra. It can be retrieved using the Intent.getWebAppManifest extension function.

Hiding the toolbar

WebAppHideToolbarFeature is used to hide the toolbar view when the user is visiting the website tied to the shortcut. Once they navigate away, the feature will show the toolbar again.

This functionality pairs well with the CustomTabsToolbarFeature, which can be used to show a custom tab toolbar instead of a regular toolbar.

Immersive mode, orientation settings, and recents entries.

WebAppActivityFeature will set activity-level settings corresponding to the web app.

The recents screen will show the icon and title of the web app.

The activity orientation will be restricted to match "orientation" in the web app manifest.

When "display": "fullscreen" is set in the web app manifest, the web app will be displayed in immersive mode.

Displaying controls without a toolbar

WebAppSiteControlsFeature will display a silent notification whenever a web app is open. This notification contains controls to interact with the web app, such as a refresh button and a shortcut to copy the URL.

Web content variables

WebAppContentFeature will set web content variables to the web apps. Since the "display" value in the web app manifest file has to be applied in the CSS media query, the feature will apply it.

Facts

This component emits the following Facts:

Action	Item	Extras	Description
CLICK	install_shortcut		The user installs a PWA shortcut.
CLICK	homescreen_icon_tap		The user tapped the PWA icon on the homescreen.

itemExtras

Key	Type	Value
timingNs	Long	The current system time when a foreground or background action is taken.

License

This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/