Firefox PWA Extension Support

Firefox generally does not support PWAs directly. This makes total sense since Mozilla is the keeper of the open web. That said, the Progressive Web Apps for Firefox extension does provide a pretty good experience for PWAs.

Note that setting it up is somewhat cumbersome, because it requires a command line app to exist on your system in addition to the extension. The extension does a good job walking you through that, but it's really important that on Linux, you do not use Snap or Flatpak to install Firefox, as this extension does not work if that is the case. See the supported systems list for the systems and installation methods to use for Firefox.

This page outlines how well the extension supports PWAs and also has additional information about how to effectively use and configure the extension for day-to-day use.

Setting up and Using the Extension Effectively

The extension's default behavior doesn't provide a true app-like experience. It can also be difficult to script the setup of PWAs. But, the extension does provide a command line tool, firefoxpwa, along with some hidden (but documented) settings to control its behavior.

Main Problems

All of these issues can be addressed and, for the most part, once you set this up, your installed PWAs will act like normal native apps.

• Installing and configuring the extension is difficult, since you must also install a secondary helper app.

  Fix: For Linux, do not use Snap or Flatpak to install Firefox. Either download the binary or set up their package repository and install from there. For Windows, the instructions for installing the helper via winget are wrong—you must winget install PWAForFirefox. In some cases you must quit and restart the entire app. Of note, the developer seems to give good support on GitHub.

• When a URL in scope of an installed PWA is accessed by the OS, it will not launch the app by default. This can be annoying if you want to use e.g. open to go to a URL and have it open your app instead.

  Fix: This must be done via the GUI. Open the extension. Click 'Apps', then click the 'box with pencil' icon next to the app, scroll down and check the checkbox labeled 'Launch this app on matching web site'.

• When navigating to an out-of-scope URL in an installed app, the URL will be opened in the PWA by default, not in your default web browser. This is especially annoying for apps that link to web sites you might already be logged into in your main browser.

  Fix: Navigate to about:config, agree to proceed, then search for the configuration option firefoxpwa.openOutOfScopeInDefaultBrowser. Set it to true.

• When launching the app via URL navigation (e.g. open), the default behavior is to open a new window. This means that launchers or other automation will not use the existing app window and make a new one. This is not app-like behavior.

  Fix: Navigate to about:config, agree to proceed, then search for the configuration option firefoxpwa.launchType. Set it to 3 (note, you may prefer to set it to '2' if your PWA has a lot of urls you would need to navigate to via deep links).

Scripting

Much of the extension's behavior can be scripted, especially if the PWA you are trying to install is configured properly (note that the extension can make any web page an installed app, even if it's not a PWA).

The trick is to use the installed firefoxpwa command line tool and some UNIX shell wizardry. There are three steps to the process: 1) creating a profile into which the app is installed, 2) installing the app, and 3) creating a user.js with your configuration.

1. Creating a Profile

   You'll need the profile ID when you install the site, and the output of firefoxpwa is not very machine readable. But it can be done.

   
     # Create the profile and save the tool's output to a file we can
     # look at later You'll need to give both a name and description,
     # and I recommend you avoid spaces or non-ASCII characters.
     > firefoxpwa profile create --name "ArrakisGuide"        \
                                 --description "ArrakisGuide" \
                                 > /tmp/output
     # Now use grep and sed to pull the profile ID out of that file
     > profile_id=$(grep 'Profile created' /tmp/output \
                    | sed 's/^.*Profile created: //g')
                 

2. Installing the App

   You'll need $profile_id from the previous step here. You'll also need the URL to the Web manifest, which you can find by using the URL Checker.

   
     > firefoxpwa site install --profile "${profile_id}" \
                               --launch-now              \
                               --name "ArrakisGuide" URL-TO-MANIFEST
                 

3. Configuring the App with user.js

   The app will launch, which will set up a few things. Quit the app, since you need to muck in its profile. You should still have the profile_id from before, but if not, you can get it again via profile_id=$(firefoxpwa profile list | grep -1 "ArrakisGuide" | grep ID: | sed 's/^ID: //').

   Once you have that, you can find the location where you should create `user.js`, which is a file you can manage that sets Firefox preferences for that profile/app only. It should be in ~/.local/share/firefoxpwa/profiles/${profile_id} on Linux systems, but you should check the documentation for your OS to be sure.

   You will also need to know the domain of the app, e.g. arrakisguide.com. Depending on the app, there may be several domains that you want to use inside the app and not open your browser. In general, the TLD and all subdomains works, e.g. arrakisguide.com and *.arrakisguide.com. Create user.js in the profile location with the following contents (changing out the domains for your app's domains):

   
     user_pref("firefoxpwa.allowedDomains",
               "arrakisguide.com,*.arrakisguide.com");
     user_pref("firefoxpwa.launchType", 3);
     user_pref("firefoxpwa.openOutOfScopeInDefaultBrowser", true);