First Step to PWA
Published: 2019-03-18 23:09:38

---
title: First Step to PWA
published: true
description: Study note on Progressive Web App
tags: 
---
I am learning how to build a PWA( Progressive Web App) through taking the course from [Maximilian Schwarzmüller](https://www.linkedin.com/in/maximilian-schwarzm%C3%BCller-66b152a5) at [Safari Online](https://learning.oreilly.com/videos/progressive-web-apps/9781789135770?autoplay=false). I think it is also available on many other platforms like packt or udemy with more features like discussion forum, but since I have subscribed Safari... Yes that's it.

I downloaded the code source files from packt [page](https://www.packtpub.com/web-development/progressive-web-apps-pwa-complete-guide-video). And I will keep uploading my progressive progress of PWA to [github](https://github.com/owlfox/pwa_practice) and here. 


PWA is based on WEB technologies(Html/CSS/JS) which in addition uses browser features to make web page working without Internet access. Let's dive into the course to learn more about it:

# Manifest.json
To make our web page addable to the home screen of our android phone, the first thing is to add `manifest.json` file to all your html/views of your website. This will let the browser loading your pages know that they are dealing with a PWA.

The details of a `manifest.json` file would look like below:
```json
{
    "name": "Hohoho you're on PWA",
    "short_name": "Hoho",
    "start_url": "/index.html",
    "scope": ".",
    "display": "standalone",
    "background_color": "#636363",
    "theme_color": "#636363",
    "description": "Just a practice of PWA",
    "dir": "ltr",
    "lang": "en-US",
    "orientation": "portrait-primary",
    "icons": [
        {
            "src": "/src/images/icons/app-icon-48x48.png",
            "type": "image/png",
            "sizes": "48x48"
          },
          {
            "src": "/src/images/icons/app-icon-96x96.png",
            "type": "image/png",
            "sizes": "96x96"
          },
          {
            "src": "/src/images/icons/app-icon-144x144.png",
            "type": "image/png",
            "sizes": "144x144"
          },
          {
            "src": "/src/images/icons/app-icon-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
          },
          {
            "src": "/src/images/icons/app-icon-256x256.png",
            "type": "image/png",
            "sizes": "256x256"
          },
          {
            "src": "/src/images/icons/app-icon-384x384.png",
            "type": "image/png",
            "sizes": "384x384"
          },
          {
            "src": "/src/images/icons/app-icon-512x512.png",
            "type": "image/png",
            "sizes": "512x512"
          }
    ],
    "related_applications": [
        {
            "platform": "Hohoho",
            "rul": "https://play.google.com/store/apps/details?id=com.gorro.nothing",
            "id": "com.gorro.nothing"
        }
    ]
}
```

and to add the references, add the following lines into your head element:
```html
  <link rel="manifest" href="/manifest.json">

  <!-- For Safari pwa -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="grey">
  <meta name="apple-mobile-web-app-status-title" content="Hohoho">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-57x57.png" sizes="57x57">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-60x60.png" sizes="60x60">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-72x72.png" sizes="72x72">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-76x76.png" sizes="76x76">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-114x114.png" sizes="114x114">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-120x120.png" sizes="120x120">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-144x144.png" sizes="144x144">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-152x152.png" sizes="152x152">
  <link rel="apple-touch-icon" href="/src/images/icons/apple-icon-180x180.png" sizes="180x180">
  
  <!-- For ms edge pwa -->
  <meta name="msapplication-TileImage" content="/src/images/icons/app-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#fff">
  <meta name="theme-color" content="#636363">
```

Then we can open up our mobile chrome, and you will find that there's a "Add to Home Screen" option appeared. Add it, and it will work like a standalone app.


Although PWA is not fully supported by Safari/Edge at the moment of writing, I think it would be easier to save the work of developing native app if ... it works!


# More about PWA
1. And you could make a desktop App with PWA since chrome 73, oh how exciting. Please see this [link](https://developers.google.com/web/progressive-web-apps/desktop) for more information. 
2. I found it's good to use USB tethering to allow my mobile phone to visit my developing server on MACOSX, handy!