ember-web-app

This Ember addon helps you configure and manage the web app manifest and related meta tags needed to create a Progressive Web Application

From MDN

The web app manifest provides information about an application (such as name, author, icon, and description) in a text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.

Addon features:

Generates a manifest.ember-web-app.json file using a JavaScript template
Uses fingerprint for images
Generates equivalent meta tags for supporting other devices (e.g. iPhone)
Validates the configuration

Here's a brief list of the main missing features that we intend to add in the future.

Generate image variants for different devices
Generate Microsoft's browserconfig.xml manifest for Win8/Win10 integration

See the documentation section below for more information.

Installation

$ ember install ember-web-app

This generates a config/manifest.js configuration file.

Example

Having the following configuration file config/manifest.js

module.exports = function() {
  return {
    name: "Let's Cook",
    short_name: "Let's Cook",
    description: "An app for organizing your weekly menu and groceries list.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffa105",
    theme_color: "#ffa105",

    icons: [
      {
        src: "/images/icons/android-chrome-192x192.png",
        sizes: "192x192",
        type: "image/png"
      },
      {
        src: "/images/icons/android-chrome-512x512.png",
        sizes: "512x512",
        type: "image/png"
      },
      {
        src: "/images/icons/apple-touch-icon.png",
        sizes: "180x180",
        type: "image/png",
        targets: ['apple']
      }
    ],

    apple: {
      statusBarStyle: 'black-translucent'
    }
  }
}

It will generate the following meta tags

index.html

<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/images/icons/android-chrome-192x192-883114367f2d72fc9a509409454a1e73.png" sizes="192x192">
<link rel="apple-touch-icon" href="/images/icons/android-chrome-512x512-af3d768ff652dc2be589a3c22c6dc827.png" sizes="512x512">
<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-36cba25bc155e8ba414265f9d85861ca.png" sizes="180x180">
<meta name="theme-color" content="#ffa105">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Let's Cook">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

and the following manifest.json file

{
  "name": "Let's Cook",
  "short_name": "Let's Cook",
  "description": "An app for organizing your weekly menu and groceries list.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffa105",
  "theme_color": "#ffa105",
  "icons": [
    {
      "src": "/images/icons/android-chrome-192x192-883114367f2d72fc9a509409454a1e73.png",
      "sizes": "192x192",
      "type":"image/png"
    },
    {
      "src": "/images/icons/android-chrome-512x512-af3d768ff652dc2be589a3c22c6dc827.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Configuration

Manifest name

You can set the name of the manifest by adding a configuation option to config/environment.js.

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'dummy',
    environment: environment,
    rootURL: '/'
    ...
  };

  ENV['ember-web-app'] = {
    name: 'my-awesome-manifest.json'
  };

  return ENV;
};

Disable

You can disable the addon by adding a configuring option to ember-cli-build.js build file.

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var options = {
    'ember-web-app': {
      enabled: false
    }
  };

  var app = new EmberApp(defaults, options);

  return app.toTree();
};

API documentation

This Ember addon generates a Web Application Manifest at build time using the config/manifest.js configuration file.

It also generates some compatibility meta tags for supporting vendor specific web application features like Apple's Web Content For Safari and Microsoft's Browser configuration schema that don't yet support the Web Application Manifest standard.

Internally, this addon takes into account four different types of targets for generating the web app manifest taking care of including some backward compatibility meta tags in order to support as many devices and browsers as possible. These targets are:

manifest (default target)
apple (to target iOS devices)
ms (to target Win8/Win10 devices)
android (to target options specific for android devices)

Not all targets are used for all properties (actually, most properties are not affected by the targets).

List of supported properties.

name
short_name
background_color
description
dir
display
icons
lang
orientation
prefer_related_applications
related_applications
scope
start_url
theme_color
apple.statusBarStyle

`name`

Provides a human-readable name for the application as it is intended to be displayed to the user, for example among a list of other applications or as a label for an icon.

Example

manifest.name = "dummy";

Target	Generates
`manifest`	`{ "name": "dummy" }`
`apple`	`<meta name="apple-mobile-web-app-title" content="dummy">`
`ms`	`<meta name="application-name" content="dummy">`
`android`	does not apply

`short_name`

Provides a short human-readable name for the application. This is intended for use where there is insufficient space to display the full name of the web application.

Example

manifest.short_name = "dummy";

Target	Generates
`manifest`	`{ "short_name": "dummy" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`background_color`

Defines the expected background color for the web application.

Example

manifest.background_color = "#fff";

Target	Generates
`manifest`	`{ "background_color": "#fff" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`description`

Provides a general description of what the web application does.

Example

manifest.description = "Lorem ipsum dolor";

Target	Generates
`manifest`	`{ "description": "Lorem ipsum dolor" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`dir`

Specifies the primary text direction for the name, short_name, and description members.

Possible values:

ltr (left-to-right)
rtl (right-to-left)
auto

Example

manifest.dir = "ltr";

Target	Generates
`manifest`	`{ "dir": "ltr" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`display`

Defines the developer's preferred display mode for the web application.

Possible values:

fullscreen
standalone
minimal-ui
browser

Example

manifest.display = "fullscreen";

Target	Generates
`manifest`	`{ "display": "fullscreen" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`icons`

Specifies an array of image objects that can serve as application icons 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.

Image object members:

src The path to the image file.
sizes A string containing space-separated image dimensions.
type A hint as to the media type of the image.
targets Non standard Targets for the images. ['manifest', 'apple'] by default.

Example

icons: [
  {
    src: '/foo/bar.png',
    sizes: '180x180'
  },
  {
    src: '/bar/baz.png',
    sizes: '280x280',
    targets: ['apple']  // non-standard property
  }
];

Target	Generates
`manifest`	`{ "icons": [ { "src": "/foo/bar.png", "sizes": "180x180" } ] }`
`apple`	`<link rel="apple-touch-icon" href="/foo/bar.png" sizes="180x180">` `<link rel="apple-touch-icon" href="/foo/bar.png" sizes="280x280">`
`ms`	does not apply (for now)
`android`	does not apply

`lang`

Specifies the primary language for the values in the name and short_name members.

Example

manifest.lang = "es-UY";

Target	Generates
`manifest`	`{ "lang": "en-UY" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`orientation`

Defines the default orientation for all the web application's top level browsing contexts.

Possible values:

any
natural
landscape
landscape-primary
landscape-secondary
portrait
portrait-primary
portrait-secondary

Example

manifest.orientation = "portrait";

Target	Generates
`manifest`	`{ "orientation": "portrait" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`prefer_related_applications`

Specifies a boolean value that hints for the user agent to indicate to the user that the specified related applications are available, and recommended over the web application.

Possible values:

true
false

Example

manifest.prefer_related_applications = true;

Target	Generates
`manifest`	`{ "prefer_related_applications": true }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`related_applications`

Specifies an array of "application objects" representing native applications that are installable by, or accessible to, the underlying platform.

Application object members:

platform The platform on which the application can be found.
url The URL at which the application can be found.
id The ID used to represent the application on the specified platform.

Example

manifest.prefer_related_applications = true;
manifest.related_applications = [
  {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }
];

Target	Generates
`manifest`	`{ "prefer_related_applications": true, "related_applications": [{"platform": "itunes", "url": "https://itunes.apple.com/app/example-app1/id123456789" }] }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`scope`

Defines the navigation scope of this web application's application context. This basically restricts what web pages can be viewed while the manifest is applied.

Example

manifest.scope = "/myapp/";

Target	Generates
`manifest`	`{ "scope": "/myapp/" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`start_url`

Specifies the URL that loads when a user launches the application from a device.

Example

manifest.start_url = "./?utm_source=web_app_manifest";

Target	Generates
`manifest`	`{ "start_url": "./?utm_source=web_app_manifest" }`
`apple`	does not apply
`ms`	does not apply
`android`	does not apply

`theme_color`

Defines the default theme color for an application. This sometimes affects how the application is displayed by the OS.

Example

manifest.theme_color = "aliceblue";

Target	Generates
`manifest`	`{ "theme_color": "aliceblue" }`
`apple`	does not apply
`ms`	does not apply
`android`	`<meta name="theme-color" content="aliceblue">`

Vendor specific properties (non-standard)

`apple.statusBarStyle`

Sets the style of the status bar for a web application in iOS

See Changing the Status Bar Appearance

Possible values:

default The status bar appears normal.
black The status bar has a black background.
black-translucent The status bar is black and translucent.

Note that if set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

Example

manifest.apple = {
 statusBarStyle: 'black-translucent'
};

Target	Generates
`manifest`	does not apply
`apple`	`<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">`
`ms`	does not apply
`android`	does not apply

`apple.precomposed`

Adds precomposed suffix to apple touch icons

See Precomposed Keyword for apple touch icons

Possible values:

true Adds precomposed suffix.
false (default) Does not add precomposed suffix.

Example

manifest.apple = {
 precomposed: 'true'
};

Target	Generates
`manifest`	does not apply
`apple`	`<link rel="apple-touch-icon-precomposed" href="/images/icons/apple-touch-icon-192x192.png" sizes="192x192">`
`ms`	does not apply
`android`	does not apply

Development

$ git clone https://github.com/san650/ember-web-app.git
$ cd $_
$ yarn          # (or npm install)
$ bower install

Running tests

$ npm test

Project's health

License

ember-web-app is licensed under the MIT license.

See LICENSE for the full license text.

Name		Name	Last commit message	Last commit date
Latest commit History 89 Commits
addon		addon
app		app
blueprints		blueprints
config		config
lib		lib
node-tests		node-tests
tests		tests
vendor		vendor
.bowerrc		.bowerrc
.editorconfig		.editorconfig
.ember-cli		.ember-cli
.gitignore		.gitignore
.jshintrc		.jshintrc
.npmignore		.npmignore
.travis.yml		.travis.yml
.watchmanconfig		.watchmanconfig
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
ember-cli-build.js		ember-cli-build.js
index.js		index.js
package.json		package.json
testem.js		testem.js

License

trmcnvn/ember-web-app

Folders and files

Latest commit

History

Repository files navigation

ember-web-app

Table of content

Installation

Example

Configuration

Manifest name

Disable

API documentation

List of supported properties.

name

short_name

background_color

description

dir

display

icons

lang

orientation

prefer_related_applications

related_applications

scope

start_url

theme_color

Vendor specific properties (non-standard)

apple.statusBarStyle

apple.precomposed

Development

Project's health

License

About

Resources

License

Stars

Watchers

Forks

Languages

`name`

`short_name`

`background_color`

`description`

`dir`

`display`

`icons`

`lang`

`orientation`

`prefer_related_applications`

`related_applications`

`scope`

`start_url`

`theme_color`

`apple.statusBarStyle`

`apple.precomposed`