問題点

本番環境においてgoogle developer toolのconsole上でmanifest.jsonファイル内からicon画像が呼び出せないとのエラーが出る。
これがエラー文(developer toolのconsole上で確認)
Error while trying to use the following icon from the Manifest
問題となっていたmanifest.jsonファイルなどは以下の通り。

manifest.json

"icons": [
       {
            "src": "favicons/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "favicons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
]

_favicon_tags.slim

= favicon_link_tag asset_path('favicons/favicon.ico')
= favicon_link_tag asset_path('favicons/apple-touch-icon-57x57.png'), rel: 'apple-touch-icon', sizes: '57x57', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-60x60.png'), rel: 'apple-touch-icon', sizes: '60x60', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-72x72.png'), rel: 'apple-touch-icon', sizes: '72x72', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-76x76.png'), rel: 'apple-touch-icon', sizes: '76x76', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-120x120.png'), rel: 'apple-touch-icon', sizes: '120x120', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-152x152.png'), rel: 'apple-touch-icon', sizes: '152x152', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-57x57-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '57x57', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-60x60-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '60x60', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-72x72-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '72x72', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-76x76-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '76x76', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-114x114-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '114x114', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-120x120-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '120x120', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-144x144-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '144x144', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-152x152-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '152x152', type: 'image/png'
= favicon_link_tag asset_path('favicons/apple-touch-icon-180x180-precomposed.png'), rel: 'apple-touch-icon-precomposed', sizes: '180x180', type: 'image/png'
= favicon_link_tag asset_path('favicons/android-chrome-144x144.png'), rel: 'icon', sizes: '144x144', type: 'image/png'
= favicon_link_tag asset_path('favicons/android-chrome-192x192.png'), rel: 'icon', sizes: '192x192', type: 'image/png'
= favicon_link_tag asset_path('favicons/manifest.json'), rel: 'manifest'

やってみたこと

問題点を洗い出しを行うためにしたことは以下の通り。

localでは

実際に問題となっている画像のurlを実際に打ってみて見てみた　
→しっかりと画像が出た
developer_toolでapplication、さらにサイドバーのmanifest.json確認
→問題となっている画像もmanifest.jsonでiconとして呼び込めている
publicから問題となっている画像を引っ張ってこようとした（_facicon_tags.slimでpublicディレクトリ配下への画像にパスを通した）
→呼び込めなかった

本番環境では

developer tool のconsoleを見た
　→manifest.jsonがおかしい(このファイル内で指定している画像が読み込めない)
developer toolのnetworkを見た
→同じくdeveloper_toolのapplication、サイドバーのmanifest.jsonについて確認
→問題の画像とサイズが一回り大きいものがsome of icons can not be loadedとなっている
→manifest.json file自体は読み込めている
問題となっている画像をassetsのcomple後でのurl(hash値を持っているもの)で検索した
→しっかりと画像は表示された
compile前の画像urlを打ってみた
→アイコンは全て表示されなかった

やってみたことを受けて

わかったこと

ローカル環境ではうまくいっているが、本番環境ではうまくいかなくなってる。
つまり、ローカル環境と本番環境との差異が存在しその違いが原因となっている。

先輩のアドバイスを受けて

解決策

以下のように変更を加えることで解決した。

manifest.json.erb


"icons": [
        {
            "src": "<%= asset_path 'favicons/android-chrome-144x144.png' %>",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "<%= asset_path 'favicons/android-chrome-192x192.png' %>",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]

assets_pathで画像へのpathを通してあげた(hash値を含んだパスを指定できる)

なぜそうなるか

assetsに関してのlocalと本番環境での違い(原因)から生じたものだったから。
local環境、本番環境においてもassets配下にあることでcompileされ画像のファイル名にhash値が付与された画像が生まれる。一方、local環境ではcompile前の画像(hash値を持たない画像)も存在するため、修正前のmanifest.jsonでの画像へのパスでも表示されてしまった。

終わりに

今回のエラーにおいて重要だったのは、エラー文から画像へのパスがおかしいとあたりをつけることだった。

本番環境でのassets/favicons/android-chrome-144x144.png が 404 エラー

問題点