Meta: Progressive Web Apps (PWA)

[pocmo]

Description

Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps.

Resources

• https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive
• https://developer.mozilla.org/en-US/docs/Web/Manifest
• https://www.goodbarber.com/blog/progressive-web-apps-feature-compatibility-based-on-the-browser-a883/

Target

• [Meta] PWA support [1] fenix#223

User Stories

PWA MVP (Must)

• Install a PWA to my home screen fenix#778 - As a user I want to install a PWA to my home screen
• Know when a site is available as a PWA fenix#768 - As a user I want to install a PWA-able website with just one click (badging)
• Use PWAs while offline fenix#769 - As a user I want to use my installed PWAs while being offline
• Open installed PWAs in fullscreen / standalone mode fenix#770 - As a user I want to use my installed PWAs in fullscreen / standalone mode
• Refresh the currently displayed page in a PWA fenix#779 - As a user I want to be able to refresh the currently displayed page in a PWA
• Visual feedback when a PWA is starting fenix#781 - As a user I want to get visual feedback that a PWA is starting
• External URLs in a PWA to open in a custom tab fenix#777 - As a user I want external URLs in a PWA to open in a custom tab.
• Integrate Web Notifications Feature fenix#6440 - As a user I want to receive web notifications from a PWA site.

Maybe

• Share from my installed PWA to other installed (native) apps fenix#780 - As a user I want to share from my installed PWA to other installed (native) apps

After Fenix MVP

• As a user I want Progressive Web Apps installed from the Google Play store to use my default browser fenix#775 - As a user I want Progressive Web Apps installed from the Google Play store to use my default browser
• Web Push Notifications  fenix#771 - As a user I want to receive web push notifications for installed PWAs

Tasks

Needed

• Update WebAppManifest in Session from engine delegate #1828 - Expose Web App Manifest in Session
• PWA: Support display modes #1830 - Support display modes
• Componentize locale code #824 - Pull to refresh
• To be filled: Support orientation (manifest)
• PWA: Open custom tab for links that leave scope #2293: Opening external links in custom tab.
• Support Trusted Web Activity fenix#394: Add Trusted Web Activity (TWA) support

Nice-to-have

• PWA: Support splash screen #2294: Splash screen (App launching screen)

Later

• Add support for Web Share API #3486: WebShare API
• To be filed: Web Push

Dependencies

• Bug 1522451 - GeckoView: Web app manifest (PWAs)
• Bug 1522446 - GeckoView: Pull to refresh
  • Meta: Pull To Refresh #1824 - Meta: Pull To Refresh

┆Issue is synchronized with this Jira Task

[st3fan]

@pocmo WebAPK was left out of the MVP but we need to understand if that is actually a requirement for implementint PWAs. Also on whjat Android version that is supported.

[bbinto]

We might have to split this meta into 2 meta's so it's not spanning over 2 milestones and can be better tracked.

[shorlander]

@st3fan What kind of UX Feedback is needed here?

[pocmo]

@shorlander I can think of at least:

• How do we want to surface that a website is "installable" as PWA? In other browsers I see two major ways: Showing a badge in the URL bar (which Fennec does for a lot of other things too) and/or showing a bottom sheet or snackbar (sometimes with some heuristics that it doesn't show up all the time).

• When adding the app to the home screen: What UI do we present the user? Other browsers at least show a confirmation dialog; often with the ability to edit the "title" that will be used on the home screen.

[andreasbovens]

@pocmo @shorlander

Showing a badge in the URL bar (which Fennec does for a lot of other things too)

I strongly suggest we go for the badge approach. It's less intrusive than a snackbar, which other browsers are aiming to move away from (in favor of badging).

confirmation dialog

I think we should also show one, so as to better indicate what exactly is going on to the end user. An editable title is a possible nice-to-have, but not a must.

[andreasbovens]

@pocmo

In Fennec-powered PWAs, we open external URLs in a Custom Tab, using the PWA's theme color. This is also something we should have in Fenix (and we probably want to create a user story around it).

[andreasbovens]

@pocmo @shorlander

@st3fan What kind of UX Feedback is needed here?

We need to decide what the PWA's generated splash screen should look like as well. Typically, these are generated from assets referenced in the manifest. We need to decide how we want to arrange and animate these splash screens.

[andreasbovens]

@pocmo @bbinto

Small sidetrack: we need to decide what we want to do with sites that don't have a valid manifest (and are normal sites or broken PWAs). In Fennec, we have an "Add shortcut" option for that reason, which simply generates an icon and title from the site's metadata and places a URL shortcut on the home screen. When launched, the URL in question is just opened in a new tab. Is this something we're planning as well?

[pocmo]

In Fennec-powered PWAs, we open external URLs in a Custom Tab

@andreasbovens External URLs in this case are links that leave the scope defined in the manifest, right?

[lime124]

removing reference browser issues from UX feedback board. please ping stefan if you need support from a ux team member.

[pocmo]

@lime124 This is not reference browser :)

[liuche]

@pocmo adding a bit more context here, from meeting with the TWA folks at googlio.

To summarize, the things that they said we'd need to implement are:

• Custom Tabs API ✅
• Digital Asset Link Verification to ensure the website and the app come from the same developer. ("The actual logic here should be pretty easy to copy from Chromium", and we can get guidance if we need it)
• Hiding the browser chrome if the Digital Asset Link Verification succeeds.
• Ensuring that it comes back if the user navigates away from the origin they are verified with.

At this point you've got a basic, passable TWA implementation.

• Notification Delegation, so that push notifications from the website are handed to the app to display.
• Notification Delegation Auto-Enrolment, so that the website gets notifications enabled if the app is installed.
• Splashscreens (more of an optional feature, was apparently painful to implement)

Additional privacy/user data control features:

• The "Running in Chrome/Firefox" infobar that is shown on first run to alert the users that what they do in the app is seen by Chrome.
• When the user uninstalls the TWA (or clears data for it through Android settings), we display a dialog saying "This app also had data in Chrome, would you like to clear this too?"

Misc: some TODOs for updating documentation in TWA Chromium code.

[vesta0]

Thanks for summarizing @liuche !

@pocmo can we breakdown the GV requirements to accomplish the above?

[pocmo]

@vesta0 Filed this as a separate issue for now - feel free to drop it into the sprint if you think we should do that asap: #3061

[vesta0]

Thank you @pocmo ! FYI PWA/TWA work are next high priority AFTER all MVP P1s are completed :)

[vesta0]

The PWA feature has been completed, thanks to amazing hard work by several cross-functional teams 🎉 🎉 🎉

The only 2 remaining non-urgent items (Web Push and Splash Screen) will be addressed separately as we continue to enhance PWA experience in the future.