4. Support native integration & Deploy online - Your First Progressive Web App

pwa-serviceworker-native-deploy.md

Your First Progressive Web App

Based on Abdelrahman Omran PWA presentation, and Google PWA Codelab

---

Step 1. Fast first load

Step 2. Use service workers to pre-cache the App Shell

Step 3. Use service workers to cache the forecast data

Step 4. Support native integration & Deploy online

• Create Manifest File
• Call Manifest File
• Add to Homescreen elements for Safari on iOS
• Tile Icon for Windows
• Deploy to Firebase

---

Create Manifest File

Inside your work directory, create a new file named manifest.json, and add the following code inside:

{
  "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:

<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"