Git Product home page Git Product logo

ember-web-app's Introduction

ember-web-app

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 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

See the documentation section below for more information.

Table of content

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']
      },
      {
        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>

Configuration

Disable

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();
};

Fingerprint

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.

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

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

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:

  • 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

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.
  • An object with custom settings (see the settings below)

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 the apple-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

See Safari HTML Reference

Possible values:

  • An object with following settings
    • 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.
  • An object with custom settings (see the settings below)

Example

manifest.ms = false;

ms.tileColor

Sets the <TileColor> property in browserconfig.xml.

See Browser configuration schema reference

Possible values:

  • A color in hex format.

Example

manifest.ms = {
  tileColor: '#ffffff'
};

Generating Icons

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]
        }
      ]
    }
  });

Development

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

Running tests

$ npm test

Project's health

Build Status Ember Observer Score Maintainability dependencies Status devDependencies Status

License

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

See LICENSE for the full license text.

ember-web-app's People

Contributors

bobisjan avatar caseywatts avatar greatwizard avatar hidnasio avatar jrjohnson avatar kmoe avatar marten-dockyard avatar oscarni avatar san650 avatar serabe avatar simonihmig avatar sivakumar-kailasam avatar teddyzeenny avatar tschoartschi avatar yoranbrondsema avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

serabe teddyzeenny tchak hidnasio trmcnvn simonihmig bobisjan kmoe akashfoss sutori jrjohnson tschoartschi caseywatts laurad97 lypborges ryanpatrickcook jonpitch asaraf-perforce

ember-web-app's Issues

apple-mobile-web-app-capable is deprecated in chrome

On chrome 58.0.3029.96 I'm getting this deprecation warning

<meta name="apple-mobile-web-app-capable" content="yes"> is deprecated. Please include <meta name="mobile-web-app-capable" content="yes"> - http://developers.google.com/chrome/mobile/docs/installtohomescreen

Add option for disabling manifest.json generation

Do not generate the manifest and do not add the meta tags if the addon is disabled.

ember-cli-build.js

...
options['ember-web-app'] = {
  enabled: false
};

var app = new EmberApp(defaults, options);

Resources on `icons` best practices?

Thanks for this awesome addon!

Do you have any links to resources on what we should put in the icons array? It might be nice to link to some best practices or good defaults.

Command failed: `yarn remove --non-interactive` on ember install ember-web-app

Hi, tks for this addon.

I'm just try to install and give me this error on console. I'm using ember 2.17.2 on MAC.

 ember install ember-web-app

Yarn: Installed ember-web-app
installing ember-web-app
? Overwrite config/manifest.js? Yes, overwrite
  overwrite config/manifest.js
  uninstall package
Command failed: yarn remove --non-interactive
error Not enough arguments, expected at least 1.

yarn remove v1.3.2
info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command.



Stack Trace and Error Report: /var/folders/91/_nds3r4s2199q6zj11ks51z00000gn/T/error.dump.d9a5abb0ea8114d2e1379dececf02a3e.log```

Maybe is something from my environment. But I couldn't find what is the problem.

Turn off apple meta and link tags generation

Disable the generation of all apple meta tags generation:

{
  apple: false
}

It won't generate any of the following meta and link tags

<link rel="apple-touch-icon" href="/images/icons/android-chrome-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/images/icons/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png" sizes="180x180">
<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">

This is useful when you want to do your own iOS configuration that that is not supported by this addon.

Can't use absolute urls for icons on ios

When I specify icons with an absolute url in the manifest they render with a prefixed / for apple meta tags.

I have this in manifest.js:

icons: [
    {
      src: 'https://website.com/image/upload/123/icon-192.png',
      sizes: '192x192',
      type: 'image/png'
    }
]

The manifest file would be correct:

"icons": [
  {
    "src": "https://website.com/image/upload/123/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
]

But the apple tags would look like this:

<link rel="apple-touch-icon" href="/https://website.com/image/upload/123/icon-192.png" sizes="192x192">

href="/ the slash can't be at the beginning of the url.. 😕

Allow prefix url as an option

Having a prefix option for the manifest file would bring it to parity with how other assets are defined on the index.html page. Because assets are defined as {{rootURL}}assets they usually resolve to /assets. In addition when users define a prefix value it becomes https://foo.cdn.io/assets.

So in our case the rootURL is / but we have a different routerURL and we load this app in a sub-path of our main app via proxy, there /manifest.json is undesirable. Having prefix there would've been useful.

Allow for iOS browser controls to be visible when display mode is not fullscreen/standalone

This tag <meta name="apple-mobile-web-app-capable" content="yes"> renders the site without any UI controls at all on iOS or ability to go back in history.

How about only adding this when display is set to fullscreen or standalone, and letting minimal-ui and browser render the safari-browser experience? The solution would be to skip the meta tag in the two latter cases.

https://github.com/san650/ember-web-app/blob/master/lib/apple-meta-tags.js#L7

In case i'm not missing some other feature this tag enables, this update would increase usability a lot for iOS-users when a site is not a full blown "native"-like-app with its own navigation controls 😸

Fastboot fails

I've tried this module in combination with Ember fastboot, but I get errors in fastboot (that I do not get without this module).

I've only installed this module (ember install..) and not done anything else.

theme_color in manifest but not index.html

Is there a way to define the theme_color in the manifest only? I'm setting the theme_color meta element programmatically through ember-cli-head depending on my backgrounds and don't want a duplicate meta element in my head.

The package [email protected] does not satisfy its siblings' peerDependencies requirements!

Anyone has an idea??? It's occurring after ember install ember-web-app

Ember: 2.9.1
Node: 6.3.1

at /Users/skiminock/Documents/projects/spark/node_modules/npm/lib/install.js:125:32 at /Users/skiminock/Documents/projects/spark/node_modules/npm/lib/install.js:268:7 at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:142:5 at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:263:14 at cb (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/slide/lib/async-map.js:47:24) at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:263:14 at cb (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/slide/lib/async-map.js:47:24) at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:263:14 at cb (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/slide/lib/async-map.js:47:24) at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:263:14 at cb (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/slide/lib/async-map.js:47:24) at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:263:14 at cb (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/slide/lib/async-map.js:47:24) at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:263:14 at cb (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/slide/lib/async-map.js:47:24) at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:263:14 at cb (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/slide/lib/async-map.js:47:24) at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:263:14 at asyncMap (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/slide/lib/async-map.js:27:18) at next (/Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:234:5) at /Users/skiminock/Documents/projects/spark/node_modules/npm/node_modules/read-installed/read-installed.js:179:7 at LOOP (fs.js:1758:14) at _combinedTickCallback (internal/process/next_tick.js:67:7) at process._tickCallback (internal/process/next_tick.js:98:9)

Support Favicons?

Does this support Favicons also? It'd be great to see the icons for the desktop browser generated too.

Wrong default for `config.rootURL`

Copied from PR #68

I use ember-web-app with glimmer.js and my glimmer app is not in the root folder of my webserver, but with glimmer.js there is no need to define a rootURL. But now ember-web-app always resets the path to the icons etc to the root folder of the webserver. This happens with the following check:

var rootURL = config.rootURL || '/';

as @akatov mentioned in his PR the following would fix the problem:

var rootURL = config.rootURL || '';

This would also solve the problem for me. Did this make sense? Did I explained it well enough?

Doesn't work with ember-cli-deploy?

It seems to me that this does not work with ember-cli-deploy – do you know if this is something that could be accomplished within this addon either now or with some additional work (I could look into it if you like), or if you think it should be an ember-cli-deploy plugin?

Blueprints assume jshint is being used

Since ember-cli 2.12.0 the default linter is eslint. This addon always generates manifest.json with a jshint configuration. It would be nice if the addon could detect which linter is being used.

Current configuration /*jshint node:true*/
Expected for projects using eslint /* eslint-env node */

Issue with Apple Status Bar, Theme and Background settings

Is anyone having issues with these settings? I'm not able to update anything in these settings, it's defaulting to white every time. What am I doing wrong? manifest.js below...

/* eslint-env node */
'use strict';

module.exports = function(/* environment, appConfig */) {
  // See https://github.com/san650/ember-web-app#documentation for a list of
  // supported properties

  return {
    name: "Viti",
    short_name: "Viti",
    description: "An app for finding the closest vineyards to you.",
    start_url: "/",
    display: "standalone",
    background_color: "#202020",
    theme_color: "#202020",
    icons: [
    ],
    apple: {
      statusBarStyle: 'black-translucent'
    },
    ms: {
      tileColor: '#202020'
    }
  };
}

Looking for maintainer

I haven't been able to keep up with all the work that is needed to have the addon updated to the latest version of ember and adding all the requested features.

I would love to transfer the repo to someone that wants to continue the development of the addon.

Generate Pinned Site Metadata for win8/10 compatibility

See https://msdn.microsoft.com/en-us/library/bg183312(v=vs.85).aspx and https://msdn.microsoft.com/en-us/library/gg491732(v=VS.85).aspx

e.g. using meta tags

<meta name="application-name" content="Channel 9 Audio Player">
<meta name="msapplication-tooltip" content="Channel 9 Podcasts">
<meta name="msapplication-window" content="width=1024;height=768">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-starturl" content="/">

e.g. using browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
    <notification>
      <polling-uri  src="notifications/contoso1.xml"/>
      <polling-uri2 src="notifications/contoso2.xml"/>
      <polling-uri3 src="notifications/contoso3.xml"/>
      <frequency>30</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>

It would be nice to have an option to turn off the generation of these metadata. The app might already have a browserconfig.xml in place and we don't want to override it.

Support Localization

I have an application that requires localization. I'd like to be able to deliver a manifest that changes based on user locale. There's a minimal amount of content in the manifest itself that would require translation (name, short_name, description, maybe icons), but what would be nice is if that content could live in my existing translation workflow and I could populate the manifest at build time.

I think an approach could be something like:

  • detect supported languages
  • generate a manifest for each supported locale
    • use the addon to lookup a translation, something like const name = get(this, 'intl').t('ember-web-app.name');
    • update the manifest values with translations
  • user receives the manifest for their specific locale

What I'm not sure of, if this is something this addon should have as a feature or if there's another addon here that extends this one? I'm open to suggestions or ideas. I also have some cycles coming up that I could work on one or the other.

Safari pinned tab

Add option for Safari pinned tab

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#b91d47">

Add og:site_name?

Should we add an og:site_name tag and derive its value from name or short_name?

I had to add

<meta property="og:site_name" content="EmberMap">

manually to my site's index.html to get this title to show up in Slack's unfurling.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.