Android HTML5 add shortcut icon to home screen not consistant - android

We have HTML5 mobile website, when we try to add the site to the 'Home screen' by add to home screen icon. It doesn't work consistently. It shows the app icon sometime, sometime it shows default star icon.
Why android browser behaves like this? Is there any way to make this behaviour consistent.
We already tried,
http://www.mollerus.net/tom/blog/2010/06/web_app_homescreen_icons_in_android.html
Android | bookmark icons on homescreen
Configuring Android Web Applications
No success :(

https://realfavicongenerator.net/ does a good job at generating icons for all types of browsers.

Related

Push Notification in TWA shows an indicator in Chrome Icon instead app icon

I am building a Trusted Web Activity based on a Progressive Web App. Mostly everything works just fine, but the moment a web push notification is received by the device, in the android launcher the chrome app gets an indicator (small dot on the icon) instead of the actual TWA. I am using a virtual device from Android Studio (Android API 30) for testing this. I expected the indicator on the app icon instead of the Chrome icon. After clicking on the indicator the dot on the chrome icon disappears.
Screenshot of Android with indicator on Chrome icon
The first try was that I built it based on the svgomg-twa example and now I tried to create the TWA with bubblewrap explained here. Both options result in the same behavior like explained before.
I am happy to provide further details, but I am missing the starting point what could be responsable for this indicator behavior. So please just let me know if you need some more information.
I would be very happy if you could give me a starting point to figure this out.
Thanks in advance,
Matthias

How to implement the same Launcher icon on all Android Devices?

Recently, I am implementing the adaptive launcher icon in my android application. I have successfully implemented it.
I ran my application on some Gionee mobile( mostly i run my application on Stock Android) running on customized Android 6.0 like mi or Huawei. I found out that there is some kind of ugly mask the manufacturer has embedded in the customized Android which makes the App Icons ugly.
So, I downloaded other apps and found out that other apps also have this ugly mask but apps like Google Tez, Google PlayStore, and many other Google apps are somehow defying this ugly mask thing making their icons like the original. How are they doing it?
I thought by putting their launcher icons into mine could put an end to my misery and I will somehow get the insight of making the launcher icon more compatible.
Here is the result of putting Tez icon in my resource file.
As you can see there is that ugly mask in my icon on the left of google chrome and the right one is the original Tez app icon. How are they doing it?

How do Android Launchers start Chrome in Full Screen (WebApp) mode?

I've got a sticky situation. I'm developing a kiosk-style tablet application on JellyBean, and we're stuck with JellyBean.
We don't install a standard launcher on our Android tablets, and instead supply our own Home Screen/Launcher app, so that our application starts on system startup.
We were using a WebView for our GUI app. The WebView that comes with JellyBean is buggy and deficient in many ways, so our app doesn't work correctly in the WebView.
However, Chrome runs our app perfectly, so we want to switch to using Chrome, which we would launch from our own Home Screen application on startup.
We need to start it in full-screen mode, just like Launchers do when they launch any app/URL via a link that was placed on the Desktop.
I can't for the life of me find out how launchers pull this off.
I've tried adding --app="xxx", and/or --start-fullscreen to the /data/local/chrome-command-line file, but all to no avail. The additions options show up on the "chrome://version" screen in Chrome, but they have no effect.
Does anyone have any clue how they manage to launch Chrome in full-screen mode?
These tablets are all rooted tablets, completely under our own control, so no solution is out of bounds.
Thanks for any help!

Modify Progressive Web App background colour

I have a Progressive Web App which is capable of being added to home screen. When the home screen icon is tapped (on mobile) there is a (kind of) welcome page with icon that appears before opening the actual app.
I have set the background colour of that welcome screen to be blue in menifest.json. I need to make it brown. I have modified the menifest.json file and updated the website. But the mobile seems to have cached it permanently and it is still showing blue.
I have refreshed page many times and added the web app to home screen multiple times. But it is never changing.
I have also changed the cache name in service-worker.js. Yet no luck!
Plug in your device
visit chrome://inspect
Inspect the device / tab you are looking at for your site
In DevTools go to Network tab
Select 'Disable Cache'
Refresh your web app
Then try adding to homescreen
If you get the correct color it's a good indicator that your previous manifest was cached and you should consider a caching strategy, either file re-visioning the manifest.json file (i.e. manifest.12345.json) OR set appropriate headers.
One thing to note: on Android there is no way to update the icon / manifest details once it's added to homescreen - this is a known issue / bug.

Icon not showing on mobile

I'm building a website in WordPress and have bought the following theme: http://my.studiopress.com/themes/sixteen-nine/#demo-full .
This is currently my site
http://jiri.tourdog.nl/
When viewed on a mobile device, one is supposed to see a menu icon that one can click on to reveal a drop-down. When I visit the original theme-demo on my mobile device the icon shows like it's supposed to. However, when I check my own site I can't see the icon (although the part is press-able and shows the drop-down). On my laptop I can resize my screen and it'll also show.
So this leads me to believe this is not a WordPress issue nor is it an issue inside the theme (the css is exactly the same as the demo).
What could it be?
Summary: Icon doesn't show on my mobile device, does show on desktop, and am also able to see the original theme demo's icon on my mobile device.

Categories

Resources