Progressif Web Applications(PWAs)

---

Definition

Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.

PWA is a web application that uses several modern technologies that make the user experience like using a native app (Android / iOS)

PWAs Concept

Native apps had infrastructure on which a developer can build engaging apps. Native app store apps do things like send push notifications, work offline, look and feel like an app (as Apple and Google have imagined them), load on the homescreen, and so on and so forth. But you would still lose a big chunk of users who never downloaded your app. Though mobile web apps accessed in a mobile browser, by comparison, historically haven’t done those things, they were still relevant.

Developers started shutting down their mobile-websites on the pretext of not being able to provide as good user experience, and started putting up these prompts to install their app.

From an business angle, this made a lot of sense. Land user on mobile web and redirect them to download your app. But as an end user who is used to the open web, this seems scary. And an obvious question crops up- how many apps can one have on the limited memory of a hand held device? You can’t have an app for everything.

Progressive Web Apps fix that with new Web APIs, new design concepts, and new buzzwords. PWAs bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies and run in a secure container accessible to anyone on the web. On the whole, Progressive Web Apps describe a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web.

Service Worker

Service Workers is the answer to this problem, It act as proxy servers between the browser and an app and network. They are incredibly powerful but just as confusing. They are the technology behind the PWAs; they power push notifications, offline functionality, content caching, background content updating and much more.

Since everyone is almost always connected, offline functionality for the app may not sound important, but the point is not about simply being available offline but about performing well in any network conditions. Low signal or slow speed is not that uncommon and PWAs that are properly designed with registered Service Workers guarantee smooth navigation even under bad conditions.

Service worker at a high level is a worker script. It works out of sight; is not dependent on the app, and works in reaction to events like push notifications, network requests, connectivity changes and more.

Below is an overly simplified version of the service worker lifecycle on its first installation.

Characteristic

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps" to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to progressive web applications in their native operating system (OS). According to Google Developers,these characteristics are:

• Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.

• Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.

• Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.

• App-like - Feels like an app, because the app shell model separates the application functionality from application content.

• Fresh - Always up-to-date thanks to the service worker update process.

• Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.

• Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.

• Re-engageable - Makes re-engagement easy through features like push notifications.

• Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.

• Linkable - Easily share the application via URL, does not require complex installation.

---

Advantages of PWAs

• App Like

One of the main benefits of the PWAs is that they are developed like regular mobile apps although comprising full-functionality of websites with database access and dynamic data. Developers can take full advantage of conventional theory and existing frameworks on how superior user experience is offered by mobile apps compared to websites.

• Linkable

The difference between a PWA and native app, is that the PWA can easily be accessed via URLs and thus, they are indexable by search engines. Businesses especially can benefit greatly from it.

• Offline Mode

As is mentioned above offline functionality is important. It increases engagement and availability greatly. With offline mode, any information can be stored automatically during the last internet access. The offline page can be completed with the brand’s logo, some info and can also include some advanced features. this can greatly benefit businesses that have product catalogs which users can view in the offline mode- increasing user engagement rates.

• Discoverable

Since the PWAs reside in browsers, they are as easy to search engine optimize and as a result easy to discover as any other regular app or website. Plus, Google’s initiative to have Chrome apps replaced with PWAs by the mid-2018, will definitely attract the new audience to PWAs- increasing their discoverability.

• Low In Data

In emerging markets like India, which still have a low bandwidth, data comes at a premium. An app which takes close to 10 MBs as a native app, can be reduced to about 500KB when made an PWAs.

• No Updates Required

PWAs gets updated like web-pages. You get the latest version when you use. No need to update them every now and then.

• Do not need to Install

You don’t need to install them to start using. They are simple web-pages. Users choose to ‘install’ when they like it.

• Sharing is Easy

Unlike an app you can share a PWAs with its URL

---

Disadvantages of PWAs

• Difficult to Promore PWA

In emerging markets like India, which still have a low bandwidth, data comes at a premium. An app which takes close to 10 MBs as a native app, can be reduced to about 500KB when made an PWA.

• Not in Play Store

Traffic from mobile web can be redirected to Play Store to download the Native App but it doesn’t work the other way round. You miss significant traffic who use Play store for their primary search.

• Plugin not Fetch

Plugins like facebook login and Google login can’t fetch data from Facebook and Google Apps. You need to separately login on web too.

• Can't Use New Hardware

PWAs can’t use some of the latest hardware advancements (like fingerprint scanner), they are browser after all!

• Key re-engagement Features Limited

Key re-engagement features like add to homescreen, notifications etc. limited to Android.

• Not All Browsers Support

Full support for PWAs are not available in default browsers of some of the manufacturer's.

---

Tools for Developing PWA

• PWA.rocks
• Knockout
• PWABuilder
• AngularJS
• Google Developers
• Webpack
• Github

---

Source :
https://en.wikipedia.org/wiki/Progressive_web_applications
https://developers.google.com/web/progressive-web-apps/
https://www.intelegain.com/what-are-progressive-web-apps/
https://www.quora.com/What-are-the-advantages-and-disadvantages-of-Progressive-Web-Apps-over-Native-Apps
https://medium.com/wwwid/pengenalan-progressive-web-app-pwa-bagian-1-cac0fadbe5f4
https://developers.google.com/web/fundamentals/primers/service-workers/images/sw-lifecycle.png
https://www.webdesignerdepot.com/2017/08/7-tools-for-developing-your-first-progressive-web-app/