Splash screen for native web apps

Abstract

This document specifies a number of ways to give an application a splash screen (known also as a "launch image"). A splash screen is an image that appears while a game or application is loading.

Table of Contents

1. 1 Status of this document
   1. 1.1 Issues
2. 2 Introduction
   1. 2.1 Example: using the splash element
3. 3 Use cases and requirements
4. 4 Conformance
5. 5 User Agents
6. 6 Splash screen
7. 7 The splash element and its attributes
   1. 7.1 The src attribute
   2. 7.2 The width attribute
   3. 7.3 The height attribute
8. 8 The default splash screen
9. 9 Finding the splash screens
   1. 9.1 Processing splash elements
   2. Locate the default splash screen file
10. 10 Rendering the splash screen

1 Status of this document

This document is undergoing rapid development and is changing frequently. It is inappropriate to cite this document as anything other than a work in progress.

1.1 Issues

The following is a list of issues we are still trying to resolve:

• Should width and height matter?

2 Introduction

This section is non-normative.

Because of the limited processing capabilities of some devices and the amount of time it takes to initialize a Web runtime, there can be a small - yet noticeably perceivable - delay between when the end-user starts an application and the application actually becoming available and interactive to the end-user.

Depending on the complexity of the application and the processing power of the device, this delay can range from a few milliseconds to a couple of seconds. When applications take more than a few seconds to load, it can be disorienting to end-users as nothing is displayed on the screen; leading to a poor user experience. Native applications overcome this issue by allowing developers to use a media file that is displayed the instant the application is launched. Such a file is commonly referred to as a "splash screen" or "launch image".

This document defines two ways for a native web application to include a splash screen:

• Including a default splash-screen image at the root of the widget package.
• Declaring one or more splash elements in the configuration document of an application.

2.1 Example: using the splash element

The following example shows how to use multiple splash elements.

<widget xmlns="http://www.w3.org/ns/widgets">
   <splash src="splash/320x480.png"/>     
   <splash src="splash/640x960.png"/>     
   <splash src="splash/768x1004.png"/>
   <splash src="splash/1024x748.png"/>
</widget>

Might appear as the following in a conforming user agent:

3 Use cases and requirements

This section is non-normative.

• R1. Must be localizable.
• R2. should follow existing practice.
• Must allow multiple files to be defined
• Must make it easy for developers, so they don't need to have to deal with width and heights.

4 Conformance

Everything in this specification is normative except sections marked as non-normative, diagrams, examples, and notes.

The key words must, must not, required, should, should not, recommended, may, and optional in this specification are to be interpreted as described in RFC2119.

This specification defines conformance criteria that apply to a single product: a user agent.

5 User Agents

A user agent is a software application that implements this specification and the Widget Packaging specification and its dependencies.

6 Splash screen

A splash screen is a media file, typically an image, that is displayed to the user while the application is being asynchronously loaded in the background. It's purpose is to give an end user immediate feedback that an application is starting and loading in the background.

7 The splash element and its attributes

The splash element allows an author to declare a splash screen for an application.

Context in which this element is used:

As a child of the widget element.

Content model:

Empty.

Occurrences:

Zero or more.

Localizable via xml:lang:

No. Relies on folder-based localization.

Attributes:

Global attributes, src, width, height.

7.1 The src attribute

The src attribute is path attribute of the splash element that allows an author to point to a file within the widget package. This file is then used as the splash screen for an application.

7.2 The width attribute

A numeric attribute greater than 0 that represents, in CSS pixels, the author's preferred width for the splash screen.

7.3 The height attribute

A numeric attribute greater than 0 that represents, in CSS pixels, the author's preferred height for the splash screen.

8 The default splash screen

A default splash-screen is a reserved image, either at the root of the widget package or at the root of a locale folder, whose file name case-sensitively matches a file name given in the file name column of the default splash-screen table.

It is optional for a user agent to support the media types listed in the default splash-screen table.

At the time of writing, there is limited support on devices for displaying SVG as a splash screen. We recommend you include a splash screen in one of more of the other formats listed in the default splash-screen table.

9 Finding the splash screens

TODO: write how to hook into processing algorithm.

9.1 Processing splash elements

A user agent behaves as if the splash file defaults table had been defined as part of the Table of Configuration Defaults in Step 3 of the Widget Packaging specification.

The steps to process splash elments is given by the following algorithm:

1. For each splash element in tree order:

   1. If the splash element does not have a src attribute, then terminate this algorithm.

   2. Let path be the result of applying the rule for getting a single attribute value to the src attribute of this splash element. If path is not a valid path or is an empty string, then terminate this algorithm.

   3. Let file be the result of applying the rule for finding a file within a widget package to path. If file is not a processable file, as determined by applying the rule for identifying the media type of a file, then terminate this algorithm.

   4. If the height attribute is used, then let  height be the result of applying the rule for parsing a non-negative integer to the attribute's value. If the height is not in error and greater than 0, then associate the height with file. Otherwise, the height attribute is in error and the user agent MUST ignore the height attribute.

   5. If the width attribute is used, then let  width be the result of applying the rule for parsing a non-negative integer to the attribute's value. If the width is not in error and greater than 0, then associate the width with file. Otherwise, the width attribute is in error and the user agent MUST ignore the width attribute.

   6. Add file and any associated  width and/or height to the list of splashscreens.

Locate the default splash screen file

The algorithm to locate the default splash-screen file is given by the following algorithm:

1. For each file name in the default splash screen table (from top to bottom) that has a media type that is supported by the user agent:

   1. Let potential-splash be the result of applying the rule for finding a file within a widget package to file name.

   2. If the potential-splash is a processable file, determined by the media type given in the media type column of the default splash screen table, then append potential-splash to the splashscreens list and terminate this algorithm.

      Otherwise, move onto the next file name in the default splash screen table. If no default splash screen file is found, then terminate this algorithm.

10 Rendering the splash screen

A splash screen will generally cover the entire drawable area of a screen or simply a rectangle near the center of the screen. The splash screens of some applications that expect to be run full-screen usually cover the entire screen.

Attributions

This article uses material from the Wikipedia article "Splash screen", which is released under the Creative Commons Attribution-Share-Alike License 3.0.