Install element test page

Manifest-first installs!

Requires --enable-features=InstallElement,
OR enabling about://flags/#web-app-install-element,
OR an origin trial header for InstallElement

A test app and debugging tool for the declarative version of the Web Install API, <install> element. See more info in the Explainer.

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

← Back to main test page

Intended Use Cases

Expected installresult: success.

Current document, no attributes

Executes:

      <install></install>
    

Background document, cross-origin manifest with custom id

Executes:

      <install manifest="https://mustjab.github.io/manifest.json"></install>
    

Background document, cross-origin manifest and manifestId

Executes:

      <install manifest="https://isitchristmas.com/manifest.json" manifestid="https://isitchristmas.com/"></install>
    

invalid-data Cases: Manifest ID Validation

Version note: In Chromium-based browsers, including Microsoft Edge and Google Chrome, versions 157 and later report invalid-data. Use invalid_data when testing version 156 or earlier.

1 parameter, background document, manifest has no id

Executes:

      <install manifest="https://amandabaker.github.io/pwa/web-install/manifest.webmanifest"></install>
    

2 parameters, background document, manifest has id, mismatched manifestId

Executes:

      <install manifest="https://mustjab.github.io/manifest.json" manifestid="mismatched-manifest-id"></install>
    

2 parameters, background document, manifest has no id, mismatched manifestId

Executes:

      <install manifest="https://amandabaker.github.io/pwa/web-install/manifest.webmanifest" manifestid="mismatched-manifest-id"></install>
    

More Error Cases

Expected installresult: invalid-data.

1 parameter, background document, relative URL is valid but fetching and processing fail

Executes:

      <install manifest="badurl"></install>
    

2 parameters, background document, invalid type for manifest URL

Executes:

      <install manifest=12345 manifestid="https://isitchristmas.com/"></install>
    

2 parameters, background document, invalid type for manifestId

Executes:

      <install manifest="https://isitchristmas.com/manifest.json" manifestid=67890></install>
    

2 parameters, background document, manifest URL variable is a number

Executes:

      <script>const numUrl = 99999;</script>
      <install id="installVarNumberUrl" manifestid="https://isitchristmas.com/"></install>
      <script>document.getElementById('installVarNumberUrl').setAttribute('manifest', numUrl);</script>
    

2 parameters, background document, manifestId variable is a number

Executes:

      <script>const numManifest = 88888;</script>
      <install id="installVarNumberManifest" manifest="https://isitchristmas.com/manifest.json"></install>
      <script>document.getElementById('installVarNumberManifest').setAttribute('manifestid', numManifest);</script>
    

2 parameters, background document, manifest URL variable is null

Executes:

      <script>const nullUrl = null;</script>
      <install id="installVarNullUrl" manifestid="https://isitchristmas.com/"></install>
      <script>document.getElementById('installVarNullUrl').setAttribute('manifest', nullUrl);</script>
    

2 parameters, background document, manifestId variable is null

Executes:

      <script>const nullManifest = null;</script>
      <install id="installVarNullManifest" manifest="https://isitchristmas.com/manifest.json"></install>
      <script>document.getElementById('installVarNullManifest').setAttribute('manifestid', nullManifest);</script>
    

2 parameters, background document, manifest URL variable is undefined

Executes:

      <script>let undefinedUrl;</script>
      <install id="installVarUndefinedUrl" manifestid="https://isitchristmas.com/"></install>
      <script>document.getElementById('installVarUndefinedUrl').setAttribute('manifest', undefinedUrl);</script>
    

2 parameters, background document, manifestId variable is undefined

Executes:

      <script>let undefinedManifest;</script>
      <install id="installVarUndefinedManifest" manifest="https://isitchristmas.com/manifest.json"></install>
      <script>document.getElementById('installVarUndefinedManifest').setAttribute('manifestid', undefinedManifest);</script>
    

Background document, manifest URL assigned null

The non-nullable IDL property stringifies null, reflects manifest="null", and resolves it as a relative URL.

Executes:

      <install id="installPropertyNullManifest" manifestid="https://isitchristmas.com/"></install>
      <script>
        const installPropertyNullManifest = document.getElementById("installPropertyNullManifest");
        installPropertyNullManifest.manifest = null;
        console.log(installPropertyNullManifest.getAttribute("manifest")); // "null"
        console.log(installPropertyNullManifest.manifest); // Resolved URL ending in /null
      </script>
    

Background document, manifest has no id, manifestId assigned null

The non-nullable IDL property stringifies null, reflects manifestid="null", and resolves it as a relative URL.

Executes:

      <install id="installPropertyNullManifestId" manifest="https://isitchristmas.com/manifest.json"></install>
      <script>
        const installPropertyNullManifestId = document.getElementById("installPropertyNullManifestId");
        installPropertyNullManifestId.manifestId = null;
        console.log(installPropertyNullManifestId.getAttribute("manifestid")); // "null"
        console.log(installPropertyNullManifestId.manifestId); // Resolved URL ending in /null
      </script>
    

Background document, manifest has id, manifestId assigned undefined

The non-nullable manifestId IDL property stringifies undefined and reflects manifestid="undefined". The resulting manifest ID does not match the manifest's custom id.

Executes:

      <install id="installUndefinedManifestId" manifest="https://kbhlee2121.github.io/pwa/web-install/manifest.webmanifest"></install>
      <script>
        const installWithCustomId = document.getElementById("installUndefinedManifestId");
        installWithCustomId.manifestId = undefined;
      </script>
    

Background document, manifest has no id, manifestId assigned undefined

Assigning undefined to the non-nullable manifestId IDL property reflects manifestid="undefined". The resulting manifest ID does not match the manifest's default ID.

Executes:

      <install id="installUndefinedManifestIdNoCustomId" manifest="https://isitchristmas.com/manifest.json"></install>
      <script>
        const installWithoutCustomId = document.getElementById("installUndefinedManifestIdNoCustomId");
        installWithoutCustomId.manifestId = undefined;
      </script>