Skip to content

Instantly share code, notes, and snippets.

@Omranic
Last active October 27, 2016 19:22
Show Gist options
  • Save Omranic/57fab57fa405a055af4a044ef73e711f to your computer and use it in GitHub Desktop.
Save Omranic/57fab57fa405a055af4a044ef73e711f to your computer and use it in GitHub Desktop.
4. Support native integration & Deploy online - Your First Progressive Web App

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

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"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment