gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated index.md (#18850)

Browse Source 
Improved the manifest.json file explanation
This commit is contained in:
Pravinraj Mohan
2018-10-13 23:38:42 +05:30
committed by Quincy Larson
parent e577400e3a
commit 292d0c9011
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/pages/guide/english/progressive-web-apps/add-to-homescreen/index.md
View File

@ -4,7 +4,7 @@ title: Add To Homescreen
## Add To Homescreen ## Add To Homescreen
Here the web app install banner is focused on web app, with the feature of add to homescreen. * Another important file after service worker in PWA is manifest.json, Which helps your webapp to get installed on the users homescreen like a native mobile app. This file contains the informations of your web app to work standalone similar to native mobile apps. The manifest is explained in detail below.
### Browser Support for Add To Homescreen ### Browser Support for Add To Homescreen
@ -16,7 +16,9 @@ You can see the latest status of browser support of this feature [here](https://
### On Android ### On Android
On Android, the "add to homescreen" banner comes up automatically if you meet certain requirements. This is what it should look like on Android: On Android, the "add to homescreen" banner comes up automatically if you meet the following requirements given below.
This is what it should look like on Android:
| Add to homescreen prompt | When app launched | | Add to homescreen prompt | When app launched |
| :----------------------: | :---------------: | | :----------------------: | :---------------: |
@ -27,7 +29,7 @@ On Android, the "add to homescreen" banner comes up automatically if you meet ce
#### Requirements #### Requirements
* include a `manifest.json` file with the following properties: * A `manifest.json` file should contain the following properties:
* `short name` * `short name`
* `name` * `name`
* `192x192` size of `png` icon * `192x192` size of `png` icon
@ -41,7 +43,7 @@ On Android, the "add to homescreen" banner comes up automatically if you meet ce
```json ```json
{ {
"name": "FreeCodeCamp", "name": "FreeCodeCamp",
"short_name": "FreeCodeCamp", "short_name": "FCC",
"theme_color": "#00FF00", "theme_color": "#00FF00",
"background_color": "#00FF00", "background_color": "#00FF00",
"display": "standalone", "display": "standalone",
@ -94,10 +96,14 @@ On Android, the "add to homescreen" banner comes up automatically if you meet ce
``` ```
* `name` is the name of the web app. (It will be shown in the launch screen) * `name` is the name of the web app. (It will be shown in the launch screen)
* `short name` is the short name of the web app. (It will be shown below the icon of phone menu) * `short name` is the short name of the web app. (It will be shown below the icon of your application)
* `theme_color` is the color of the top of the browser. * `theme_color` is the color of the top of the browser.
* `background_color` is the background color of the launch screen. * `background_color` is the background color of the launch screen.
* `display` is the way the web app should display once launched on the phone. * `display` is the way the web app should display once launched on the phone.Right now there of 4 different options available now. They are,
* `fullscreen` - Tkes the whole space of your mobile screen.
* `standalone` - This option will make your app to work like a native mobile application. this makes the application to open on a new window, and place your application icon launcher on the mobile.
* `minimal-ui` - This option is similar to standalone but with less UI Options
* `browser` - This is the default one. This will open the link in your browser as a new window
* `start_url` define the starting url of the website. * `start_url` define the starting url of the website.
* `icons` is an array that store all the images location, sizes and type. * `icons` is an array that store all the images location, sizes and type.