diff --git a/client/src/pages/guide/english/progressive-web-apps/add-to-homescreen/index.md b/client/src/pages/guide/english/progressive-web-apps/add-to-homescreen/index.md index ece13a3e07..30c37645b4 100644 --- a/client/src/pages/guide/english/progressive-web-apps/add-to-homescreen/index.md +++ b/client/src/pages/guide/english/progressive-web-apps/add-to-homescreen/index.md @@ -4,7 +4,7 @@ title: 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 @@ -16,7 +16,9 @@ You can see the latest status of browser support of this feature [here](https:// ### 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 | | :----------------------: | :---------------: | @@ -27,7 +29,7 @@ On Android, the "add to homescreen" banner comes up automatically if you meet ce #### Requirements -* include a `manifest.json` file with the following properties: +* A `manifest.json` file should contain the following properties: * `short name` * `name` * `192x192` size of `png` icon @@ -41,7 +43,7 @@ On Android, the "add to homescreen" banner comes up automatically if you meet ce ```json { "name": "FreeCodeCamp", - "short_name": "FreeCodeCamp", + "short_name": "FCC", "theme_color": "#00FF00", "background_color": "#00FF00", "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) -* `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. * `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. * `icons` is an array that store all the images location, sizes and type.