san650 / ember-web-app Goto Github PK

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

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?

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.

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
  • assume a supported addon like ember-intl or ember-i18n
• 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.

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

See discussion in #47

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)

Add option for Safari pinned tab

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

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

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

ember-cli will compose all the URLs you need, there isn't any need to manage this within ember-web-app: https://github.com/san650/ember-web-app/blob/master/lib/apple-link-tags.js#L34

When allowing ember-cli to handle the URL composition you end up with values like this:

<link rel="apple-touch-icon" href="https://assets.dockyard.com/https://assets.dockyard.com/assets/images/badge192-5bfe81121b638c30dc2fe97375428477.png" sizes="192x192">

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.

Apple link tags are being generated with undefined when there isn't a root url set.

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

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.

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.

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.

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. 

Add a configuration option to add a startup image

<link rel="apple-touch-startup-image" href="/launch.png">

Specifications https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6

It's rendering something like...

<link rel="apple-touch-icon" href="/icons/apple-touch-icon-76037cc88bdbff9956a0378c910374be.png" sizes="undefined">

The expected behavior would be to not include the sizes attribute when is not available

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?

• Generate fingerprinting for manifest.json file
• Use broccoli-asset-rev's prepend option
• Add the correct file name to the meta tag <meta name="manifest"...
• Allow to turn off the fingerprinting of manifest.json file (or at least document how to do it with broccoli-asset-rev).

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 😸

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.

Register images as

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

instead of

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

I understand that the precomposed flag indicates apple to use the images as-is (without adding gloss etc.).

See http://stackoverflow.com/questions/5110776/apple-touch-icon-for-websites

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.

Validate the manifest (all of them) and show warnings on build.

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.

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

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'
    }
  };
}

• Add a configuration option to give the manifest file a different name