PWA Support is Coming to Firefox for Android

PWA Support is Coming to Firefox for Android

Firefox 58 for Android will bring support for Progressive Web Apps (PWAs). Here’s an early look at how this will work. And how you can test it for yourself.

First, the how: PWA support is coming to Firefox 58 for Android, and that release is currently expected in January. But Mozilla makes a beta version of Firefox available in the Google Play Store. So if you want to test this functionality, you can. I’ve moved to using this version as my default browser for now, pending any issues.

In use, this appears to work much like it does in Chrome for Android: The first time browse to a website that is built as a PWA, Firefox 58 will prompt you about this new functionality. (I’m using Twitter Lite in this example.)

On subsequent visits to PWA sites, Firefox 58 will likewise prompt you, via an unmissable dialog, to pin the site to your home screen.

If you cancel this, you can always pin it later using a new Pin to home page button in the Firefox address box.

The pinned site works just like an app, as it does when you do this from Chrome. That is, it does not have any browser UX at all, and it appears as its own process/app in the app switcher.

There is one difference: Firefox adds a little Firefox badge to the PWA’s home screen icon, whereas Chrome currently does not.

In the second row: Firefox Beta, Twitter PWA pinned with Firefox, and Twitter PWA pinned with Chrome

I love that Firefox is doing this. And I hope to see this capability coming to Windows as well, though of course Microsoft will be adding this support to Microsoft Edge in the next Windows 10 version too. (With further support for Store discoverability.)

Anyway, this looks great so far.

Tagged with

Share post

Conversation 18 comments

  • JacobTheDev

    Premium Member
    01 December, 2017 - 11:57 am

    <p>Glad to see this, I've been working on integrating Progressive Web App functionality in to all the sites I build. It'll be awesome when everyone properly supports this (looking at you, Apple). </p><p><br></p><p>It's strange that Chrome doesn't add a little Chrome icon for you on PWA's, it does on my Pixel 2 XL.</p><p><br></p><p>EDIT: Oh, just tested it, it actually doesn't add a Chrome icon anymore. Maybe a recent update fixed that or something.</p>

  • skane2600

    01 December, 2017 - 12:00 pm

    <p>I don't see how PWAs improve the user experience. So you download an app from a website rather than an app store. Seems like six of one, half a dozen of the other.</p>

    • Pbike908

      01 December, 2017 - 12:14 pm

      <blockquote><a href="#223375"><em>In reply to skane2600:</em></a></blockquote><p> I may be mistaken, but I think the advantage of a PWA is that they are platform independent meaning if a the same PWA will work on both Android and IOS so long as the browser supports PWAs.</p>

      • MikeGalos

        01 December, 2017 - 12:18 pm

        <blockquote><a href="#223381"><em>In reply to Pbike908:</em></a></blockquote><p>Hence the problem. It's a least common denominator approach to coding. </p>

        • hrlngrv

          Premium Member
          01 December, 2017 - 4:10 pm

          <p><a href="#223385"><em>In reply to MikeGalos:</em></a></p><blockquote>. . . It's a least common denominator approach to coding.</blockquote><p>Granted, but that mattered more back in the days of watching the KBs.</p><p>Also doesn't matter much when the necessary data and processing are relatively simple. For example, https://www.currency-x.com. This appears to download a table of currencies and current values. The conversion calculations are trivial (one multiply, one divide). Hard to see how something like this would be greatly improved as a finely crafted piece of software customized for a specific phone OS.</p>

          • skane2600

            01 December, 2017 - 4:14 pm

            <blockquote><a href="#223455"><em>In reply to hrlngrv:</em></a></blockquote><p>In trivial cases, sure, but implementing trivial code on multiple platforms my actually be easier than implementing a single trivial PWA. </p>

            • jimchamplin

              Premium Member
              01 December, 2017 - 10:45 pm

              <blockquote><a href="#223458"><em>In reply to skane2600:</em></a></blockquote><p>In cases where the last ounce of performance – games, VR/MR, or CAD/CAM – a PWA wouldn't be the right option. A native app would.</p><p><br></p><p>The developers are smart enough to figure that out ?</p>

              • skane2600

                02 December, 2017 - 1:35 am

                <blockquote><a href="#223589"><em>In reply to jimchamplin:</em></a></blockquote><p>I get your point but in cases where the last ounce of performance is required developers wouldn't be targeting mobile devices at all. They'd be targeting high performance PCs or high-end consoles. </p><p><br></p><p>But my primary point is that the idea that these schemes are going to save development effort is an assumption, not a certainty. </p><p><br></p><p>We live in a era where the software development pendulum has swung in the direction of coupling together the design of multiple platforms into a single codebase. But despite the prevailing philosophy, the complexities and the dangers of such an approach remain an issue. </p><p><br></p><p>These issues are a matter of trade-offs but these days we seem to follow "best practices" that embrace one option while pretending the other doesn't exist.</p>

    • MikeGalos

      01 December, 2017 - 12:17 pm

      <blockquote><a href="#223375"><em>In reply to skane2600:</em></a></blockquote><p>Well, you do get less functionality than is possible in an app you download from the store since this is really just pinning a version of the base website to your desktop rather than exposing an application actually designed for your specific hardware. I say base website since most websites are data driven and depend on access to the service's databases which are not actually downloaded. (Imagine a Wikipedia application that installed all of the pages as an example of the nightmare that would be.)</p><p>For that matter, this is yet another feature that was originally in Internet Explorer years ago (HTML Applications back in Internet Explorer 5 in 1999) but which was ahead of its time.</p><p><br></p><p><br></p>

      • MikeGalos

        01 December, 2017 - 12:24 pm

        <blockquote><a href="#223384"><em>In reply to MikeGalos:</em></a></blockquote><p>For those who want to see a minimal HTML application (no script, just a web page as an application), copy the following example from the Wikipedia entry into notepad and save it as "Hello.hta" to your desktop. You can then execute it locally, </p><p><br></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">HTML</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">HEAD</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">HTA:APPLICATION</strong><span style="color: rgb(0, 0, 0); background-color: rgb(248, 249, 250);"> </span><span style="color: rgb(125, 144, 41); background-color: transparent;">ID</span><span style="color: rgb(102, 102, 102); background-color: transparent;">=</span><span style="color: rgb(186, 33, 33); background-color: transparent;">"HelloExample"</span><span style="color: rgb(0, 0, 0); background-color: rgb(248, 249, 250);"> </span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(248, 249, 250);">&nbsp;&nbsp; </span><span style="color: rgb(125, 144, 41); background-color: transparent;">BORDER</span><span style="color: rgb(102, 102, 102); background-color: transparent;">=</span><span style="color: rgb(186, 33, 33); background-color: transparent;">"thick"</span><span style="color: rgb(0, 0, 0); background-color: rgb(248, 249, 250);"> </span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(248, 249, 250);">&nbsp;&nbsp; </span><span style="color: rgb(125, 144, 41); background-color: transparent;">BORDERSTYLE</span><span style="color: rgb(102, 102, 102); background-color: transparent;">=</span><span style="color: rgb(186, 33, 33); background-color: transparent;">"complex"</span><span style="color: rgb(0, 0, 0); background-color: transparent;">/&gt;</span></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">TITLE</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span><span style="color: rgb(0, 0, 0); background-color: rgb(248, 249, 250);">HTA – Hello World</span><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;/</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">TITLE</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;/</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">HEAD</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">BODY</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">H2</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span><span style="color: rgb(0, 0, 0); background-color: rgb(248, 249, 250);">HTA – Hello World</span><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;/</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">H2</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;/</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">BODY</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span></p><p><span style="color: rgb(0, 0, 0); background-color: transparent;">&lt;/</span><strong style="color: rgb(0, 128, 0); background-color: transparent;">HTML</strong><span style="color: rgb(0, 0, 0); background-color: transparent;">&gt;</span></p><p><br></p>

      • skane2600

        01 December, 2017 - 12:40 pm

        <blockquote><a href="#223384"><em>In reply to MikeGalos:</em></a></blockquote><p>Yes, I should have said at best, it seems to offer no advantage. Funny, I actually got paid to write a HTML application about 6 years ago. I suppose it won't run if MS gets rid of IE someday, unless Edge supports them.</p>

        • Roger Ramjet

          01 December, 2017 - 2:15 pm

          <blockquote><a href="#223387"><em>In reply to skane2600:</em></a></blockquote><p>But isn't the point supposed to be on the creator side of things? Supposed to make it easier for developers to distribute their work if they do not have to maintain separate code for different platforms. If it does that, it just has to be 6 or six, to the user (or not more than slightly less) no need for anything more.</p>

          • skane2600

            01 December, 2017 - 3:47 pm

            <blockquote><a href="#223417"><em>In reply to Roger Ramjet:</em></a></blockquote><p>As Mike pointed out, it's least common denominator coding which leads to a non-optimal experience. Remember this siren song of WORA has been around since Pascal was invented but has never been truly achieved beyond CLI programs.</p>

        • hrlngrv

          Premium Member
          01 December, 2017 - 3:54 pm

          <p><a href="#223387"><em>In reply to skane2600:</em></a></p><p>Windows 10 has something named <strong>Microsoft (R) HTLM Application host</strong> (file mshta.exe) which runs the HTA. IE doesn't seem to.</p>

          • skane2600

            01 December, 2017 - 4:18 pm

            <blockquote><a href="#223445"><em>In reply to hrlngrv:</em></a></blockquote><p>You're right, but mshta.exe requires IE components to work. It's that whole "what is or is not IE" issue that was such a big deal during MS's antitrust problems. </p><p><br></p><p>It will be interesting to see if Windows on ARM includes components like mshta.exe that would be required for full Windows 32-bit compatibility.</p><p><br></p><p>HTML applications won't run on my Windows 8.1 phone even though it includes a version of IE, so obviously some traditional components of IE were not included.</p>

  • Bats

    01 December, 2017 - 12:51 pm

    <p>Lol….this is so strange that this is big news here. Lol.</p><p><br></p><p>Firefox has no choice, but to do this. They are so behind Chrome, that this is actually a no brainer.</p>

  • mccoll

    Premium Member
    03 December, 2017 - 3:39 am

    <p>My Nexus 5X with 8.0 does show a Chrome badge for PWA's on the home screen for some sites. It doesn't for Twitter Light so there might be something in the manifest.json. Time to investigate.</p>

    • mccoll

      Premium Member
      18 December, 2017 - 10:39 pm

      <blockquote><a href="#223851"><em>In reply to mccoll:</em></a></blockquote><p><br></p><p>Just noticed that Edge on Android will do a PWA with an Edge badge on the home screen.</p>

Newsletter

Stay up to date with the latest tech news from Thurrott.com!

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

Thurrott © 2023 BWW Media Group