added a demo video and add-to-homescreen section to Progressive Web App

src/pages/progressive-web-apps/add-to-homescreen/index.md

@@ -0,0 +1,138 @@
+---
+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.
+
+### Browser Support for Add To Homescreen
+
+Add to Homescreen functionality is currently supported by:
+* Chrome
+* iOS Safari
+
+You can see the latest status of browser support of this feature [here](https://caniuse.com/#feat=web-app-manifest).
+
+### 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:
+
+| Add to homescreen prompt | When app launched |
+| :----------------------: | :---------------: |
+|     ![prompt][add1]      |  ![launch][add2]  |
+
+[add1]: https://user-images.githubusercontent.com/15358452/31663686-860779f0-b375-11e7-85c9-1387d9b3bfcf.png "Add to homescreen prompt on android"
+[add2]: https://user-images.githubusercontent.com/15358452/31663690-89b0d998-b375-11e7-8a84-f3e33be9a2c2.png "Launch from Homescreen"
+
+#### Requirements
+
+* include a `manifest.json` file with the following properties:
+  * `short name`
+  * `name`
+  * `192x192` size of `png` icon
+  * `start_url`
+* include a service worker that is both registered and activated
+* the website served over HTTPS (you can still try this with localhost without HTTPS)
+* the website meets engagement heuristics defined by Chrome
+
+#### manifest.json
+
+```json
+{
+  "name": "FreeCodeCamp",
+  "short_name": "FreeCodeCamp",
+  "theme_color": "#00FF00",
+  "background_color": "#00FF00",
+  "display": "standalone",
+  "Scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "assets/images/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}
+```
+
+* `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)
+* `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.
+* `start_url` define the starting url of the website.
+* `icons` is an array that store all the images location, sizes and type.
+
+### On other devices
+
+Although this method does not work on iOS and Windows, there is a fallback method. 
+
+**iOS**
+
+On iOS, the "add to homescreen" button must be added manually. Add the following meta tags to the head section of your HTML to support iOS web app icon.
+
+```html
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="green">
+<meta name="apple-mobile-web-app-title" content="FreeCodeCamp">
+<link rel="apple-touch-icon" href="/assets/images/icons/icon-72x72.png" sizes="72x72">
+<link rel="apple-touch-icon" href="/assets/images/icons/icon-96x96.png" sizes="96x96">
+<link rel="apple-touch-icon" href="/assets/images/icons/icon-128x128.png" sizes="128x128">
+<link rel="apple-touch-icon" href="/assets/images/icons/icon-144x144.png" sizes="144x144">
+<link rel="apple-touch-icon" href="/assets/images/icons/icon-152x152.png" sizes="152x152">
+<link rel="apple-touch-icon" href="/assets/images/icons/icon-192x192.png" sizes="192x192">
+<link rel="apple-touch-icon" href="/assets/images/icons/icon-384x384.png" sizes="384x384">
+<link rel="apple-touch-icon" href="/assets/images/icons/icon-512x512.png" sizes="512x512">
+```
+
+**Windows**
+
+On windows phone, add the following meta tags to the head section of your HTML:
+
+```html
+<meta name="msapplication-TileImage" content="/assets/images/icons/icon-144x144.png">
+<meta name="msapplication-TileColor" content="green">
+```
+
+### References
+
+1. [superoo7, "A High Level View of Progressive Web App" Posted: December 18, 2017.](https://steemit.com/web/@superoo7/a-high-level-view-of-progressive-web-app)
+2. [Matt Gaunt & Paul Kinlan, "Web App Install Banners" Posted: November 14, 2017.](https://developers.google.com/web/fundamentals/app-install-banners/)

src/pages/progressive-web-apps/index.md

@@ -12,25 +12,25 @@ PWAs can install portions of themselves onto devices for offline viewing, use se
 
 Specific features of PWAs include:
 
-- **Responsive**
-  - fits any form factor
-- **Offline Capabilities**
-  - progressively-enhanced with Service Workers to let them work offline
-- **Native App Feel**
-  - adopts a Shell & Content application model to create app navigation & interactions
-- **Fresh**
-  - always up-to-date thanks to service workers
-- **Safe**
-  - served via TLS (a Service Worker requirement) to prevent snooping
-- **Discoverable**
-  - identifiable as "applications" thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
-- **Engaging**
-  - can access the re-engagement UIs of the OS through Push Notifications
-- **Easy Installation**
-  - can be added to the home screen through browser-provided prompts, allowing users to "keep" apps they find most useful without the hassle of an app store
-- **Linkable**
-  - meaning they're zero-friction, zero-install, and easy to share
-  - the social power of URLs matters
+* **Responsive**
+  * fits any form factor
+* **Offline Capabilities**
+  * progressively-enhanced with Service Workers to let them work offline
+* **Native App Feel**
+  * adopts a Shell & Content application model to create app navigation & interactions
+* **Fresh**
+  * always up-to-date thanks to service workers
+* **Safe**
+  * served via TLS (a Service Worker requirement) to prevent snooping
+* **Discoverable**
+  * identifiable as "applications" thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
+* **Engaging**
+  * can access the re-engagement UIs of the OS through Push Notifications
+* **Easy Installation**
+  * can be added to the home screen through browser-provided prompts, allowing users to "keep" apps they find most useful without the hassle of an app store
+* **Linkable**
+  * meaning they're zero-friction, zero-install, and easy to share
+  * the social power of URLs matters
 
 > These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins.<sup>1</sup>
 
@@ -44,7 +44,11 @@ A great analogy from [Aaron Gustafson](http://alistapart.com/article/understandi
 
 This implies that depending on the browser, the experience can change.
 
+### Demo
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/esfi7ZLibmk" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
+
 ### References
- 
+
 1. [Russell, Alex. "Progressive Web Apps: Escaping Tabs Without Losing Our Soul" "Infrequently Noted" Posted: June 15, 2015.](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/)
 2. [Progressive Web Apps - Google Developers](https://developers.google.com/web/progressive-web-apps/)