# Your First Progressive Web App

Based on [Abdelrahman Omran PWA presentation](https://goo.gl/TbgI7d), and [Google PWA Codelab](https://goo.gl/AVsL6p)

___

[Step 1. Fast first load](https://gist.github.com/Omranic/c3c2c9c07d6f0d36e40c74f155bf5576)

[Step 2. Use service workers to pre-cache the App Shell](https://gist.github.com/Omranic/4e648fa38caab7b8207d3e237fde0c77)

[Step 3. Use service workers to cache the forecast data](https://gist.github.com/Omranic/1b97059b1527e1878fdc5c51ada3e057)

## Step 4. Support native integration & Deploy online

- [Create Manifest File](#create-manifest-file)
- [Call Manifest File](#call-manifest-file)
- [Add to Homescreen elements for Safari on iOS](#add-to-homescreen-elements-for-safari-on-ios)
- [Tile Icon for Windows](#tile-icon-for-windows)
- [Deploy to Firebase](#deploy-to-firebase)

___

### Create Manifest File

Inside your `work` directory, create a new file named `manifest.json`, and add the following code inside:
```json
{
  "name": "Weather PWA",
  "short_name": "Weather",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}
```


### Call Manifest File

Open `index.html` and add the following line before the `</head>` closing tag:
```javascript
<link rel="manifest" href="/manifest.json">
```


### Add to Homescreen elements for Safari on iOS

In the same file `index.html` add the following code before the `</head>` closing tag:
```
  <!-- Add to home screen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Weather PWA">
  <link rel="apple-touch-icon" href="images/icons/icon-152x152.png">
```


### Tile Icon for Windows

In the same file `index.html` add the following code before the `</head>` closing tag:
```
  <meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
  <meta name="msapplication-TileColor" content="#2F3BA2">
```


### Deploy to Firebase

1. Create a Firebase account at  https://firebase.google.com/console/ and then create a new project
2. Install the Firebase tools via npm: `npm install -g firebase-tools`
3. On your terminal, change current directory to `work`
4. Still on terminal, inside `work` directory execute this command `firebase login`
5. Once logged in from your terminal to your Firebase account, execute this command `firebase init`
6. Finally, you're ready to deploy online using this command `firebase deploy`
7. Congrats, you're done! You can access your Weather PWA on a link similar to this "https://YOUR-FIREBASE-APP.firebaseapp.com"