Custom Splash Screen for PWAs

[sidrao2006]

Currently in Chrome version 83, the splash screen has no controls. This is especially important when we need to fetch huge amounts of data from the server and the user has to stare at an icon and app name.

Splash screen design can be improved.....for example, json can be used to completely customise the splash screen with progress bar or loaders

If customisation would be a tough job, then the splash screen could just be made better by Chrome itself for all PWAs

[andreban]

Thanks for filing this. I filed an issue on the Chrome bug tracker for this, as we'd need the browser to support this first: http://crbug.com/1101362

[andreban]

On a separate note, have you checked how the application is performing against the Web Vitals metrics and the Quality Criteria for Trusted Web Activity? Even with a progress bar / loader / spinner on the splash screen, taking a long time to load the application will lead to bad user experience, which will likely be reflected on Play Store ratings, reviews, etc. There are many strategies that can be used to deliver an useable screen to the user ASAP then load the remainder of the content in the background.

[PEConn]

The splash screen covers two things - the browser launching and the page loading. We can't really get away from there being a delay when the browser launches (especially when it wasn't already running, browsers are pretty big and talk some time to load).

Ideally though for your website, there shouldn't be a massive delay between the navigation and content appearing on the screen. In the future we may punish websites that take too long to load, so the best strategy would be to have some parts of the page load quickly (the surrounding template part, which could be served by a ServiceWorker) and then have the content load take longer. With this approach you have more control over the experience your users get when the content is loading (and it will also improve your site on desktop and when visited from the browser).

[sidrao2006]

Thanks for replying André, the speed of my website rendering pretty ok, however most native apps have amazing and customized splash screen. Due to this, PWAs are not able to blend in with the native apps. The customisation would make a great difference in the look and feel of the app. Thank you for your time and consideration

…

On Wed, 1 Jul 2020, 8:58 pm André Cipriani Bandarra, < ***@***.***> wrote: On a separate note, have you checked how the application is performing against the Web Vitals metrics <https://web.dev/vitals/> and the Quality Criteria for Trusted Web Activity <https://web.dev/using-a-pwa-in-your-android-app/#quality-criteria>? Even with a progress bar / loader / spinner on the splash screen, taking a long time to load the application will lead to bad user experience, which will likely be reflected on Play Store ratings, reviews, etc. There are many strategies that can be used to deliver an useable screen to the user ASAP then load the remainder of the content in the background. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#218 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AP335W3QAJHFJBA4DCJZZN3RZNIZPANCNFSM4ONQKR6Q> .

[sidrao2006]

Current splash screen behaviour

Expected splash screen behaviours

[nitzanashi]

on another context, is there an option to remove the splash screen from within the twa-manifest config?

[andreban]

@nitzanashi the splash screen prevents a flash of white content which leads to bad user experience. See #218 (comment) and #218 (comment). From my perspective, providing a way to remove it in Bubblewrap is a footgun, as it will invariably lead to worse apps.

[andreban]

It sounds like you'd need a few things:

1. Use an image for the splash screen that is different from the image used for launcher icons (Allow using a different image from iconUrl for the Splash Screen #226)
2. Set the splash screen to use the whole screen (customize getSplashScreenScaleType and allow setting it to FIT_XY)
3. Use an AnimationDrawable as the splash screen image.

Number 1. only requires changes in Bubblewrap. 2. requires changing android-browser-helper (shouldn't be a problem). 3 requires changes in Chromium. No clue how feasible this is. @PEConn may have a better idea.

[nitzanashi]

@andreban thanks for clarification!
I wasn't aware of these effects, then I shall keep splash option 👍🏻

[sidrao2006]

Can other image formats like .gif be used for splash screen?
If so then a short video clip can be cached a displayed and upon page load, the rendered page can interrupt the video and close it, however formats like mp4 may cause android to implement it as a video and prepare the screen and activating other video features which we don't want

[PEConn]

The splash screen hides the following:

1. The TWA shell starts up.
2. The TWA shell launches Chrome.
3. Chrome loads the page.

During step 1, the TWA shell is visible on screen and during steps 2 and 3 Chrome is on screen. We essentially use slight of hand to make the user not notice that we're switching apps. The TWA shows an image then essentially takes a screenshot of itself and passes it to Chrome. Chrome then starts up with that image and once the web page has something to display, it dismisses it.

(We did try quite a few other options such as passing around Android RemoteViews or having Chrome try to load the page in the background and only launching Chrome when there's something to display on the page - all of them ran into technical limitations in either Chrome or Android.)

So, if you wanted to display an animation, what you could do is have the TWA shell display an animation, then switch over to Chrome which would show a screenshot of the end-state of the animation, but that would just mean that the user has to sit through the whole animation before the page starts loading.

[andreban]

@sidrao2006 The goal is to minimize the time spent on the splash screen. So, another alternative is for the web app to do load the first render ASAP and replace the splash screen with its own web-based splash, if they need to load additional resources, where they'll have full control.

[sidrao2006]

@andreban good idea, but as @PEConn mentioned, this is not possible as the splash screen is displayed right after the user opens the app and till chrome is launched and the render occurs
So the entire spash screen has to be managed by the TWA
Since the TWA is written and run in android, I think an android configuration used to display a splash screen can be used in foreground, while the TWA shell starts up and launches Chrome in background. After the loading, once again Chrome can work with a screenshot or directly render its first page as the android splash screen fades away

If transition is smooth enough, then the animation can be continued to Chrome until it completely renders the page
I hope this java splash screen can work with TWAs.

[sidrao2006]

@andreban any updates on this?

[dseeker]

Animated SVGs are working pretty well in Chrome, are they supported in the TWA context?

[andreban]

No. The splash screen is generated on Android code, which doesn't support SVGs.