rails_real_favicon: site.webmanifests does not link to asset paths

The generated site.webmanifest looks something like this:

{
    "name": "App Name",
    "short_name": "App Name",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#3F4550",
    "background_color": "#3F4550",
    "start_url": "/",
    "display": "standalone"
}

As a result, when shipping through Rails, the icon paths are still hard coded and can’t be found. The right things is to generate a site.webmanifest.erb file, and update the paths to use the asset path helper.

{
    "name": "App Name",
    "short_name": "App Name",
    "icons": [
        {
            "src": "<%= asset_path 'favicon/android-chrome-192x192.png' %>",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "<%= asset_path 'favicon/android-chrome-512x512.png' %>",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#3F4550",
    "background_color": "#3F4550",
    "start_url": "/",
    "display": "standalone"
}

As a result, the _favicon.html.erb needs to be updated to link to a .txt file instead oddly.

<link rel="manifest" href="<%= asset_path 'favicon/site.webmanifest.txt' %>">

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17 (7 by maintainers)

Commits related to this issue

Fix for issue #26 — committed to RealFaviconGenerator/rails_real_favicon by phbernard 6 years ago
Fix related to #270 (web site issue), see #26 — committed to RealFaviconGenerator/rails_real_favicon by phbernard 6 years ago
Fix for #26: register the .webmanifest to the asset pipeline — committed to RealFaviconGenerator/rails_real_favicon by phbernard 6 years ago
After some review, it appears that we simply need to tell Rails to register .webmanifest as something to respect and not automatically add a .txt extension to. RealFaviconGenerator gem ran into this i... — committed to network-for-good/nfg_ui by jonathanroehm 5 years ago

Most upvoted comments

Asset pipeline in dev mode: this is the default I get immediately after running rails new MyApp (I’m running Rails 5.1.5). I suppose this is because the default value for assets.debug is true, yet your should make your own experiments to find out for sure.

Alright, I now reproduce the issue by tuning my development environment with:

  config.assets.compile = false
  config.assets.debug = false

and precompile the assets manually with:

  rake assets:precompile

I could fix this by registering the .webmanifest extension in config/application.rb:

config.assets.configure do |env|
  env.register_mime_type('application/manifest+json', extensions: ['.webmanifest'])
end

With this code, rake assets:precompile now keeps the .webmanifest extension (instead of appending a .txt extension).

Before I implement something, could you tell me if that works on your side?

phbernard on Mar 7, 2018

Works like a charm!

cbetta on Mar 7, 2018

Yup! Freshly published version 0.0.10 generates config/initializers/web_app_manifest.rb. No need to modify config/application.rb. Does it work for you?

phbernard on Mar 7, 2018

When running the Rails procedure on a fresh Rails 5.1.5 app, here is what I observe:

app/views/application/_favicon.html.erb references the manifest with:

<link rel="manifest" href="<%= asset_path 'favicon/site.webmanifest' %>">

When the partial is rendered, the line above becomes: (it has the final .txt extension, as you mention)

<link rel="manifest" href="/assets/favicon/site.webmanifest-a5839a3570040282686561dfbf45870935a5b946c9660d7ed14838c86458f3d6.txt">

If I visit the link above (http://127.0.0.1:3000/assets/favicon/site.webmanifest-a5839a3570040282686561dfbf45870935a5b946c9660d7ed14838c86458f3d6.txt), I get the manifest, as expected:

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/assets/favicon/android-chrome-192x192-adb23fae0554a51fcc7496d156cd5019ca2ee625ca7e1f06e8897ed135153732.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/favicon/android-chrome-512x512-458cca9d7c337d38070e454a7497fec77969e6dc7fe94d9d306171ad505b41ab.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Although this is not the perfect behavior of having a true site.webmanifest file, the solution works. In particular, I didn’t have to edit _favicon.html.erb.

But you seem to face a different situation?

phbernard on Mar 7, 2018