Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
For a Progressive Web App (PWA) to be installable, the manifest file must include certain mandatory information. These details help the browser understand how the application should be presented to the user and its behavior upon installation.
While not all of these properties are strictly mandatory, a manifest must at least contain the minimum information for the browser to prompt the user to install the application. In practice, it is recommended to include as much information as possible to enhance the user experience.
Here are the key properties of the manifest that are typically considered necessary for PWA installation:
name: The name of the application.
short_name: A short or abbreviated name for the application (used when space is limited, e.g., on a home screen).
start_url: The relative or absolute URL from which the application should launch when opened.
display: Determines how the application should be displayed. Common values include fullscreen, standalone,minimal-ui and browser.
background_color: The background color of the application.
theme_color: The color representing the main theme of the application.
icons: An array of objects describing the application's icons for different sizes and resolutions. (see after)
Minimal example of a manifest:
As it has an impact on the Twig pages, you may need to clear the cache when the manifest is enabled.
The PWA dir and lang parameters.
Progressive Web Apps (PWAs) can be tailored for different languages and writing directions through the use of the dir and lang parameters in the HTML tag.
By properly setting the dir and lang parameters, you ensure better user experience, accessibility, and potentially improved SEO for your PWA.
Please note that those values should be in accordance with the ones set as <html> tag attributes.
dir ParameterThe dir parameter specifies the text directionality of the content in your PWA. It can have one of three values:
ltr: Left-to-right, which is used for languages that are read from the left to the right (like English).
rtl: Right-to-left, for languages read from the right to the left (like Arabic or Hebrew).
auto: Automatically determines the direction based on the content.
Example usage in HTML:
lang ParameterThe lang parameter declares the default language of the text in the page. This is important for accessibility tools and search engines.
The orientation property in the Progressive Web Application (PWA) manifest dictates the default orientation that the web application will be displayed in. The allowed values are:
portrait-primary: The orientation is in the primary portrait mode.
landscape-primary: The orientation is in the primary landscape mode.
portrait: Either of the portrait orientations.
landscape: Either of the landscape orientations.
any: Any orientation.
Setting the orientation helps ensure that the PWA looks good and functions well on mobile devices.
Example:
With the above manifest configuration, the application will default to landscape orientation when launched from a device's home screen.
The International Age Rating Coalition (IARC) rating system ID. This is not mandatory but is useful for digital content that requires an age rating.
One of the parameters included in this file is the id property. This parameter is crucial as it uniquely identifies the PWA across browsers and devices, enabling a consistent user experience.
This id parameter should be consistent and not change, even if other manifest properties are updated. It's important for maintaining the application's identity for things like saved user preferences and home screen shortcuts.
When absent, an ID is determined using the start_url parameter, the manifest location and its scope. Adding an id to the manifest allows to change the start_url and the manifest path. Note that the domain shall not change.
To be written
The scope parameter in a Progressive Web App (PWA) manifest file is an important feature as it defines the set of URLs that the browser considers to be within your app. When a user navigates to a URL within the scope, they are kept within the full app experience.
The scope can be a relative path or an absolute URL.
If omitted, it defaults to the location of the manifest.
The start_url must be within the scope.
Keep the scope as restrictive as possible to maintain control over your app's user experience.
Set the start_url to a URL within the app's scope so it starts in the right context.
Test the scope to ensure it includes all the necessary pages and excludes any that should not be part of the PWA experience.
The categories member is a string list that describes the application categories to which the web application belongs. It is meant as a hint to catalogs or stores listing web applications and it is expected that these will make a best effort to find appropriate categories (or category) under which to list the web application. Like search engines and meta keywords, catalogs and stores are not required to honor this hint.
Manifest authors are encouraged to use lower-case.
List of known categories:
beauty
books
books & reference
business
cars
dating
design
developer
developer tools
development
education
entertainment
events
fashion
finance
fitness
food
fundraising
games
government
graphics
graphics & design
health
health & fitness
kids
lifestyle
magazines
medical
multimedia
multimedia design
music
navigation
network
networking
news
parenting
personalization
pets
photo
photo & video
politics
productivity
reference
security
shopping
social
social networking
sports
transportation
travel
utilities
video
weather
The description member is a string that allows the developer to describe the purpose of the web application. It serves as the accessible description of an installed web application.