In other words, can a PWA splash screen just be a solid custom color?
In my PWA, the splash screen occurs so quickly, there's not enough time for a user to register what they're seeing. It could be perceived as an error/problem or just simply sloppy design.
For reference, the site is online, I'm using wireless (LTE) on my phone, and service worker cache disabled. I haven't yet tried it with the service worker cache enabled, but I assume the splash will disappear even faster!
For a PWA splash screen, I'd rather just have a custom solid color (which would match my website background).
Use an icon that is the same color as your splash screen background color. The icon will then not be visual different from the rest of the splash screen.
According to https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen, a splash screen must have:
A name property in the manifest
A background_color in the manifest
Icons set with one at least 512px by 512px
The Icon being PNG format
This does not leave the option to leave out any of the previous settings.
However, you can set the icon to be a solid color with the same color as the background. This should make it so that the user cannot see any icon.
Related
Im building my first react page and everything is all fun and exciting, but on mobile (ios in my case) There seems to be an underlying white background that appears on page reload (flashing) and when i drag the page too far. Its also visible behind the address bar.
I have checked various other Websites and usually on dark pages the addressbar is a kind of translucent black.
How do i achieve this?
I have already changed the background color in my body element etc. (hopefully not in the wrong place)
I would like to change the color of the Android navigation bar on the web when I add the page on the Android home screen (Progessive Web App) but when I open the PWA, the color of the Android navigation bar is black and I want Change the color to white. In the manifest, you can change the color of the theme and I do, but still follow the color black.
Is it possible to do that?
I mean the Android navigation bar, not the notification bar.
As far as I know it is currently not a PWA supported feature.
You can add a meta tag to your HTML page.
<meta name="theme-color" content="#225577"/>
You can play with manifest.json and set "theme_color":"#000000", "background_color": "#000000" - your browser might pick those colors and apply them to the nav bar (or might not, Samsung's standard browser used to ignore this setting and never changed nav bar color). It seems there's still no such feature in PWA (which existis in Android native apps) that allows specifing navbar color alone.
The color of the navigation bar doesn't work with dark theme. Change to light theme and it will work.
I believe there is still no workaround for this in 2023.
The Android navigation bar's background color in PWAs depends on the theme setted in your phone settings. If your phone is set as dark mode, it will appear dark. Otherwise, it will appear as white in PWAs.
That's why it is probably a good idea to add toggle theme functionality in your PWA.
Our web app has a background image attached to its body, with background-size: cover. This works fine on iPad, but when adding the app to home screen, the background is removed.
Removing "apple-mobile-web-app-capable" helps, but we need this feature.
I can't seem to solve this, and would really love some inputs.
App: https://mementor.easydays.me
Thank you!
When I add the site to the home screen as a web app, and then click on the icon, the screen is white for a few seconds until the page loads, and then the background appears to load correctly.
The white background is used in place of a web app startup image, which you can specify like this:
<link rel="apple-touch-startup-image" href="/startup.png">
I recommend looking into Apple's Startup Images (more info on that here).
Does this solve your background image problem?
As a dimming/darkening work around to the notorious white flash in between Chrome page loads, how could the small default loading notification (below) be exploited to cover the entire screen?
In other words, is it possible to create an entire wall of text in between page loads such that a high contrast extension could then darken the entire screen just as it darkens a small portion here?:
This is quite hacky, but for good reason. All other solutions no longer work for Chrome 40+:
https://superuser.com/questions/580228/prevent-white-screen-before-loading-page-in-chromium
Google Chrome - Override White Blank page between webpage loads
https://superuser.com/questions/831742/how-do-you-change-chromes-background-color
No, it's not possible to change what that status bar shows, not without digging into Chromium's source (but then you could just change how about:blank looks).
The idea is indeed way too hacky.
There is a black flicker for a fraction of a second just after the splash screen is shown. The main page is image heavy, probably it is because of that. While debugging I can see that some symbols are being loaded? Is it due to that? Is there any way to mask it? Or how do I show the MainPage faster with out the flicker. Can I preload the MainPage while the splash screen is shown?