Getting Started with Progressive Web Apps (PWA) Part 1

What is Progressive Web Apps (PWA) ?

Hello Geeks, In this article we will learn about Progressive web apps also known as PWA. Now a days, a lot of product based companies are adopting Progressive web apps (PWA) to increase the engagement of their users. Progressive web apps (PWA) are fast, installable and reliable. Progressive web apps (PWA) has features like your native mobile app. For example,

  • You can install PWA and add to your home screen.
  • PWA can access to your mobile camera (ask you permission)
  • PWA can access to your location (ask you permission)
  • PWA has push notification features
  • PWA has background syncing.
  • By using PWA you can access content off line.

progressive web apps



A Simple Progressive web Apps

Let’s see how we can create a simple progressive web apps which make your web app installable. A simple progressive web apps could be a installable apps on your mobile phone and when you open, it will look like native app.

For creating PWA you set some configuration in “manifest.json” file. This is JSON file with property and its value required for PWA. You can simply add this file to your web apps as below.

<link rel="manifest" href="/manifest.json">

PWA and Browser support

manifest.json file isn’t supported by every browser. But the best part is that, the browsers which don’t support it won’t fail. They will simply ignore this line and not load it. so you can use this application anywhere without any page break.

However here is a link to see the list of the browsers which support it manifest.json

Lets add property to manifest.json file

{
  "name": "W3classes.info - Progressive web apps",
  "short_name": "w3classes",
  "start_url": "/index.html",
  "scope": ".",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#336699",
  "theme_color": "#3f51b5",
  "description": "Learn Progressive web apps developement",
  "dir": "ltr",
  "lang": "en-US",
    "icons": [
    {
      "src": "/src/img/icons/app-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "/src/img/icons/app-icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/src/img/icons/app-icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/src/img/icons/app-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/src/img/icons/app-icon-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "/src/img/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Understanding the manifest.json file

  • name – add the long name of your web apps
  • short_name – short name of your web apps. when you install It will show below the app icon.
  • start – starting point of application. it means which page should get loaded on startup when user tap on app icon
  • scope– it means which pages are included in our progressive web apps. Here dot(.) means all files from your web root folder.
  • display – Display allows us to define how the app should actually load once it was added to the home screen standalone. It means It looks like a full native app. we will not see the address bar.
  • background-color – it will display at the back of your application while your PWA loading
  • theme-color – This property set your toolbar at the top will look like especially on a native device.
  • dir – this is used to set the reading direction. For example ltr – left to right
  • lang – Set the main language of PWA
  • orientation – Here you can basically control it in which orientation your web app should be opened. Like portrait or landscape.
  • icons – This is an array of object. Object has three properties src, type and size of icon. This property allows us to configure a set of icons where the browser will choose the best fitting icon.

Now add this manifest.json file to your application header as below code.

<link rel="manifest" href="/manifest.json">



PWA – Add to home screen a2hs

Now you will be able to add your web apps on home screen.

PWA -Add to home screenpwa add to home screen

 

Hope this article helps you understand the basics of progressive web apps. In next article we will see more of it.

Thanks for reading. Happy Coding 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.