First Step to PWA

I am learning how to build a PWA( Progressive Web App) through taking the course from Maximilian Schwarzmüller at Safari Online. 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. And I will keep uploading my progressive progress of PWA to github 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:

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

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