PWA have been popular lately. The term stands for Progressive Web Apps. Since their introduction in 2015, most browsers and devices finally support them in 2019. As a result, more and more developers are focussing on converting or integrating their existing projects to this new technology.

According to Google Codelabs…

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.

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=en

A relationship between the user and the app? What kind of weird thing is that?

It is basically an attempt to have the benefits of both, web pages/web applications, along with native apps. Continuing, the aim is to improve the UX for mobile users. They can act like native apps when displaying pages on mobile phones. They can be effective in improving user engagement, conversion, as well as retention.

In the first place, what is PWA?

PWA stands for Progressive Web Apps. It is a technology released by Google in 2015. It is an intermediate between native apps and mobile browsers. These apps are built using the Service Worker. JavaScript runs in the background of the browser, the apps can use push notifications, etc.

Why are they getting attention again?

It might be because Safari became compatible with them in March 2018.
In addition, many new Windows 10 Apps are also released as PWA apps. Furthermore, Google PlayStore also supports them now.

Characteristics of PWA

Advantages

• Pages load faster than regular web pages. (Because they are loaded in the background.)
• There is no need to install the app on the device.
• You can add an icon to your home screen.
• You can implement UI like native applications. (eg. full-screen display)
• You can use push notifications.
• Using cache allows offline operation too.
• You can make them without bothering about the OS.

Points of concern

• Some browsers may not support them or implement them differently
• You cannot know the number of downloads and uninstalls

Differences between PWA and native apps

	App store presence	Platform	Search (SEO)
PWA	Depends*	Cross-platform (No need to bother with it)	Content in the app with the search engine!
Native app	Yes	It must be taken into consideration = development costs are incurred	Search by title and tag

* They can be distributed on Google Play Store, though they may not be marked explicitly.

Difference between PWA and mobile browser

C	Reading speed	Display
PWA	Instant (loaded in advance in the background)	Full screen etc
Mobile browser	Depends on the environment	There are indications like URL column etc.

How to make web pages PWA compatible?

You do not need to use a specific framework or library to develop PWA. If you use the browser API listed below and develop a webpage/service in line with Google’s Progressive Web App Checklist, you can say that the page/service is a PWA. You can create them using generic website/web-service development technology. In other words, you don’t need specific knowledge or tools for native application development.

• Service Workers (Offline enabled, push notification)
  • Push API
  • Notification API
• localStorage / IndexedDB (for offline support)
• History API (for offline support)
• Geolocation API (Location acquisition)

Using Google’s Web Starter Kit, you can create a template for the files and templates needed for PWA. You also can quickly create simple pages that roughly follow PWA. It does take a long time to make a large site though.

Supporting Browsers

• Chrome:
  
  • Supported by both Desktop and Android versions of Chrome.
• Safari:
  • Compatible on Desktop as well as iOS.
• Firefox:
  • Compatible except for some functions. Features that depend on the Web App Manifest are not available.
• Internet Explorer/Edge:
  • Not compatible with IE. Some features are available with Edge.

Conclusion

The ability to appeal to the user and improve the user experience is at the core of recent trends in web technologies. You can use Progressive Web Apps to expand the possibilities of your website with application-like functions.