User:Haiiamnikhil

= Progressive Web Apps (PWA) = Progressive Web Apps (PWA) is a web app which uses the modern web capability to deliver an app-like experience to users.

It signifies a new software development techniques to provide an app which is capable of loading contents without help of the internet. When compared to other traditional apps PWA is a hybrid app which is capable of converting a website to a Mobile App.

This is built using basic technologies like “HTML”, “CSS” and “JAVASCRIPT”. So, are intended to work on all platforms that follow the standards of a browser.

Though it is not a native Mobile App users will not have to download it from any digital stores like Apple Store, Play Store etc. It can be used by just saving the website directly. Even though this is not downloaded it contains all the features need for a Mobile App like Push Notifications, Offline Working and Hardware Access.

Why Progressive Web Apps
The growth of Mobile users has rapidly increased over the past few years. It is expected that more than 60% of people today use mobile for their different searches. The core reason for this is the updated features and compatibility provided by Mobile Phone Companies.

Some companies still lag in mobile apps due to the extensive cost of developing and most of the users don’t encourage themselves in downloading an app due to insufficient space or facing hardware issues.

So, having an end for this issue MNC companies like Google, Mircosoft, Facebook etc had taken the initiative to develop Web Apps which works like an App on Web

Sessions to be Covered

 * What is a Web App?
 * What is PWA?
 * What are the Characteristics of PWA?
 * What is a Service Worker?
 * The Working Procedure of PWA.
 * What are the challenges faced with PWA?
 * What are the Requirements to implement PWA on a website?
 * Some Frameworks and Tools used to develop PWA.
 * Some Top Companies implemented PWA.
 * Conclusion.

What is a Web App?
“A web app is an application programme which is stored on a remote server and is delivered over the internet with the help of the browser.”

Eg:- Google Docs, Microsoft SilverLight, WhatsApp etc

Most of the companies today use a common Web App Called Progressive Web Apps or well know as PWA.

PWA was a concept which was developed by Google in late 2015 to provide websites as an app on Mobile Environment.

What are the Characteristics of PWA?
Progressive Web Apps are designed in a manner that works on those platforms which maintenance web standards. Due to this reason, developers will be able to develop cross-platform full-fledged.

As per Google’s, the characteristics of PWA extends to:


 * Progressive.PWA has a progressive factor which gives it a standard to work with all kind of users. As it provides this feature it makes it capable of working with all browsers with the help of Progressive Enhancement Principle.
 * Responsive.Progressive App adjusts to all the environment Desktop, Mobile, Tablet etc. As a reason, it acts as an app when it comes to the mobile environment.
 * Fast.Some people still haven’t upgraded from 2G internet, which specifies a negative side of telecom. In these situations, websites which have web apps installed can load 3 times faster.
 * Splash Screen.Same as native apps PWA has the splash screen feature at the time of startup to provide an effect of native apps.
 * App-Like.PWA has the same interface as a Mobile App with navigations and push-notifications and other features of the native apps.
 * Fresh-Look.Progressive web apps provide all the most updated as the server refreshes its content when goes online.
 * Security.Same as the website PWA is served via HTTPS to ensure the data and to ensure content hasn’t been tampered with.
 * Offline.When compared to other native apps PWA process an additional feature. It can load content even offline, by having a caching technology called Service Worker( What is a service worker, is mentioned below)
 * Installable.It possesses a common feature when compared to other Mobile Apps, which is, it can be installed on a Mobile Home Screen.
 * Shareable.With the help of URL, Progressive Apps can be shared and can be installed without a complex installation process.

Beyond these, there are even more in differ of development platforms like Magento, Wordpress, Shopify etc.

The Working Procedure of PWA.
When compared to other native apps, Progressive Web Apps has a slite different working perspective. Here below let's have a look at how PWA works.

Here let's take an example of one of the leading PWA website “Twitter”.


 * A user visits “twitter.com” for the first time.


 * Now the browser caches the first hit data in its Cache. After a while when the same person logs on to the same website a pop-up appears from below the screen. Showing of “Add Twitter to Home Screen”


 * As the user clicks this pop-up. A new dialogue box appears asking of opinion to add to Home Screen.


 * When the“Add” option is selected, it starts to download its web app. After the download gets compleated a new app appears on the Home Screen.


 * After it gets downloaded to the Home Screen when it is opened it appears exactly as a Mobile App.

The above-mentioned steps are a simple procedure of the working principle of PWA.

What are the Challenges faced with PWA?
PWA has some challenges like Browser unsupportability, Hardware Supportability, Specified rules and Communication Issues.

These are some of the challenges to be faced with Progressive Web Apps. Although PWA is a not a native app it is still Under Development by some companies.


 * Browser Unsupportability.PWA is an app which is only compactable for those browsers that maintain the web standards. Although browsers like Chrome, Opera, Mozilla supports PWA, were Safari, Brave etc are still under development to bring the functionality to make use of PWA in their browsers. After a detailed time of Development now Microsoft made EDGE compactable for PWA.
 * Hardware Supportability. As Progressive Web Apps are built in the latest technologies, it only supports that hardware which is compactable of operating HTML5 in it.
 * Absence of Rules.When compared to other native Mobile Apps PWA is not a downloadable app from digital stores, So, there is a failure of providing legal supports to the users. This might bring a lack of confidence to work with Progressive Web Apps.
 * Communicational Issues.Native Apps like Google, Facebook, Instagram has a common feature of communicating with other apps. Where PWA fails to communicate with other apps installed.

What are the Requirements to implement PWA on a website?
Service Worker, HTTPS Connection and the Manifest File are the three essential requirements to implement PWA on a website.

As we have covered what is a Service Worker Above, here let’s look for the rest.

What is a Service Worker?
A Service worker is a type of web operator written in Javascript which works between the browser and network in addition to intercepting network requests, caching or recovering data from the cache and delivering push messages.

Service Worker plays a vital role in the PWA mechanism. It is what helps a website to load contents offline. This caches required resources in the browser for the first time load of a website. So, when a user visits a website the Service Worker checks the cache and returns the output from it. If no cache is available it takes the help of the Internet.

The developer has a full-fledged control over the Service Worker. They can control SW(Service Worker)’s behaviours in-corresponding to different scenarios. As the caching gets completed a response message can be given as output showing that “Caching Completed for offline Working”.

Basically, the Service Worker depends on two different APIs to make app work offline: FETCH and CACHE.

Fetch: As the name implies FETCH is a standard way to receive content from the network.

Cache: Caches a small amount of data required for the first-time load processing of websites.

HTTPS Connection in PWA.
HTTPS stands for HyperText Transfer Protocol Secure. This is the most secure file transfer communication protocol between 2 systems.

Progressive Web Apps provide a secure connection by establishing an HTTPS communication channel. As a part of this, a user feels relatively safer in allowing its permissions. Moreover, PWA can be indexed by different search engines like Google, Bing etc. This connection protects the user data by using TLS(Transfer Layer Security)and Cryptographic protocol.

Use of Manifest File in PWA.
The manifest is a simple JSON file which informs the browser about the web application how to perform in different platforms when installed.

It contains information like Icons, Name, Start Url, Background Colour, Display, Orientation, Scope, etc.

With the help of a Manifest File, a browser can trigger the web app install notification to a user who visits the same website more than once.

Here is an example of Manifest File.

Some Frameworks and Tools used to develop PWA.
As we know there is an end number of frameworks available to build an eCommerce store or a website. But when it comes to PWA, it keeps a benchmark for this Scenario.

Here are some of the most commonly used frameworks and tools to develop Progressive Web Apps.

Angular JS
Angular JS 5 is one of the most robust tools to develop the client-side part of web apps. With this arrival, it made easier to develop PWA and the latest version of this framework has several new features for creating responsive and reliable PWA. Along with this Angular JS, the app can manage the big scope of data. Here the new CLI commands allow developers to easily turn projects into PWA.

Polymer JS
Polymer JS is a lightweight javascript framework developed by Google. The main aim of Developing Polymer App Toolbox is to simplify the development process of PWA. Here there is a tool named App Layout Component which automatically enables the service worker and allows creating responsive designs. With the help of Polymer JS, mobile developers can reuse elements that the synchronizing data with devices.

React
This is one of the most commonly used tools to develop PWA because it is backed up Facebook. The main use of using React is that the code can be reused and shared for later usages. Creating React App automatically generates all the required data need for PWA. At last these data should only to be customized.

Lighthouse
Lighthouse is an open-source automated tool for improving the quality of webpages and web apps. It audits the performance, accessibility, and more and informs whether the App is ready to become PWA. When a Web App is audited on lighthouse it gives a complete report of errors and it’s efficiency.

Workbox
Workbox is another tool developed by Google. It has several Node Modules and libraries which is capable of enhancing the performance of Progressive Web Apps. As the apps get ready to publish, it is important to be noticed that all the factors mentioned by Google for Web Apps are met.

Some Top Companies Implemented PWA.
Before concluding this article here are some top companies who have already implemented PWA on their website.

Twitter.
As per the survey conducted by twitter on the number of users, it has been estimated that more than 100million users use Twitter daily form all around the world and it keeps on increasing day by day. So, Twitter had taken advantage of PWA in 2017 on their Twitter Lite Platform.

The Benefit of this is that it takes 3 times less the space of a traditional Twitter app and even responds to all the environment faster and secure.

Uber
Uber is well known for its technologies distribution and they have now listed one of the top companies to implement Progressive Web Apps. Uber makes the advantages of PWA where a user need not download an additional app for taking a ride.

Instagram
Instagram is one of the top Social Medias used to shares Images and Videos all around the world. Now Instagram on the mobile browser is assessed with the help of PWA. It works the same as a traditional app provides all the features like Image Upload, Video Upload, Tags, etc.

Forbes
Another leading company who has implemented PWA on their website is Forbes. It is basically a Global Media Company. With of help of Progressive Web apps, Forbes was able to provide faster browsing experience.

These are some of the companies who have already switched over to PWA. Beyond them there are some more like:

Pinterest, Debenhams, Smashing Magazine, Financial Times, Alibaba, Flipkart, etc.

Conclusion
According to Google, from 2015 till 2019 there has been a massive amount of MNC companies who have invested to build PWA. Here is the Case Study of Google. Category:Technology Category:Web development software Category:Web Apps Category:Progressive Web Apps