Icon purpose "splashscreen" and splashscreen text

[NekR]

Chromium already has splashscreen generated based on Web Manifest icons. Even though it's great to have, it's not ideal. App's icon, especially one with purpose "maskable", isn't always the best thing to put onto splashscreen.

It can kinda be "hacked" to show either maskable or normal icon on the splashscreen, but it isn't really enough if your brand's icon is of different shape. It would be great to introduce purpose: "splashscreen" for Web Manifest icons.

Also, having an option to not draw app's name text on the spashscreen would be great too.

PS. I totally get that it's Chrome's only feature, but it's based on the Web Manifest, so I guess it makes sense to discuss here.

[dominickng]

We examined this in #510 and were unable to come to a consensus on how to actually do this.

[NekR]

Thanks for info. I'm actually already polyfilling it for iOS. I added purpose "apple-splashcreen" into my manifest and generated splashscreen for iOS on the fly from it. Here is an example: https://m.vk.com/manifest.webmanifest?ver=205

It's interesting to see that that issue is almost 4 years old. I imagine it would've been very welcome if it was added and implemented in some way.

[FluorescentHallucinogen]

+1 for this idea. :+1:

Some developers want to use different splash screen icon than app icon, e.g. animated SVG icon.

I totally get that it's Chrome's only feature Chromium already has splashscreen generated based on Web Manifest icons.

BTW, for some reason, it doesn't work for Desktop PWAs, only on Android.

[dominickng]

We didn't implement splash screens for desktop because we don't normally have the same amount of load latency on desktop as on Android.

[FluorescentHallucinogen]

@dominickng I've opened https://crbug.com/1049589.

[Pauldb8]

Can we also, remove the splashscreen altogether ? My PWA loads quite fast, and I already provide a customized splashscreen. Could there be an option "splashscreen": "false" ?

[marcoscaceres]

My PWA loads quite fast, and I already provide a customized splashscreen.

Might it be dependent on the device's capabilities and hardware?

Could there be an option "splashscreen": "false" ?

Do you mean for it not to show the icon when loading at all? It might be safer to let the browser decide, as it can determine how quickly it can spin up a browsing context.

[lauramorinigo]

Can we also, remove the splashscreen altogether ? My PWA loads quite fast, and I already provide a customized splashscreen. Could there be an option "splashscreen": "false" ?

I agree with @marcoscaceres that it's better to have splashscreen by default as the idea is to not rely on connection and improve how fasr the user perceives loading, anyway, I've recently been asked how to customize splashscreens beyond the default icon in the manifest file. A new member with alternatives (i.e. animated icon , animation duration) to include in splashscreen would be good especially to get closer to native apps.

[marcoscaceres]

A new member with alternatives (i.e. animated icon , animation duration) to include in splashscreen would be good especially to get closer to native apps.

Thanks @lauramorinigo. The problem that we run into here - when dealing with any assets and animation timing - is that we risk creating a new layout/markup language inside the manifest.

Ideally, that anything that requires layout and animation would be handled by a HTML/CSS/JS in the "start_url". This is the same as in native apps (e.g., in iOS), whereby one just uses a standard "view controller" to lay out their splash screen (e.g., [1]). Ideally, the resources for "start_url" are already cached in a service worker, so when the app starts, the engine can quickly compose and render the page exactly as the app creator intended.

[1] https://www.youtube.com/watch?v=s4skYI4GaOg

[NotWoods]

If there is some predicatablity in the splash screen layout, it would make it easier to create transitions using HTML/CSS/JS. I believe some native apps such as Google Photos start with a static splash screen image, then switch to an animated version once the app loads.

If the size of the splashscreen icon and its position on the screen was standardized or configurable, then it would be easier to build an animation.

[andreban]

We received requests in Bubblewrap to enable different images for the application icon and splash screen for TWAs (eg: https://github.com/GoogleChromeLabs/bubblewrap/issues/218 and https://github.com/GoogleChromeLabs/bubblewrap/issues/226). This is possible for TWAs, regardless of changes to the Web Manifest, but does highlight a bit of the developer need on this.

Another interesting point development is that Android 12 is making splash screens the default for all applications (see https://developer.android.com/guide/topics/ui/splash-screen).

[kenchris]

@NotWoods yes I was talking to @andreban before and suggested that we do something like the below. (Based on ScreenLock design).

If you request the splashscreen lock as one of the first things in your code, you can delay the dismissal and avoid adding another splash screen like Twitter does, or you can even find our what image was used and where it exactly was placed in the viewport and then flip to it and add animations

[SecureContext]
partial interface Navigator {
  [SameObject] readonly attribute SplashScreenLock splashscreenLock;
};

[SecureContext, Exposed=(Window)]
interface SplashScreenLock {
  Promise<SplashScreenLockSentinel> request(optional SplashScreenLockOptions options);
};

[SecureContext, Exposed=(Window)]
interface SplashScreenLockOptions {
   rootTransition: "none" | "fade-out"
}

[SecureContext, Exposed=(Window)]
interface SplashScreen {
  required DOMRectReadOnly imageBoundingBox;
  required USVString imageSrc;
  DOMString sRGBHex;
}

[SecureContext, Exposed=(Window)]
interface SplashScreenLockSentinel : EventTarget {
  readonly attribute boolean released;

  readonly DOMString backgroundColor // sRGBHex: html#valid-simple-colour
  readonly USVString imagesrc;

  DOMRectReadOnly imageBoundingBox(); // may change with resize

  Promise<undefined> release();
  attribute EventHandler onrelease;
};

@diekus

[andreban]

Giving developers more control over when / how to dismiss the Splash Screen would definitely be great.

@b1tr0t

[zacharymichaelmoore]

A splash screen is an intentional and effective design choice. It's like a welcome mat to your home. You wouldn't want someone to be magically teleported from outside your home into the living room, it would be a frightening experience for them. So the splash screen is like a soft introduction to the style and branding of the app and it's a familiar element, regardless of UI changes on the start_url like dashboard updates and all the crazy red badging and popups that people will see.