1391271 - Add splash screen for standalone PWA

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: Web Apps (PWAs), enhancement, P5)

Description

[James Willcox (:snorp) ([e-mail]) (he/him)]

We take long enough to start up that we should probably have a splash screen for standalone PWAs. We can just use the icon from the manifest.

Comment 1

[David Bruant]

In which case does it take "long enough" to start up?
Do you have a test case website?

One of the key advantages of PWA is to have websites to load instantly initially because the service worker has its own programmable cache. Taking long to start up seems like an implementation problem that should be fixed. 
There is no splash screen for Firefox for Android, why should there be a need for one for any standalone PWA?

Comment 2

[Andreas Bovens [:abovens]]

We can create a splash screen from some of the assets available in the manifest: icon, background color, name. As for why this is needed, https://developers.google.com/web/updates/2015/10/splashscreen gives a bit of background. In theory, you'd expect this isn't needed, but in reality, you end up encountering white startup pages from time to time: a splash screen gives a smoother experience.

Comment 3

[Wesly Huang (EPM)]

James, do you think this is something your team can help on? Thanks.

Comment 4

[Nevin Chen(Not active on Bugzilla)]

Some web sites have their own splash screen (e.g. https://babe.news) so I wonder if this is needed.

Comment 5

[James Willcox (:snorp) ([e-mail]) (he/him)]

(In reply to Nevin Chen [:nechen] from comment #4)
> Some web sites have their own splash screen (e.g. https://babe.news) so I
> wonder if this is needed.

The splash screen here is to have something on the screen before Gecko comes up.

> James, do you think this is something your team can help on? Thanks.

Nope, sorry.

Comment 6

[Nevin Chen(Not active on Bugzilla)]

What if the icon is small? What background should we use for the splash screen?
I personally like splash screen but I can't find a good design for other websites in general.

Suggest making this feature low priority.

Comment 7

[Andreas Bovens [:abovens]]

Nevin, for reference, look at how this is implemented in Chrome, Opera, etc. 

- The background_color property defines the splash screen's background color.
- The icon property defines the icon: I suggest we use a size similar to the one we place on the Home screen (144x144px?). According to https://developers.google.com/web/fundamentals/web-app-manifest/, "Chrome chooses the image that is closest to 128dp for the device."
- For the text, we can use the name property, with a fallback to short_name.

Comment 8

[Sorin Davidoi]

> Some web sites have their own splash screen (e.g. https://babe.news) so I wonder if this is needed.

I would argue that it is. On a midtier phone, using the latest Nightly, even https://www.chromestatus.com/ (which can be considered a model for PWAs - see https://www.youtube.com/watch?v=Rd0plknSPYU) takes around five seconds to show something on the screen - during which time the user is staring at a blank screen. The same can be said of all the PWAs listed at https://hnpwa.com/.

Comment 9

[Firefox Bug Husbandry Bot]

Re-triaging per https://bugzilla.mozilla.org/show_bug.cgi?id=1473195

Needinfo :susheel if you think this bug should be re-triaged.

Comment 10

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.