The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.
A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.
To tell the browser about the manifest, we need to add a link tag to all the pages that encompass the web app.
Below are the important manifest properties
short_name and/or name => Name used by the device to use on the home screen
icons
When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc.
its an array like below
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
start_url : The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen.
background_color : The background_color property is used on the splash screen when the application is first launched.
display: You can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Or games may want to go completely full screen.
fullscreen : Opens the web application without any browser UI and takes up the entirety of the available display area.
standalone : Opens the web app to look and feel like a standalone native app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar, etc.
minimal-ui : Not supported by Chrome
This mode is similar to fullscreen, but provides the user with some means to access a minimal set of UI elements for controlling navigation (i.e., back, forward, reload, etc).
orientation : You can enforce a specific orientation, which is advantageous for apps that work in only one orientation, such as games. Use this selectively. Users prefer selecting the orientation.
scope : The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app, and should be bounced back out to a browser tab. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope.
"scope": "/maps/"
A few other tips:
If you don't include a scope in your manifest, then the default implied scope is the directory that your web app manifest is served from.
The scope attribute can be a relative path (../), or any higher level path (/) which would allow for an increase in coverage of navigations in your web app.
The start_url must be in the scope.
The start_url is relative to the path defined in the scope attribute.
A start_url starting with / will always be the root of the origin.
theme_color The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
It may take a bit of time before app get paint cycle, till then Chrome will automatically create the splash screen from the manifest properties, including:
name
background_color
icons
The background_color should be the same color as the load page, to provide a smooth transition from the splash screen to your app.
references:
https://developers.google.com/web/fundamentals/web-app-manifest/
A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.
To tell the browser about the manifest, we need to add a link tag to all the pages that encompass the web app.
Below are the important manifest properties
short_name and/or name => Name used by the device to use on the home screen
icons
When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc.
its an array like below
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
start_url : The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen.
background_color : The background_color property is used on the splash screen when the application is first launched.
display: You can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Or games may want to go completely full screen.
fullscreen : Opens the web application without any browser UI and takes up the entirety of the available display area.
standalone : Opens the web app to look and feel like a standalone native app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar, etc.
minimal-ui : Not supported by Chrome
This mode is similar to fullscreen, but provides the user with some means to access a minimal set of UI elements for controlling navigation (i.e., back, forward, reload, etc).
orientation : You can enforce a specific orientation, which is advantageous for apps that work in only one orientation, such as games. Use this selectively. Users prefer selecting the orientation.
scope : The scope defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app, and should be bounced back out to a browser tab. The scope controls the URL structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope.
"scope": "/maps/"
A few other tips:
If you don't include a scope in your manifest, then the default implied scope is the directory that your web app manifest is served from.
The scope attribute can be a relative path (../), or any higher level path (/) which would allow for an increase in coverage of navigations in your web app.
The start_url must be in the scope.
The start_url is relative to the path defined in the scope attribute.
A start_url starting with / will always be the root of the origin.
theme_color The theme_color sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
It may take a bit of time before app get paint cycle, till then Chrome will automatically create the splash screen from the manifest properties, including:
name
background_color
icons
The background_color should be the same color as the load page, to provide a smooth transition from the splash screen to your app.
references:
https://developers.google.com/web/fundamentals/web-app-manifest/
No comments:
Post a Comment