Web Applications

This document contains information about GNOME Web’s installable Web Applications for developers.

The information in this document was last updated for Web version 3.22.

Managing Web Applications

1. Installation

Please refer to Create a Web Application in Web Help.

To enhance the installation experience of our web app or website, please refer to the relevant information in this document.

2. Uninstallation

Web Applications can be uninstalled as a normal application from within the GNOME Software, or by navigating to the following URL in Web: about:applications

Notable Technicalities

• Web Applications use the same User-Agent string as Web, but appends an additional (Web App) component after Epiphany/<version>:

  Mozilla/5.0 (Fedora; Linux x86_64) AppleWebKit/602.1 (KHTML, like Gecko) Version/8.0 Safari/602.1 Epiphany/3.21.2 (Web App)

• Web Notifications API’s requestPermission() method always returns "granted" within installed Web Applications.

• Installable Web Apps don’t share cookies or cache with the Web application. Each Web Application runs in an isolated and separate instance with a separate data profile. Notably, all domain cookies and are copied into the installable web app’s profile at the time the Web Application is installed. Passwords stored in the GNOME Keychain are available in Web Applications.

How is the application icon determined?

Webpage metadata must include high quality icons to give users of the web app or website the best experience when installing it as a Web Applications.

The ideal icon size is 192x192 px square, or larger. Smaller and larger images will be scale to 192 px on installation. Images that aren’t may be cropped. It’s recommended to either provide a standard vector icon.

The icon discovery recognizes the following metadata, in order of preference:

1. Web Standard (vector)

• Example:

  <link rel="icon" sizes="any" href="/web_icon.svg">

• Reference: https://www.w3.org/TR/html/links.html#link-type-icon

• Notes: Only SVGs are supported. Vectors will be rasterized to the default application icon size.

2. Web Standard (size-specific raster image)

• Example:

  <link rel="icon" sizes="512x512" href="/web_icon_512.png">
  <link rel="icon" sizes="128x128" href="/web_icon_128.png">
  <link rel="icon" sizes="64x64" href="/web_icon_64.png">

• Reference: https://www.w3.org/TR/html/links.html#link-type-icon

• Notes: The largest single image size is used. A space separated lists of sizes is unsupported at this time. Can be nearly any image format. The size must be at least 96 px.

3. Microsoft Tile Image

• Example:

  <meta name="msapplication-TileImage" content="/msapplication-tileimage_144.png">
  <meta name="msapplication-TileColor" content="#FF3300">

• Reference: http://msdn.microsoft.com/en-us/library/ie/dn255024%28v=vs.85%29.aspx#msapplication-TileImage

4. Apple Touch Icon

• Example:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

• Reference: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

5. Open Graph Protocol

• Example:

  <meta property="og:image" content="/web_icon_256.png">

• Reference: http://ogp.me/#structured

6. Favicon

• Example:

  <link rel="icon" href="/favicon.png">

• Reference: http://en.wikipedia.org/wiki/Favicon#Standardization

7. Fallback

If no metadata is discovered, Web will make a last-ditched effort to retrieve /favicon.ico from the server.

How is the application name determined?

Web Applications can suggest a name when users create them based on metadata in the document. In order of preference:

1. Web Standard

• Example:

  <meta name="application-name" content="Best App">

• Reference: https://www.w3.org/TR/html/document-metadata.html#application-name

• Notes: Will always use the first candidate element. Multilinguality through the lang attribute is unsupported.

2. Open Graph Protocol

• Example:

  <meta property="og:site_name" content="Best App"></meta>

• Reference: http://ogp.me/#optional

3. Fallback

If no better name candidate is found, Web Applications fallback to use the doman name. The <title> element is not used.

Sources

• Providing great icons for web apps in GNOME Web (Epiphany)