Controlling duration of load screen?

[Felix E. Klee]

I test installed an [early preview][1] of a web app on an Android device
with Firefox Aurora. What the user sees during startup:

1. Load screen 1: App's icon plus loader animation (green circle).

2. Load screen 2: App's own load screen (spinner on black background),
indicating initialization.

3. The app, ready to use.

Is it possible to get rid of the second load screen?

In other words: Can I somehow control how long the first load screen appears?

*Note*: Naturally, I do not want to entirely get rid of the app's own
load screen. It is necessary on normal browsers, since otherwise users
may see the app in an uninitialized state.

This question has also been [posted on StackOverflow][2], though so far
without answer. It seems that there are not many Open Web App developers
out there, yet.

[1]: http://sq.rotogame.com/install-webapp
[2]: http://stackoverflow.com/questions/13070767/firefox-web-app-control-duration-of-load-screen

[Kumar McMillan]

On Oct 26, 2012, at 3:47 AM, Felix E. Klee wrote:

> I test installed an [early preview][1] of a web app on an Android device
> with Firefox Aurora. What the user sees during startup:
>
> 1. Load screen 1: App's icon plus loader animation (green circle).
>
> 2. Load screen 2: App's own load screen (spinner on black background),
> indicating initialization.
>
> 3. The app, ready to use.
>
> Is it possible to get rid of the second load screen?
>
> In other words: Can I somehow control how long the first load screen appears?

Good question.

>
> *Note*: Naturally, I do not want to entirely get rid of the app's own
> load screen. It is necessary on normal browsers, since otherwise users
> may see the app in an uninitialized state.

I would actually suggest something contrary: build your UI so that it "looks right" in an uninitialized state. Most iOS apps do this. It can be tricky to implement but I think maybe your appcache assets will be loaded after the initial #1 load screen so you can show a screenshot of a menu bar (or whatever) if it is not yet clickable. Basically I'm suggesting to trick the user into thinking your app is usable by way of visual layout. When the user clicks and nothing happens you could queue that event up for later. Generally this isn't a problem though because to the user they see what looks like a fully loaded app and think, wow, that was fast. By the time they actually try to do something it is probably already loaded. If not you could show a lazy loader that only appears if the user did in fact try to do something while it was taking too long to load.

>
> This question has also been [posted on StackOverflow][2], though so far
> without answer. It seems that there are not many Open Web App developers
> out there, yet.
>
> [1]: http://sq.rotogame.com/install-webapp
> [2]: http://stackoverflow.com/questions/13070767/firefox-web-app-control-duration-of-load-screen

> _______________________________________________
> dev-webapps mailing list
> dev-w...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-webapps

[Ian Bicking]

I remember this coming up before (though I can't find the link – maybe it
was Kumar who mentioned this previously?) I opened a ticket with a
proposal that I think would address this case:
https://bugzilla.mozilla.org/show_bug.cgi?id=805845

I don't believe there's any feature that would help you right now. As a
simple hack you could try to simulate the first load screen in your own
app. I.e., make your first page look like:

<img style="position: fixed; top: 50; left: 50%; margin-top: -128px;
margin-left: -128px;" src="/icons/icon_256.png">

and also throw a throbber gif in there somewhere. You can use a
launch_path that isn't "/" so that app users get this custom loading page,
while people accessing your app through a browser get a more normal load
screen.

Kumar's suggestion of creating a quick-to-initialize
not-entirely-functional first screen is of course even better.

On Fri, Oct 26, 2012 at 3:47 AM, Felix E. Klee <felix...@inka.de> wrote:

> I test installed an [early preview][1] of a web app on an Android device
> with Firefox Aurora. What the user sees during startup:
>
> 1. Load screen 1: App's icon plus loader animation (green circle).
>
> 2. Load screen 2: App's own load screen (spinner on black background),
> indicating initialization.
>
> 3. The app, ready to use.
>
> Is it possible to get rid of the second load screen?
>
> In other words: Can I somehow control how long the first load screen
> appears?
>

> *Note*: Naturally, I do not want to entirely get rid of the app's own
> load screen. It is necessary on normal browsers, since otherwise users
> may see the app in an uninitialized state.
>

[Felix E. Klee]

On Fri, Oct 26, 2012 at 6:47 PM, Ian Bicking <ia...@mozilla.com> wrote:
> https://bugzilla.mozilla.org/show_bug.cgi?id=805845

I don't like that proposal as it depends on images, which are dependent
on resolution and aspect-ratio. My app, however, is independent of that.
In fact, it does not use a single image (asides from the mandatory icons
in `manifest.webapp`, and the

> throbber gif

I don't even use that. My loader animation is pure HTML/CSS. When the
app starts in a normal browser, then - bam - it's there, animating, and
always crisp.

> You can use a launch_path that isn't "/" so that app users get this
> custom loading page,

Don't like this approach either, as I don't like browser sniffing.

My proposal:

https://bugzilla.mozilla.org/show_bug.cgi?id=805889

[Felix E. Klee]

On Fri, Oct 26, 2012 at 5:31 PM, Kumar McMillan <kmcm...@mozilla.com>
wrote:

> I would actually suggest something contrary: build your UI so that it
> "looks right" in an uninitialized state. Most iOS apps do this. It can

> be tricky to implement [...]

I could do *something* like that. For example, I could show the user
interface elements that are ready, and in place of those that are not
ready, I could show loader animations. Still, not perfect, and possibly
a lot of effort.

> screenshot of a menu bar (or whatever)

No images. My app is resolution and aspect-ratio agnostic , and it
should stay that way.

[Felix E. Klee]

On Fri, Oct 26, 2012 at 8:50 PM, Felix E. Klee <felix...@inka.de> wrote:
> In fact, it does not use a single image (asides from the mandatory icons
> in `manifest.webapp`, and the

favicon)

[Matt Basta]

Unlike other platforms, Firefox[ OS] is one that supports SVG graphics fantastically. If you're worried about aspect ratio and resolution, SVG is going to treat you right.

----- Original Message -----
From: "Felix E. Klee" <felix...@inka.de>
To: "Ian Bicking" <ia...@mozilla.com>
Cc: dev-w...@lists.mozilla.org
Sent: Friday, October 26, 2012 11:50:39 AM
Subject: Re: Controlling duration of load screen?

On Fri, Oct 26, 2012 at 6:47 PM, Ian Bicking <ia...@mozilla.com> wrote:
> https://bugzilla.mozilla.org/show_bug.cgi?id=805845

I don't like that proposal as it depends on images, which are dependent
on resolution and aspect-ratio. My app, however, is independent of that.

In fact, it does not use a single image (asides from the mandatory icons
in `manifest.webapp`, and the

> throbber gif

I don't even use that. My loader animation is pure HTML/CSS. When the
app starts in a normal browser, then - bam - it's there, animating, and
always crisp.

> You can use a launch_path that isn't "/" so that app users get this
> custom loading page,

Don't like this approach either, as I don't like browser sniffing.

My proposal:

https://bugzilla.mozilla.org/show_bug.cgi?id=805889

[Felix E. Klee]

On Fri, Oct 26, 2012 at 11:04 PM, Matt Basta <mba...@mozilla.com> wrote:
> If you're worried about aspect ratio and resolution, SVG is going to
> treat you right.

Well, my app looks *different* depending an aspect ratio. It's not simply
scaled. There is complex JavaScript under the hood. Try the preview:

<http://sq.rotogame.com>

In other words: Replicating the home screen in SVG would be an effort
taking possibly days, pulling all the tricks. That just doesn't seem
worth the effort.

Therefore [my proposal], which would give consistent and easy to implement
load screen behavior to all web apps. Users love consistency!

[1]: https://bugzilla.mozilla.org/show_bug.cgi?id=805889

[Felix E. Klee]

On Fri, Oct 26, 2012 at 11:04 PM, Matt Basta <mba...@mozilla.com> wrote:

> Unlike other platforms, Firefox[ OS] is one that supports SVG graphics
> fantastically.

OT: Why isn't it possible to specify an SVG file as a single webapp icon?

Having to create a dozen of icons in different sizes hopefully will be a
thing of the past soon. And, furthermore, even 256×256 is not enough for
many of today's hires screens.

[Felix E. Klee]

I just filed a feature request:

https://bugzilla.mozilla.org/show_bug.cgi?id=806061