Add Progressive Web Apps to your Home screen in Firefox for Android

In 2010, the concept of “responsive web design” (RWD) started resonating in web development circles. Over time, it became a recommended best practice, which was strengthened by the emergence of a number of RWD-enhancing web technologies, such as responsive images, @supports, flexbox, grid, and so much more. Today, practically all websites are built with RWD principles at their core: truly a dramatic improvement over yesteryear’s desktop-focused web.

Over the last two years, a similar and complementary evolution has been happening: Progressive Web Apps (PWA), an umbrella term for a new set of standardized browser technologies that combine the low-friction nature of the web with the reliability and capabilities we typically associate with native apps, are gaining ground, with more and more top online services sharing their success stories, and with browser support increasing.

While the Chrome team has been spearheading the PWA effort, other browsers have been landing supporting implementations, and Mozilla has been heavily involved as well: Service Workers and Push, two of the technologies powering PWAs shipped last year in Firefox 44, and Mozillian Marcos Caceres has been heading up the Web App Manifest spec work.

So, continuing our commitment to making PWAs a top experience on mobile, we’re pleased to announce that Firefox 58 for Android will ship with Web App Manifest support, in the form of “Add to Home screen” functionality.

When a Firefox 58 user arrives on a website that is served over HTTPS and has a valid manifest, a subtle badge will appear in the address bar: when tapped, an “Add to Home screen” confirmation dialog will slide in, through which the web app can be added to the Android home screen. When launched from there, the web app will be shown in the configured view mode and orientation, and it will appear as a separate entry in the app switcher. Note that at present, beforeinstallprompt is not supported, but it might yet be added in a future release: we’re investigating how to proceed.

It’s also worth pointing out that there is now also a new “Add Page Shortcut” option in the Page section of the three-dot overflow menu, which allows users to place a simple shortcut to any URL on their home screen — super handy when you want to keep a quick link to a bus schedule, sports section, or other specific page right at your fingertips. When the shortcut icon is tapped, the web page in question is opened in the full browser UI, just like a bookmark.

Another neat feature is how external links are handled: when a user is browsing an installed progressive web app and taps an external link, the page in question is opened in a Custom Tab. This keeps the user secure as the URL and safety information are visible, speeds up page load time (a Custom Tab loads faster than the full browser), preserves the progressive web app’s color branding, and is in line with native app behavior.

In upcoming releases, we plan to add more support for other PWA-related APIs: our Background Sync implementation is well underway (currently targeting Firefox 59), and we’re quite excited about the Payment Request and Web Share APIs as well.

So, try out the “Add to Home screen” implementation in Firefox Nightly for Android. (Note: for the time being, you need to enable PWA support under Settings > Advanced > Experimental features.) Stay tuned for more goodies to come in future releases!

About Andreas Bovens

More articles by Andreas Bovens…


6 comments

  1. Deyan

    Is there a way to implement the custom tab view in my android app as the default webview? Is it using GeckoView?

    October 23rd, 2017 at 12:35

    Reply

    1. Andreas Bovens

      Android apps will use the Custom Tab implementation of whichever browser is set as the default. And yes, Firefox for Android’s Custom Tabs are powered by GeckoView.

      November 6th, 2017 at 07:37

      Reply

  2. Saijin_Naib

    Does this mean that the FFXOS Open WebApps that exist in the FirefoxOS Marketplace can be resurrected and used on Firefox Mobile for Android, and potentially other platforms?

    There were some really slick OWAs under FFXOS that I miss using on my devices, and I wouldn’t mind having them available if I want on my desktop either.

    October 26th, 2017 at 09:30

    Reply

    1. Andreas Bovens

      I guess some of those can be resurrected to become PWAs, indeed. It’s up to the original authors to do this though, so I recommend getting in touch with them.

      November 6th, 2017 at 07:39

      Reply

  3. Leon

    Currently, Chrome for Android also places the shortcut into the app drawer. Is there any plans for Firefox to do the same?

    November 1st, 2017 at 11:14

    Reply

    1. Andreas Bovens

      We’re still investigating this. For now, there are no plans to do the same.

      November 6th, 2017 at 07:40

      Reply

Post Your Comment