From 0cac578815b9d89cdbf4dd33077e276dea7dcd6f Mon Sep 17 00:00:00 2001
From: Daniel Murphy
display_override
member
@@ -129,55 +129,382 @@
note_taking
member
+ Installable web applications
- The note_taking
member of the Web Application Manifest is
- an object that contains
- information related to note-taking. It has the following members:
-
new_note_url
member
- + There are multiple ways that the installation process can be + triggered: +
+
- The [=note_taking=] new_note_url
member is a URL
- [=manifest/within scope=] of the manifest, to open when the user
- wants to take a new note using the web application (e.g., from an
- operating system shortcut icon or keyboard shortcut). Defining this
- member indicates that the web application is a note-taking
- application.
+ In any case, the user agent MUST NOT present an install prompt
+ if the document is not installable.
+ Prior to presenting an automated install prompt, a user agent + MUST run the steps to notify that an install prompt is + available, to give the site the opportunity to prevent the + default action (which is to install the application). Alternatively, + the user agent MAY, at any time (only if the document is + installable), run + the steps to notify that an install prompt is available at any + time, giving the site the opportunity to show a site-triggered + install prompt without automatically showing the prompt. +
++ To present + an install prompt: +
++ The steps to notify that an install prompt is available + are given by the following algorithm: +
+beforeinstallprompt
, with its
+ cancelable
attribute initialized to true.
+ + Installation events and supporting the {{BeforeInstallPrompt}} is + OPTIONAL. +
++ DOM events fired by this specification use the + application life-cycle task source. +
++ [Exposed=Window] + interface BeforeInstallPromptEvent : Event { + constructor(DOMString type, optional EventInit eventInitDict = {}); + Promise<PromptResponseObject> prompt(); + }; + + dictionary PromptResponseObject { + AppBannerPromptOutcome userChoice; + }; + + enum AppBannerPromptOutcome { + "accepted", + "dismissed" + }; ++
+ The BeforeInstallPromptEvent is dispatched when the site is + allowed to present a site-triggered install prompt, or prior + to the user agent presenting an automated install prompt. It + allows the site to cancel the automated install prompt, as + well as manually present the site-triggered install prompt. +
++ The PromptResponseObject contains the result of calling + prompt(). It + contains one member, userChoice, which states the user's + chosen outcome. +
++ An instance of a BeforeInstallPromptEvent has the following + internal slots: +
+false
. Represents whether this
+ event was used to present an install prompt to the
+ end-user.
+ prompt()
method
+ + The prompt method, when called, runs the following + steps: +
+isTrusted
+ attribute is false
, reject
+ this.[[\userResponsePromise]] with
+ {{"NotAllowedError"}}, optionally informing the developer
+ that untrusted events can't call prompt()
.
+ false
, set this.[[\didPrompt]]
+ to true
, then in parallel, request to
+ present an install prompt with this event. Wait, possibly
+ indefinitely, for the end-user to make a choice.
+ + To request to present an install + prompt with BeforeInstallPromptEvent + event: +
++ This example shows how one might prevent an automated install + prompt from showing until the user clicks a button to show a + site-triggered install prompt. In this way, the site can + leave installation at the user's discretion (rather than + prompting at an arbitrary time), whilst still providing a + prominent UI to do so. +
++ window.addEventListener("beforeinstallprompt", event => { + // Suppress automatic prompting. + event.preventDefault(); + + // Show the (disabled-by-default) install button. This button + // resolves the installButtonClicked promise when clicked. + installButton.disabled = false; + + // Wait for the user to click the button. + installButton.addEventListener("click", async e => { + // The prompt() method can only be used once. + installButton.disabled = true; + + // Show the prompt. + const { userChoice } = await event.prompt(); + console.info(`user choice was: ${userChoice}`); + }); + }); ++
AppBannerPromptOutcome
enum
+ + The AppBannerPromptOutcome enum's values represent the + outcomes from presenting an install prompt. +
++ The steps to install the web application are given by the + following algorithm: +
+Window
object
- The following shows a [=manifest=] for a note-taking application.
+ The following extensions to the Window
object specify
+ the event handler idl attribute on which events relating to
+ the installation of a web application are fired.
- { - "name": "My Note Taking App", - "description": "You can take notes!", - "icons": [{ - "src": "icon/hd_hi", - "sizes": "128x128" - }], - "start_url": "/index.html", - "display": "standalone", - "note_taking": { - "new_note_url": "/new_note.html" - } ++ partial interface Window { + attribute EventHandler onappinstalled; + attribute EventHandler onbeforeinstallprompt; + }; +++ function handleInstalled(ev) { + const date = new Date(ev.timeStamp / 1000); + console.log(`Yay! Our app got installed at ${date.toTimeString()}.`); } + + // Using the event handler IDL attribute + window.onappinstalled = handleInstalled; + + // Using .addEventListener() + window.addEventListener("appinstalled", handleInstalled);++ ++
+onappinstalled
attribute ++ The onappinstalled is an event handler IDL + attribute for the "appinstalled" event type. The + interface used for these events is the
+Event
+ interface [[DOM]]. This event is dispatched as a result of a + successful installation (see the steps to install the web + application). ++ +
+onbeforeinstallprompt
attribute ++ The onbeforeinstallprompt is an event handler IDL + attribute for the "beforeinstallprompt" event type. + The interface used for these events is the + BeforeInstallPromptEvent interface (see the steps to + notify that an install prompt is available). +
+