NOTICE: official repository moved to https://github.com/zonkyio/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 isto install web applications to the homescreen of a device, providing userswith quicker access and a richer experience.
Addon features:
See the documentation section below for more information.
$ ember install ember-web-app
This generates a config/manifest.js configuration file.
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']
},
{
src: "/images/icons/mstile-150x150.png",
element: "square150x150logo",
targets: ['ms']
}
],
apple: {
statusBarStyle: 'black-translucent'
},
ms: {
tileColor: '#ffffff'
}
}
}
It will generate the following meta tags
index.html
<link rel="manifest" href="/manifest.webmanifest">
<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">
<meta name="msapplication-config" content="/browserconfig.xml">
and the following manifest.webmanifest
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"
}
]
}
and the following browserconfig.xml
file
<?xml version="1.0"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/images/icons/mstile-150x150.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>
You can disable the addon by adding a configuration 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();
};
You can add fingerprint checksum to your manifest.webmanifest file by configuring broccoli-asset-rev.
The following example prepends with a custom domain and adds fingerprint checksum to the manifest.webmanifest file.
ember-cli-build.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var broccoliAssetRevDefaults = require( 'broccoli-asset-rev/lib/default-options' );
module.exports = function(defaults) {
var options = {
fingerprint: {
extensions: broccoliAssetRevDefaults.extensions.concat(['webmanifest']),
prepend: 'https://www.example.com/'
}
};
var app = new EmberApp(defaults, options);
return app.toTree();
};
Note that the replaceExtensions
configuration from broccoli-asset-rev
is updated internally by ember-web-app
so you don't have to configure yourself on your project.
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:
Not all targets are used for all properties (actually, most properties are not affected by the targets).
name
short_name
background_color
description
dir
display
icons
lang
orientation
prefer_related_applications
related_applications
scope
start_url
theme_color
apple
ms
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:
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:
The default value for display
is browser
when is not defined.
Example
manifest.display = "fullscreen";
Target | Generates |
---|---|
manifest |
{ "display": "fullscreen" } |
apple |
<meta name="apple-mobile-web-app-capable" content="yes"> |
ms |
does not apply |
android |
does not apply |
Note that for iOS the meta tag will be render with value yes
only when display is fullscreen
or standalone
.
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.element
Non standard Only when the target is ms
. Must be one of square70x70logo
, square150x150logo
, wide310x150logo
or square310x310logo
.safariPinnedTabColor
Non standard Only when the target is safari-pinned-tab
. Can specify a single color with a hexadecimal value (#990000), an RGB value (rgb(153, 0, 0)), or a recognized color-keyword, such as: red, lime, or navy..Example
icons: [
{
src: '/foo/bar.png',
sizes: '180x180'
},
{
src: '/bar/baz.png',
sizes: '280x280',
targets: ['apple'] // non-standard property
},
{
src: '/bar/fav.png',
sizes: '32x32',
targets: ['favicon']
},
{
src: '/bar/ms.png',
element: 'square70x70logo', // non-standard property
targets: ['ms'] // non-standard-property
},
{
src: '/foo/monochrome.svg',
safariPinnedTabColor: '#cc6600', // non-standard property
targets: ['safari-pinned-tab'] // 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"> |
android |
does not apply |
favicon |
<link rel="icon" href="/bar/fav.png" sizes="32x32"> |
ms |
icon in browserconfig.xml |
safari-pinned-tab |
<link rel="mask-icon" href="/foo/monochrome.svg" color="#cc6600"> |
lang
Specifies the primary language for the values in the name and short_name members.
Example
manifest.lang = "es-UY";
Target | Generates |
---|---|
manifest |
{ "lang": "es-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:
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:
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"> |
apple
Turns on/off the generation of Apple-specific meta and link tags.
Possible values:
true
Turn on. This is the default value.false
Turn off.Example
manifest.apple = false;
Target | Generates |
---|---|
manifest |
{ "apple": false } |
apple |
returns an empty string |
ms |
does not apply |
android |
does not apply |
apple.webAppCapable
Overrides
manifest.display
for the generation of theapple-mobile-web-app-capable
meta tag.
Possible values:
true
Turn on.false
Turn off.Example
manifest = {
display: 'standalone',
apple: {
webAppCapable: false
}
};
Target | Generates |
---|---|
manifest |
does not apply |
apple |
<meta name="apple-mobile-web-app-capable" content="yes"> |
ms |
does not apply |
android |
does not apply |
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 |
apple.formatDetection
Adds
format-detection
meta tag if needed
Possible values:
telephone: false
Disables automatic phone number detection.Example
manifest.apple = {
formatDetection: {
telephone: false
}
};
Target | Generates |
---|---|
manifest |
does not apply |
apple |
<meta name="format-detection" content="telephone=no"> |
ms |
does not apply |
android |
does not apply |
ms
Turns on/off the generation of Microsoft-specific meta and link tags.
Possible values:
true
Turn on.false
Turn off. This is the default value.Example
manifest.ms = false;
ms.tileColor
Sets the
<TileColor>
property inbrowserconfig.xml
.
See Browser configuration schema reference
Possible values:
Example
manifest.ms = {
tileColor: '#ffffff'
};
ember-web-app
doesn't generate icons or images. If you want to automate the generation of icons starting from a master image, you can install ember-cli-image-transformer
.
Managing all the various icon sizes and types can be overwhelming. One solution is to start with a base image which can be use to generate the necessary icon permutations for your environment. You can use ember-cli-image-transformer to handle this task.
If your manifest.js
looks like this and needs a 192px and a 512px icon:
// config/manifest.js
export default function() {
return {
icons: [
{
src: '/assets/icons/appicon-32.png',
sizes: `32x32`,
targets: ['favicon']
},
...[192, 280, 512].map((size) => ({
src: `/assets/icons/appicon-${size}.png`,
sizes: `${size}x${size}`
}))
]
};
}
You can start with a base brand-icon.svg
image and automatically build the 192x192 and 512x512 versions by installing ember-cli-image-transformer
and adding the necessary configuration to your ember-cli-build.js
file:
// ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
'ember-cli-image-transformer': {
images: [
{
inputFilename: 'lib/images/brand-icon.svg',
outputFileName: 'appicon-',
convertTo: 'png',
destination: 'assets/icons/',
sizes: [32, 192, 280, 512]
}
]
}
});
$ git clone https://github.com/san650/ember-web-app.git
$ cd $_
$ yarn # (or npm install)
Running tests
$ npm test
ember-web-app is licensed under the MIT license.
See LICENSE for the full license text.
步骤: 安装Ember。 创建一个新应用程序。 定义路由。 编写一个UI组件。 构建您的应用程序以部署到生产环境。 安装Ember 您可以使用npm(Node.js包管理器,你需要安装node.js)使用单个命令来安装Ember。在终端中输入以下内容: ember new ember-quickstart 创建一个新应用程序 一旦你通过npm安装了Ember CLI,你将可以ember在你的终端中
现在有很多的JavaScript库,大部分库都满足了你的网站有关DOM的操作。但是当前迫切需要去管理单个应用的代码,这就是为什么新的框架产生啦。 "古话说的好:刀要用在刀刃上。" Ember.js不想传统的JQuery那样,不能给你很好的桌面体验,没有相关 用列,缺少数据绑定,事件,状态管理。总的来说,你可能可以拼凑相关的插件去实现这些功能。但是,现在开始有专门的框架出现去解决这些专业问题。以我看
快速开始 这指南将教你如何使用 Ember 从头开始建立一个简单的 app。 我们会包含如下步骤: 一、安装 Ember 你可以使用 npm 的一条命令来安装 Ember, npm 是 Node.js 的包管理器。在你的终端里输入如下命令: npm install -g ember-cli 没有 npm? 点击这里学习安装 Node.js 和 npm。如果需要了解一个 Ember CLI 工程必要
Introdution 引言 Imagine we are writing a web app for managing a blog. At any given time, we should be able to answer questions like What post are they looking at? and Are they editing it? In Ember.js,
ember-osf-web master build develop build A front end for osf.io. Prerequisites You will need the following things properly installed on your computer. osf.io back end Git Node.js (with NPM) Ember CLI
Ember检查器是一个浏览器插件,用于调试Ember应用程序。 灰烬检查员包括以下主题 - S.No. 灰烬检查员方式和描述 1 安装Inspector 您可以安装Ember检查器来调试您的应用程序。 2 Object Inspector Ember检查器允许与Ember对象进行交互。 3 The View Tree 视图树提供应用程序的当前状态。 4 检查路由,数据选项卡和库信息 您可以看到检查
英文原文: http://emberjs.com/guides/getting-ember/index/ Ember构建 Ember的发布管理团队针对Ember和Ember Data维护了不同的发布方法。 频道 最新的Ember和Ember Data的 Release,Beta 和 Canary 构建可以在这里找到。每一个频道都提供了一个开发版、最小化版和生产版。更多关于不同频道的信息可以查看博客
ember-app-shell ember-app-shell is built and maintained by DockYard, contact us for expert Ember.js consulting. Renders an App Shell based on your actual running Ember.js application using Headless Ch
ember-app-scheduler Ember batches DOM updates and paints them after every run loop to prevent layout thrashing. Layout thrashing can prevent a faster First Meaningful Paint (FMP) because all the conte
您可以配置Ember App和CLI以管理应用程序的环境。 环境配置文件将出现在config/environment.js 。 它包含以下代码结构 - module.exports = function(environment) { var ENV = { modulePrefix: 'query-params', //it is the name of application