Web Install Sample

Manifest-first installs!

A test app and debugging tool for the Web Install API, navigator.install(). See more info in the Explainer.

We'd love to hear your feedback! To share feedback, please create a GitHub issue.

*Requires --enable-features=WebAppInstallation (or about://flags/#web-app-installation-api)

Notes:

Current document installs = installing the current page.

Background document installs = installing anything else that's not the current page.

Looking for the element version? <install>

See this test page*

*Requires --enable-features=InstallElement (or about://flags/#web-app-install-element) OR an origin trial meta header for InstallElement*

Testing Permission Policy behavior?

See the Permission Policy test page

Intended Use Cases

Expected result: success.

Current document, no arguments (manifest has id)

Executes:

      navigator.install();
    

Background document, cross-origin manifest only (manifest has id)

Executes:

      navigator.install({
        manifest: "https://mustjab.github.io/manifest.json",
      });
    

Background document, cross-origin manifest and manifestId (manifest has no id)

Executes:

      navigator.install({
        manifest: "https://isitchristmas.com/manifest.json",
        manifestId: "https://isitchristmas.com/",
      });
    

Background document, same-origin manifest has id, manifestId undefined

manifestId is optional. Passing undefined or null is treated the same as not supplying it, so installation can succeed when the manifest declares a custom id.

Executes:

      navigator.install({
        manifest: "https://kbhlee2121.github.io/pwa/web-install/manifest.webmanifest",
        manifestId: undefined,
      });
    

Background document, cross-origin manifest with screenshots

*Note - screenshots not yet supported

Executes:

      navigator.install({
        manifest: "https://squoosh.app/manifest.json",
        manifestId: "https://squoosh.app/?utm_medium=PWA&utm_source=launcher",
      });
    

Edge Case: Installing Self with Parameters

*Note - Although the end result is the same ('foo' site installs itself), passing parameters like this will launch the foo app in a new window, preserving the 'foo' tab in the main browser window.

Install current document, manifest only

Executes:

      navigator.install({
        manifest: "https://kbhlee2121.github.io/pwa/web-install/manifest.webmanifest",
      });
    

Install current document, manifest and manifestId

Executes:

      navigator.install({
        manifest: "https://kbhlee2121.github.io/pwa/web-install/manifest.webmanifest",
        manifestId: "https://kbhlee2121.github.io/WebInstallSample",
      });
    

DataError Cases: Manifest Validation

Relative manifest URL resolves, but fetching and processing fail

Executes:

      navigator.install({
        manifest: "badurl",
      });
    

Background document, manifest has no id, manifestId omitted

Executes:

      navigator.install({
        manifest: "https://amandabaker.github.io/pwa/web-install/manifest.webmanifest",
      });
    

Background document, manifest has no id, manifestId undefined

Because undefined is treated as not supplying manifestId, this returns DataError: the manifest does not declare a custom id.

Executes:

      navigator.install({
        manifest: "https://isitchristmas.com/manifest.json",
        manifestId: undefined,
      });
    

Background document, manifest has id, mismatched manifestId

Executes:

      navigator.install({
        manifest: "https://mustjab.github.io/manifest.json",
        manifestId: "mismatched-manifest-id",
      });
    

Background document, manifest has no id, mismatched manifestId

Executes:

      navigator.install({
        manifest: "https://amandabaker.github.io/pwa/web-install/manifest.webmanifest",
        manifestId: "mismatched-manifest-id",
      });
    

TypeError Cases: Invalid JavaScript Input

Missing required manifest

Executes:

      navigator.install({});
    

Empty manifest URL

Executes:

      navigator.install({
        manifest: "",
      });
    

Malformed manifest URL

Executes:

      navigator.install({
        manifest: "https://[",
      });
    

Empty manifestId

Executes:

      navigator.install({
        manifest: "https://mustjab.github.io/manifest.json",
        manifestId: "",
      });
    

Malformed manifestId

Executes:

      navigator.install({
        manifest: "https://mustjab.github.io/manifest.json",
        manifestId: "https://[",
      });
    

Undefined manifest

Executes:

      navigator.install({
        manifest: undefined,
      });
    

Undefined manifest, defined manifestId

Executes:

      navigator.install({
        manifest: undefined,
        manifestId: "https://isitchristmas.com/",
      });