Install non-PWA websites in PWAsForFirefox with Home Manager

Introduction

PWAsForFirefox, also known as FirefoxPWA, added support for non-PWA websites in v0.4.0¹² to give users the flexibility to install any website as a PWA. The same mechanism covers PWAs with invalid manifests (permalink): unticking “Use manifest” makes the extension generate a fake one instead.

I started using programs.firefoxpwa with standard PWAs. Then I wanted to install LinkedIn as a PWA.

LinkedIn, however, doesn’t have a PWA.

How support for non-PWA websites works

When a non-PWA website is installed, the extension:

1. Generates a “fake” manifest with four fields:
   • start_url
   • name
   • description
   • icons
2. Encodes the JSON as base64.
3. Creates a data URL: data:application/manifest+json;base64,<GENERATED_MANIFEST_JSON_BASE64>.
4. Uses the created data: URL as the manifest URL.

So the non-PWA website now has a PWA manifest.

Configure a non-PWA website using the Home Manager options

Normally, we would set programs.firefoxpwa.profiles.<name>.sites.<name>.manifestUrl to the manifest’s URL. However, non-PWA websites don’t have a manifest, and the module doesn’t document what to use instead.

We just saw how PWAsForFirefox builds a manifest, but Home Manager takes a different path: it writes the config file itself, so none of those four fields are read³.

1

settings.config.icon_url = "https://www.linkedin.com/favicon.ico";

Since the manifest is ignored, we can use a data URL containing an empty JSON object encoded in base64. 😄

1
2

$ echo -n '{}' | base64
e30=

So the resulting URL is:

data:application/manifest+json;base64,e30=

Now set that as your manifestUrl:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  programs.firefoxpwa = {
    enable = true;
    profiles = {
      "XXXXXXXXXXXXXXXXXXXXXXXXXX".sites."YYYYYYYYYYYYYYYYYYYYYYYYYY" = {
        name = "LinkedIn";
        url = "https://www.linkedin.com/";
        manifestUrl = "data:application/manifest+json;base64,e30="; # <-- Our generated "manifest" URL.
      };
    };
  };
}

Rebuild and enjoy your non-PWA website installed as a PWA! 😄