This specification defines a JSON-based manifest, which provides developers with a centralized place to put metadata associated with a web application. This includes, but is not limited to, the name of the web application, links to icons, as well as the preferred URL at which the web application should open when it is launched by the user. The manifest also allows developers to declare a default orientation set for their web application, as well as how the application is to be displayed when launched (e.g., in fullscreen).
Using this data, user agents can provide developers with means to create user experiences that are more comparable to that of a native application.
This specification also defines an API for requesting that a user bookmarks a web application. It also provides means for scripts to check whether the web application was launched from a bookmark, or not.
In addition, this specification defines the manifest
link
type, which provides a declarative means for a document to be
associated with a manifest.
Implementors need to be aware that this specification is extremely unstable. Implementors who are not taking part in the discussions will find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation phase should join the aforementioned mailing lists, or subscribe to the repository on GitHub, and take part in the discussions.
This section shows how developers can make use of the various features of this specification.
The following shows a typical manifest.
{ "name": "Super Racer 2000", "icons": [{
"src": "icon/lowres",
"sizes": "64x64",
"type": "image/webp"
}, {
"src": "icon/hd_small",
"sizes": "64x64"
}, {
"src": "icon/hd_hi",
"sizes": "128x128"
}], "start_url": "/start.html", "display": ["fullscreen"], "default_orientation": ["landscape"] }
link
element to link to a manifest
Example of using a link
element to associate a website
with a manifest. The example also shows how to use [[!HTML]]'s
link
and meta
elements to give the web
application a fallback name and set of icons.
<!doctype> <html> <title>Store finder - search</title> <!-- Startup configuration --> <link rel="manifest" href="add_to_homescreen.json"> <!-- Application metadata --> <meta name="application-name" content="Store Finder"> <link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico"> <link rel="icon" sizes="512x512" href="hi_def.png">
This example shows how to check if the application was launched from a bookmark.
<script> if (navigator.isHosted) { // Do installed application specific stuff. // ... document.documentElement.classList.add("standalone"); } </script>
The following example shows how a developer can ask a user to
bookmark a web application through an activation gesture, such as the
click of a button. Similarly to window.open()
, the
requestBookmark()
method only
works through explicit user action; calling it without any user
interaction will simply cause the resulting promise to be rejected
with an error.
<script> var installButton = document.querySelector("#install"); installButton.addEventListener("click", function(e){ navigator.requestBookmark().then(thankUser, stopBuggingUser); }); </script> <button id="install"> Bookmark <b>Awesome App!</b> </button>
This document attempts to address the Use Cases and Requirements for Installable Web Apps.
The [[\GetOwnProperty]] operation, promise objects, and the Type(x) notation are defined in [[!ECMASCRIPT]]. Processing also relies on various algorithms defined in [[!HTML]], [[!FETCH]], and [[!URL]].
When instructed to Trim(x), a user agent MUST behave as if [[!ECMASCRIPT]]'s String.prototype.trim() function had been called on the string x.
As the manifest uses the JSON format, this specification relies on the
types defined in [[!ECMA-404]] specification: namely object, array,
number, string, true
, false
, and
null
. Strict type checking is not enforced by this
specification. Instead, each member's definition specifies the steps
required to process a particular member and what to do when a type does
not match what is expected.
A display mode describes the manner in which a developer would
like the web application to be shown to a user when it is launched from a
bookmark (e.g., in fullscreen
). Display modes
are intended to correspond to the user interface metaphors and
functionality in use on a given platform.
Once a user agent applies a particular display mode to a web application, it becomes the default display mode for the top-level document of the browsing context (i.e., it is used as the display mode for all top-level documents to which the window is navigated). Other specifications, as well as the end user, MAY override the default display mode.
The display modes values are as follows:
browser
"
browser
display mode is the fallback
display mode to be used as the default if there is no valid
display
member in the manifest, or none of the preferred
display modes are supported by the user
agent.
standalone
"
fullscreen
"
minimal-ui
"
unknown
"
A manifest is a JSON document that contains startup parameters and application defaults for when a web application is launched from a bookmark. A manifest consists of a top-level object that contains zero or more members. Each of the members are defined below, as well as how their values are processed.
A user agent can obtain a manifest either from a top-level document or by fetching it directly from some URL (independently of a top-level document).
A user agent is said to have obtained a manifest from a
top-level document when a user navigates to a web application
and she or he explicitly makes a request to bookmark the top-level
document. For example, the user uses the browser's user interface to
either bookmark or add the web app to the home screen. The manifest
is associated with a document through either the
manifest
link relationship or through the well-known
manifest - this includes via successful requests to bookmark a
web application through the requestBookmark()
method.
Conversely, a user agent is said to have obtained a manifest
directly when the user agent fetches the manifest independently
of any top-level document. For example, a user agent fetches a
manifest from a URL without first navigating to any
document
or the user agent makes use of the well-know
manifest without first navigating to the web application.
The steps for fetching a manifest are given by the following algorithm. It takes a URL url as an argument. This algorithm will return either a response or an error.
The steps for processing a manifest are given by the following algorithm. The algorithm takes a text string as argument, which represents a manifest.
When instructed to issue a developer warning, the user agent MAY report the conformance violation to the developer in a user-agent-specific manner (e.g., report the problem in an error console), or MAY ignore the error and do nothing.
When instructed to ignore, the user agent MUST act as if whatever member or value caused the condition was absent from the manifest document.
"{}"
.
start_url
member, with either the
document
's URL or an application-specific URL (e.g.,
"app://") as the base URL.
display
member with
manifest as the argument.
default_orientation
member with
manifest and default display mode as arguments.
name
member.
undefined
or the empty string:
document
, and the
document
has any
meta
elements whose
name attribute matches
application-name
, then process those elements as per
[[!HTML]] and return the application name found. Using the
value of the document
's title is also suitable.
icons
member.
document
,
icon link relationships, or a favicon.ico
, can serve
as suitable fallbacks.
A user agent MAY periodically check if the contents of a manifest has changed (e.g., by honoring HTTP cache directives associated with the manifest or by checking for updates after the web application has been launched). In the event the members of the manifest have been updated, as determined by running the steps for processing a manifest and seeing if anything has changed, the user agent MAY update the bookmark details corresponding to the web application (e.g., by updating the name, icons, or whatever other members have been changed). For security reasons, it is RECOMMENDED that users be made aware of any such updates using implementation or platform specific conventions.
name
member
The name
member is a
string that represents the name of the web
application as it is usually displayed to the user (e.g., amongst a
list of other applications, or as a label for an icon).
For all intents and purposes, the name
member is functionally equivalent to
having a
meta
element whose name
attribute is
application-name
in a document.
The steps for processing the name member is given by the
following algorithm. The algorithm takes a manifest as
argument. This algorithm returns a string or undefined
.
undefined
.
icons
member
The icons
member is an
array of icon
objects that can serve as iconic representations of the web
application in various contexts. For example, they can be used to
represent the web application amongst a list of other applications,
or to integrate the web application with an OS's task switcher and/or system
preferences.
Note: If the user agent obtained a manifest from a top-level
document, the icons in the manifest override any icons listed in
the [[!HTML]] document
. However, if no icons are listed
in the manifest (or none of them are found to be suitable during
processing), the user agent will fall back to trying to use any found
in the HTML document. This fall back behavior is enforced during the
steps for processing a manifest instead of in this section.
The steps for processing the icons
member are
given by the following algorithm. The algorithm takes a manifest, and
a URL
manifest URL, which is the URL from which the
manifest was fetched. This algorithm will return a list of
icons objects icons, which can be empty.
icons
".
src
member of an icon with
potential icon and manifest URL.
undefined
, move onto the
next item in icons (if any are left).
type
member of an icon passing
potential icon.
sizes
member of an
icon passing potential icon.
src
, type
, sizes
, whose
values are src, type and sizes
respectively.
If there are multiple equally appropriate icons in icons, a user agent MUST use the last one declared in order at the time that the user agent collected the list of icons. If the user agent tries to use an icon but that icon is determined, upon closer examination, to in fact be inappropriate (e.g. because its content type is not supported), then the user agent MUST try the next-most-appropriate icon as determined by examining the icon object's members.
display
member
The display
member is an
array of strings, whose items are one or more display
modes values. The items represent a developer's preferred
display modes for the web application.
Order in the array is significant, with the
first item being the developer's most preferred, followed by the next
most preferred and so forth. When the member is missing or
erroneous, the user agent uses the
fallback display mode.
The steps for processing the display
member
are given by the following algorithm. The algorithm takes a manifest
manifest as an argument, and returns a set.
display
" as the argument.
default_orientation
member
The default_orientation
member is an array of strings that serve as hints for the user agent as
to the preferred screen orientations in which to display the web
application. The possible values are any of the
allowed orientations as defined in [[!SCREEN-ORIENTATION]]. Order
within the array is significant, with the first item being the
developer's most preferred, followed by the next most preferred and
so forth. When the default_orientation
member is
missing, or all the declared items are unsupported, the user agent
provides an implementation-specific default orientation for the web
application.
Although the specification relies on the allowed orientations from the [[!SCREEN-ORIENTATION]] specification, it is OPTIONAL for a user agent to implement the [[!SCREEN-ORIENTATION]] API. Supporting the [[!SCREEN-ORIENTATION]] API is, of course, RECOMMENDED.
If the user agent chooses to use one of the
allowed orientations in the orientations
member,
then that becomes the default orientation for the web application for
as long as the application is running (unless overridden by some
other means at runtime). This means that the user agent MUST return
the orientation to the default orientation any time the orientation
is unlocked [[!SCREEN-ORIENTATION]] or the top-level browsing context
is navigated.
Note: Once the web application is running, other means can change the
orientation of a document
of the web application (such
as via [[!SCREEN-ORIENTATION]] API).
The steps for processing the default_orientation
member are given by the following algorithm. The algorithm
takes a manifest manifest and display mode
mode as an argument, and returns a set.
default_orientations
" as the argument.
start_url
member
The start_url
member is a
string that represents the URL that the developer
would prefer the user agent
load when the user activates a bookmark (e.g., when the user
clicks on the icon of the web application from a device's application
menu or homescreen). When the developer omits the
start_url
member from the manifest, the user
agent can use either the URL of the
document
from which the web application was bookmarked
or some other application-specific URL.
The start_url
member is purely
advisory, and a user agent MAY ignore it or provide the
end-user the choice not to make use of it. A user agent MAY also
allow the end-user to modify the URL when the bookmark is being
created or any time thereafter.
The steps for processing the start_url
member
are given by the following algorithm. The algorithm takes a
manifest manifest and a URL base
URL. This algorithm returns a valid
URL.
url
".
undefined
",
issue a developer warning that the type is not supported.
The manifest
keyword can be used with a [[!HTML]]
link element. This keyword creates an external resource link.
Link type | Effect on... | Brief description | |
---|---|---|---|
link
|
a and area
|
||
manifest
|
External Resource | not allowed | Imports or links to a manifest. |
The media type for a manifest serves as the default media type
for resources associated with the manifest
link
type.
In cases where more than one
link
element with a manifest
link type
appears in a document
, the user agent MUST use the first
inserted link element and ignore all subsequent
link
elements with a manifest
link type
(even if the first element was erroneous).
The appropriate time to fetch the manifest
is when the external resource link is created
or when its element is inserted into a
document, whichever happens last. However, a user agent MAY opt
to delay fetching a manifest until after the document and its other
resources have been fully loaded (i.e., to not delay the availability
of content and scripts required by the document
).
To process a fetched manifest, the user agent MUST run the steps for processing a manifest.
Although proprietary extensions are undesirable, they can't realistically be avoided. As such, the RECOMMENDED way to add a proprietary extension is to use a vendor prefix.
The following is an example of two hypothetical vendor extensions.
{ ... "webkit_fancy_feature": "some/url/img", "moz_awesome_thing": { ... } ... }
Each icon object represents an icon for an application, suitable to use in various contexts (e.g., an application menu).
For all intents and purposes, an icon object
is functionally equivalent to link
element whose
rel
attribute is icon in a document
.
sizes
member
The sizes member is a string consisting of an unordered set of unique space-separated tokens which are ASCII case-insensitive that represents the dimensions of an icon for visual media. Each keyword is either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character. The keywords represent icon sizes in raw pixels (as opposed to CSS pixels). When multiple icon objects are available, a user agent can use the value to decide which icon is most suitable for a display context (and ignore any that are inappropriate).
The steps for processing a sizes
member of an
icon are given by the following algorithm. The algorithm takes
an icon object icon. This algorithm will return a
set.
undefined
", issue a
developer warning that the type is not supported.
sizes
attribute. For each resulting keyword:
src
member
The src member of an icon is a URL from which a user agent can fetch the icon's data.
The steps for processing the src
member of an
icon are given by the following algorithm. The algorithm takes
a icon object icon, and a URL manifest
URL, which is the URL from which the manifest was
fetched. This algorithm will return a URL or
undefined
.
src
" as the argument.
undefined
", issue a
developer warning that the type is not supported.
undefined
.
type
member
The type member of an icon is a hint as to the media type of the icon. The purpose of this member is to allow a user agent to ignore icons of media types it does not support.
There is no default MIME type for icon objects. However, for the purposes of determining the type of the resource, user agents must expect the resource to be an image.
The steps for processing the type
member of an
icon are given by the following algorithm. The algorithm takes
an icon object as an argument, and returns either a string
or undefined
.
type
" as the argument.
undefined
", issue a
developer warning that the type is not supported.
undefined
.
undefined
.
Navigator
object
isHosted
attribute
The isHosted
attribute indicates if the web application was launched from a
bookmark.
On getting the isHosted
attribute, the user agent MUST
return true
if the web application was launched from a
bookmark, or false
otherwise.
requestBookmark()
method
The requestBookmark()
method provides a way for scripts to ask the user if they would like
to bookmark the web application.
When the requestBookmark()
method is invoked, the user
agent MUST run the steps to request a bookmark.
The steps to request a bookmark are given by the following algorithm. The algorithm returns a promise.
DOMException
whose name is "SecurityError
"
and return.
DOMException
whose name is "WrongDocumentError
"
and return.
DOMException
whose name is "AbortError
"
and return.
undefined
.
The following registration is for community review and will be submitted to the IESG for review, approval, and registration with IANA.
The well-known manifest is a manifest that a user agent
fetches in the following manner. If a user agent attempts to obtain a
manifest from a top-level document, but no manifest
link relationship is declared,
the user agent MUST attempt to fetch a manifest
from the absolute URL
obtained by resolving the URL
"/.well-known/manifest.json
" against
the document's address. The user agent can then use the resulting
manifest as if the page had declared that manifest using the
manifest
keyword.
This specification registers the "manifest.json" well-known URI in the Well-Known URI Registry as required by [[!RFC5785]].
This section contains the required text for MIME media type registration with IANA.
The media type for a manifest is
application/manifest+json
.
If the protocol over which the manifest is transferred supports the [[!MIME-TYPES]] specification (e.g. HTTP), it is RECOMMENDED that the manifest be labeled with the media type for a manifest.
As the manifest format is JSON and will commonly be encoded using [[!UNICODE]], the security considerations described in [[!ECMA-404]] and [[!UNICODE-SECURITY]] apply. In addition, implementors need to impose their own implementation-specific limits on the values of otherwise unconstrained member types, e.g. to prevent denial of service attacks, to guard against running out of memory, or to work around platform-specific limitations.
Web applications will generally contain ECMAScript, HTML, CSS files, and other media, which are executed in a sand-boxed environment. As such, implementors need to be aware of the security implications for the types they support. Specifically, implementors need to consider the security implications outlined in at least the following specifications: [[!CSS-MIME]], [[!ECMAScript-MIME]], [[!HTML]].
As web applications can contain content that is able to simultaneously interact with the local device and a remote host, implementors need to consider the privacy implications resulting from exposing private information to a remote host. Mitigation and in-depth defensive measures are an implementation responsibility and not prescribed by this specification. However, in designing these measures, implementors are advised to enable user awareness of information sharing, and to provide easy access to interfaces that enable revocation of permissions.
As this specification allows for the declaration of URLs within certain members of a manifest, implementors need to consider the security considerations discussed in the [[!URL]] specification. Implementations intending to display IRIs and IDNA addresses found in the manifest are strongly encouraged to follow the security advice given in [[!UNICODE-SECURITY]].
There is only one class of product that can claim conformance to this specification: a user agent.
Implementations that use ECMAScript to implement the APIs defined in this specification MUST implement them in a manner consistent with the ECMAScript Bindings defined in the Web IDL specification [[!WEBIDL]], as this specification uses that specification and terminology.
This document reuses text from the [[!HTML]] specification, edited by Ian Hickson, as permitted by the license of that specification.