Build a better Web: Progressive Web Apps
By: Vrijraj Singh
Tags: Web Development

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full-screen experience.

Why we need PWAs and what are their features?

Let’s discuss some of the core attributes which are missing from common non-progressive web applications.

Reliable

The app should be lightning fast when loading, it should be close to instantaneous and should also open when there is no network or fairly low-speed network like 2G. Google found that 53% of the users abandon the website if the page took longer than 3 seconds to load. Fast

The scrolls and page transitions should be buttery smooth when the user is interacting with the web app. Everyone hates crappy scrolls. Responsive

The app should fit in all the different sizes of devices. The perfect web app should be like liquid, which takes the shape of its vessel. Installable

If we want to make web apps closer to the native apps, they have to be installable and should reside in the home screen along with other native apps, so that the user can access the PWA in one click. Splash Screen

PWA adds a splash screen during the startup of the app. This makes the PWA feel more like a native app 😉 Highly engage-able

The app should keep the users engaged. A PWA provides features like push notification, home screen icon, full-screen and offline first app to glorify user engagement.

All the above characteristics are possible in PWA.

A PWA is just a regular web app which attended the best university and mastered user experience🎓

What are the Technical components of a PWA?

PWA has some important technical components which work together and energizes the regular web app. The following components are required to develop a good PWA.

Let’s get an overview of each of them.

Service Worker

Our web apps talk to the network directly and if there is no network, the screen shows the famous dinosaur.

Screen when our normal web cannot connect to internet

Here is an opportunity to optimize this process. For the first-time load, the service worker stores the required resources in the browser cache. And when the user visits the app next time, the service workers check the cache and returns the response to the user before even checking the network.

A Service worker is just a component of JavaScript code which works as a proxy between the browser and the network. A Service worker manages the push notifications and helps to build the offline first web application using the browser’s cache API.

This is how the service worker performs its responsibility to empower the regular websites

This can speed up the performance of your app, whether the device is connected or not connected to the internet.

The developer has full control over the behavior of the app and how it should respond in various scenarios. The service worker has its own lifecycle events.

Once the caching is complete and ready for offline visits, you can also choose to brag about it by displaying a note saying that caching is complete and the user can visit this offline as well.

2. The manifest file

The manifest file is a config JSON file which contains the information of your application, like the icon to be displayed on the home screen when installed, the short name of the application, background color, or theme.

If the manifest file is present, the Chrome browser will automatically trigger the web app install banner, and if the user agrees, this adds the icon to the home screen and the PWA is installed. Isn’t this bossy? 😎

The following is the sample manifest file:

{

"short_name": "CodinGurukul",

"name": "Coding Gurukul",

"icons": [

{

"src": "/images/icons-192.png",

"type": "image/png",

"sizes": "192x192"

},

{

"src": "/images/icons-512.png",

"type": "image/png",

"sizes": "512x512"

}

],

"start_url": "/home/?source=pwa",

"background_color": "#3367D6",

"display": "standalone",

"scope": "/home/",

"theme_color": "#3367D6"

}

Today I am Going to Show How You can Convert your Existing Static Website to a Progressive Website in minutes.

After checking offline mode when we reload the page it will show the internet connection error but it will not show dinosaur but your app will run offline.

I hope this article will be helpful for you and you learned the whole working procedure . I know it was quite long procedure many of you may get confused . I will soon making a video tutorial for the above procedures.

You Can use Chrome extensions like Lighthouse to Audit your PWA App and make certain correction or adding properties in manifest file.

If you face any problem feel free to contact me on Facebook

Happy Even Offline!!