I have PWA support in the application, and icons are not always visible on the screen.
After thoroughly examining all PWA forums, no answer seemed to solve the problem.
Here is the index.html file(web app manifest and icon attached):
<link rel="manifest" href="webmanifest.json" />
<link rel="apple-touch-icon" href="assets/icons/CC_192x192.png" />
The icon is provided in the mentioned location and accessible with the link. The web app manifest file is properly configured.
"name": "Name",
"short_name": "ShortName",
"id": "/",
"theme_color": "#000",
"background_color": "#fff",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/CC_192x192.svg",
"type": "image/svg",
"sizes": "192x192"
},
{
"src": "assets/icons/CC_192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "assets/icons/CC_512x512.svg",
"type": "image/svg",
"sizes": "512x512"
},
{
"src": "assets/icons/CC_512x512.png",
"type": "image/png",
"sizes": "512x512"
}
]
Please help.
Here are some sources I have read:
https://developer.chrome.com/en/docs/lighthouse/pwa/apple-touch-icon/
https://github.com/h5bp/html5-boilerplate/pull/1622
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
Related
I turned my site into a pwa, but the slash with the URL still appears, I made some changes to my manifest.json but so far I couldn't hide it, how to do it correctly?
This is my manifest.json
"lang": "pt",
"dir": "ltr",
"name": "GuiaCorretorPro",
"short_name": "GuiaCorretorPro",
"icons": [
{
"src": "https://painel.guiacorretor.com/public/favicon.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
},
{
"src": "https://painel.guiacorretor.com/public/favicon.png",
"type": "image/png",
"sizes": "144x144",
"purpose": "any"
}
],
"theme_color": "#341864",
"background_color": "#9b67f7",
"start_url": "/auth/login",
"display": "standalone",
"orientation": "portrait",
You need to add a scope to your manifest.json file for it
"scope": "https://painel.guiacorretor.com/"
The scope member is a string that defines the navigation scope of this web application's application context. It restricts what web pages can be viewed while the manifest is applied. If the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window
https://developer.mozilla.org/en-US/docs/Web/Manifest/scope
I'm trying to make a PWA using Vite and the Quasar framework (Vite Plugin).
My manifest and icons are all stored in the root folder of my project, but the manifest somehow can't find them.
When I run my application in dev mode, everything works fine, but when I build and host my application the manifest file gets a lot of errors:
property 'start_url' ignored, URL is invalid
property 'src' ignored,
URL is invalid
Icon URL 'android-chrome-256x256.png' failed to parse
...
This is my site.webmanifest file:
{
"name": "foo",
"short_name": "foo",
"start_url": "/index.html",
"id": "/",
"description": "foo",
"display": "fullscreen",
"background_color": "#D3D5E1",
"theme_color": "#D3D5E1",
"orientation": "portrait-primary",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png",
"purpose": "any"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
I link to it in my index.html file: <link rel="manifest" href="/site.webmanifest" />
Could somebody please tell me what I'm missing?
It seems to me I'm doing something wrong in my relative paths, but I tried a lot to no avail.
I've also tried to place the icons in the public folder, but that didn't work.
Thanks in advance!
I am trying to build a PWA, and in that process have added a manifest file to of my webpage, but I am getting "No Manifest Detected" in the Application tab in Chrome Dev Tools.
I have seen other threads on this and have tried solutions like restarting, clearing the cache etc. but to no avail.
I tried some other tools like https://manifest-validator.appspot.com/ and they don't seem to show any issues in the manifest file.
You can also try the website at https://beegle.app/apporter-book-help and see that when you do "view source", you can find manifest file added in header and the manifest file link working fine too.
Here's how it has been added
<link rel="manifest" href="/manifest.json">
Here's how the file looks like:
{
"name": "Beegle Apporter",
"short_name": "Apporter",
"icons": [{
"src": "/beegle-logo-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "/beegle-logo-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/beegle-logo-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/beegle-logo-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/beegle-logo-256x256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/beegle-logo-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "/apporter-book-help",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
Any suggestions and thoughts on what could be going wrong?
Finally managed to solve it. I was using some plugin which was adding "body" tag within "head", and somehow that was causing the manifest to not get detected.
Flutter version: 1.19.0-4.0.pre
I am trying to generate a PWA app using Flutter web, but when I open the web app, it doesn't behave as a PWA should and it doesn't show add to home screen banner either on my android device.
Here's my manifest.json file:
{
"name": "Flutter PWA Demo",
"short_name": "PWA Demo",
"start_url": ".",
"scope": ".",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#E50D7F",
"description": "A Flutter pwa application.",
"orientation": "portrait",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
I tried it on master and dev but it doesn't work. It doesn't show add to home screen option on device or desktop chrome browser.
Firt become sure that you have registered "flutter_service_worker.js" in your "index.html" file, just like below:
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/flutter_service_worker.js");
});
}
Then open your pwa on chrome, right click on page and select "Inspect" option. Then go to "Application" tab and check if there is an error for "Manifest" and if there is you should fix it.
Then check "Service Workers" tab to see if "flutter_service_worker.js" is registered.
If it is registered and the "Manifest.json" file works fine, then you should see "Add to Home screen" option.
Can we change the style of the window that host Blazor offline apps, Like changing title bar color or set an icon or change default window back color.
yes - in the manifest.json - see https://pwa-workshop.js.org/1-manifest/#manifest-fields
example:
{
"name": "myapp",
"short_name": "myapp",
"start_url": "./",
"display": "standalone",
"background_color": "#B4ECF9",
"theme_color": "#F00BAA",
"icons": [
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}