How to add a color to a title bar PWA? - progressive-web-apps

I have my current app I am working on, the problem is I want to make the title bar of some color rather than classic white, but is not working, I saw Starbucks pwa and they have the title bar green how to add color ?, the theme color simply shows only when the app loads on windows then defaults back to white.
{
"short_name": "app",
"name": "app",
"icons": [
{
"src": "/icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/icon-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"start_url": "/app",
"display": "standalone",
"theme_color": "#0d4c73",
"background_color": "#00FF00",
"description": "yada yada yada"
}
my index.html looks like
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="bla blaba" />
<meta name="keywords" content="Keywords" />
<!-- <meta name="theme-color" content="#383838" /> -->
<meta name="background-color" content="#4222e1" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- IOS -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="red" />
<meta name="apple-mobile-web-app-title" content="PWAGram" />
<!-- Windows -->
<meta name="msapplication-navbutton-color" content="red" />
<meta name="msapplication-TileColor" content="red" />
<meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
<meta name="msapplication-config" content="browserconfig.xml" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>App</title>
</head>

Add this inside your HTML's <head>
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0ed3cf">
<meta name="msapplication-TileColor" content="#0ed3cf">
<meta name="theme-color" content="#0ed3cf">

You must add a theme_color key to your manifest.json. More information can be found here.

Related

PWA Icon on iOS is not available after adding to home screen

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

PWA Manifest can't find resources

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!

Including a link for manifest.json file crashes Lighthouse audit in chrome

The lighthouse audit hangs while running an audit.
I tried removing the manifest.json link and it runs the audit fine.
here's the manifest.json file
{
"name": "Our School",
"short_name": "ourschool",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff",
"icons": [
{
"src": "/img/icon-72x72.png",
"type": "image/png",
"sizes": "72x72"
},
...
]
}
here's how I linked the file in HTML.
<link rel="manifest" href="/manifest.json" />
Make sure the "Clear storage" checkbox is unchecked, you can find this in the in lighthouse settings.

Getting No Manifest Detected error while building PWA

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.

Facebook fails w/ opengraph

For whatever reason it looks like facebook is unable to get the OG metadata for our pages:
http://graph.facebook.com/10150555815531349
{
"url": "http://www.nydailynews.com/gossip/gotcha-fabulous-photos-june-21-28-gallery-1.77715",
"type": "website",
"title": "http://www.nydailynews.com/gossip/gotcha-fabulous-photos-june-21-28-gallery-1.77715",
"updated_time": "2011-12-28T19:32:54+0000",
"id": "10150555815531349"
}
Even though all the metadata is on the page:
<meta property="og:title" content="Gotcha! The most fabulous photos for June 21-28">
<meta property="og:type" content="article">
<meta property="og:image" content="http://assets.nydailynews.com/polopoly_fs/1.77716!/img/httpImage/image.jpg_gen/derivatives/searchthumbnail_75/image.jpg">
<meta property="fb:app_id" content="366487756153">
What is going on?
I ran it thru the linter too ad it is working fine:
I used:
http://www.nydailynews.com/gossip/gotcha-fabulous-photos-june-21-28-gallery-1.77715
on: https://developers.facebook.com/tools/debug
And I also checked your graph link above and got different results. Facebook must have been caching it on you before.
{
"url": "http://www.nydailynews.com/gossip/gotcha-fabulous-photos-june-21-28-gallery-1.77715",
"type": "article",
"title": "Gotcha! The most fabulous photos for June 21-28",
"image": [
{
"url": "http://assets.nydailynews.com/polopoly_fs/1.77716!/img/httpImage/image.jpg_gen/derivatives/searchthumbnail_75/image.jpg"
}
],
"site_name": "NY Daily News",
"updated_time": "2011-12-29T03:00:23+0000",
"id": "10150555815531349",
"application": {
"id": "366487756153",
"name": "New York Daily News",
"url": "https://www.facebook.com/apps/application.php?id=366487756153"
}
}