I am trying to add PWA functionality to an existing Nuxt js website and i get this error in the console:
Error while trying to use the following icon from the Manifest:
http://localhost:3000/_nuxt/static/icons/icon-144x144.png (Download error or resource isn't a
valid image)
and this warning in the application tab Manifest:
actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-72x72.png does not match specified size (72x72px)
actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-96x96.png does not match specified size (96x96px)
actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-128x128.png does not match specified size (128x128px)
and the same warnings for the rest of the icons.
manifest object content:
manifest: {
short_name: 'ProjectName',
name: 'Project Name',
start_url: '/en/',
theme_color: '#f0b54d',
display: 'standalone',
background_color: '#f0b54d',
orientation: 'portrait-primary',
icons: [
{
src: "./static/icons/icon-72x72.png",
sizes: "72x72",
type: "image/png"
},
{
src: "./static/icons/icon-96x96.png",
sizes: "96x96",
type: "image/png"
},
{
src: "./static/icons/icon-128x128.png",
sizes: "128x128",
type: "image/png"
},
{
src: "./static/icons/icon-144x144.png",
sizes: "144x144",
type: "image/png"
},
{
src: "./static/icons/icon-152x152.png",
sizes: "152x152",
type: "image/png"
},
{
src: "./static/icons/icon-192x192.png",
sizes: "192x192",
type: "image/png"
},
{
src: "./static/icons/icon-384x384.png",
sizes: "384x384",
type: "image/png"
},
{
src: "./static/icons/icon-512x512.png",
sizes: "512x512",
type: "image/png"
}
]
},
i tried to apply the Nuxt way of importing the icons by creating an icon object in nuxt.config.js file like this:
icon: {
iconSrc: './static/icons/icon-512x512.png'
}
it does not recognize it at all and says that this project does not have an icon to show.
i notest another error in the console that says:
GET http://localhost:3000/_nuxt/static/icons/icon-144x144.png 404 (Not Found)
it show different icon with every refresh.
what i tried: - i tried different icons several times. - i tried to use vanilla js approach to write Manifest object. - i tried to use Nuxt PWA approach to import the icons.
screen shot of Manifest tab:
screen shot of network tab:
it says that icon-144x144.png is a GIF file!! which is weird.
so any help plz.
