What are PWAs (Progressive Web Apps)

 It is undeniable that applications do dominate our cellphones. It used to be that apps didn't impact our desktops or browsers in the same way. But that has all changed in the last few years. Progressive Web Apps (PWA) are evolving and changing the way we interact with websites of all types. But What Are PWAs? What do PWAs do that websites don't? Here's what we need to know about Progressive Web Apps.

What are PWAs

Progressive Web Apps are web applications that offer users a regular website but appear as native mobile applications. PWAs apparently bring the usability of native mobile apps to the feature set of modern browsers, taking full advantage of advances in both areas of development. What defines PWA?

* Universal : PWAs should work seamlessly for every user, regardless of their browser.

* Responsive : PWA should work with any device, like laptop, tablet, smartphone and so on.

* Design : Design should mimic native mobile apps, meaning slim and easy-to-find menus, with simple interactivity for advanced features.

* Secure : PWA must use HTTPS to keep user data secure.

* Discoverable: Users can find PWAs, and they are easily identifiable as applications (not “sites”).

* Engagement: PWAs must have access to native engagement features such as push notifications.

* Updates: PWAs stay up to date, servicing the latest version of a service or site.

* Installation: Allows users to easily “install” PWAs to their home screens without the need for an application store.

* Sharing: PWAs only require one URL to share, without any installation.

As we can see, PWA aims to provide users with a complete website experience with simplified features and Native Application interface design.

How PWAs Work

The key to Progressive Web Applications is the browser's Service Worker. Service Workers are scripts that run in the background of our browser, "separate from the web page, opening the door to features that don't require a web page or user interaction." We may be using service workers like push notifications and background synchronizer nowadays, but the future of live PWA gives these scripts even more power. As such, service workers form the basis of the PWA standard, using web caching for near-instant results.

Before service workers, incoming browser cache scripts were Application Cache. App Cache features in many offline-first services, but is a bit error-prone. Also, App Cache has some well-known limitations, as A List Apart explains. But the main problem for developers is the lack of direct interaction with how AppCache works, stopping developers from accurately fixing problems as they arise. In turn, websites and services with full offline functionality are a risky choice.

However, Service Workers only last as long as their actions are necessary. In a PWA, when we click on something or use a feature, a Service Worker takes action. Service Workers (remember, these are scripts) process events, deciding if the offline cache can complete the request. The idea is that there are multiple offline caches for PWAs to choose from, giving a much wider range of offline functionality. Also, cache is not only for offline speed boost. For example, we are going to PWA, but our connection is very unstable. The service worker serves up the previous cache, fully functional, without interrupting our experience.

Progressive Web Apps Browser Support

Progressive Web Apps Browser Support

There are two requirements for using Progressive Web Applications: a compatible browser and a PWA enabled service. First, let's look at the browser. We have two options to check for PWA browser support. The first is Jake Archibald's Is service worker ready? which effortlessly displays the PWA-ready status of major browsers, plus Samsung internet.

For a more detailed overview of browser PWA support, one should check out Can I Use, a website that specializes in listing implementations of various web and browser technologies based on browser version. For example, if we enter “Service Worker” in the search bar, we find a table showing the version number used by each browser to implement the Service Worker PWA.

Almost all major browsers support PWAs. Microsoft Edge and Safari are the latest additions to the PWA support list. In contrast, QQ Browser and Baidu Browser are now using an outdated version and have gone down to the second level.

How Do We Know If a Website Is a PWA?

How Do We Know If a Website Is a PWA

If we are a developer and dig into a site's source code, there is no sure way for us to know exactly whether a website is built on PWA technology. Even so, there are some tricks which do not guarantee definite results, but can give us some signs that a given website is a PWA.

One Page Website

This is the simplest way to tell if a website might be a PWA. It is based on the nature of PWAs: Progressive Web Apps are technically single page websites. This doesn't mean a website built on PWA only has one page. This means the pageview event occurs only once, when the user initially loads the website. After that, all page loading is handled by Javascript. This is different from a normal website, where every page change causes the page to reload along with all of its HTML resources. The way it works is very simple: view the active tabs in our browser. If the site is a PWA, when we change the site page it doesn't reload, meaning there is no "loading" animation on the browser tab.

The point of the site not reloading when we change pages is that we are only on one “page” the whole time. That's why PWA pages load very quickly and smoothly. All pages are loaded before the first time we visit the site and sent to us afterwards. They are independent of our network speed, and can even work offline!

Service Worker

As previously mentioned Service Worker is the name of the technology behind Progressive Web Applications, which supports offline capabilities, push notifications, and caching of resources. According to Google, Service Workers are the core of the PWA technique. So, if we can tell if a website uses Service Worker technology, we can tell if it might be a PWA.

If we use a Chrome based browser, we can check it easily by using the Inspector Tool. Right click on the website you want to check, click Inspect Element. Then, go to Application tab > Service Worker. We can easily see if there is a Service Worker on that site.

But this trick only gives us a hint about the possibility that a particular website is a PWA. Despite being a core part of PWAs, Service Workers are not exclusive to PWAs. Non-PWA websites can also take advantage of Service Workers to enhance their functionality.

However, we can tell exactly if a website is not a PWA by looking at its URL. If a website's URL starts with http:// instead of https:// , then it's definitely not a PWA. This is because PWAs can only work on websites running secure domains, i.e. https.

Examples of Progressive Web Apps

Examples of PWA Applications

In January 2019, Chrome 72 for Android shipped with Trusted Web Activity (TWA). TWA allows Chrome tabs to open in independent mode. In turn, this enables PWA features in the Google Play app store. Some of the first PWAs to appear on Google Play were Twitter Lite and Google Maps Go. Maybe there will be a lot more with time.

Will Progressive Web Apps Replace Native Apps?

Will Progressive Web Apps Replace Native Apps

Progressive Web Apps are an excellent cross step between our browser and a Native Mobile Application. Will PWA replace native applications completely? PWAs are great as lightweight offerings, but given that they are currently mostly focused on replicating existing sites and services, they are not going to replace native applications. At least, not for now. PWAs work fine. The data available in PWA Stats supports this as well. Here are some interesting points that illustrate how PWAs change our interactions with commonly used websites:

* Trivago saw a 150 percent increase in engagement for users adding their PWA to their home screen.

* “Forbes' PWA homepage loads completely in just 0.8 seconds,” while impressions per visit are up 10 percent. Forbes' PWA also saw user session length double.

* Twitter Lite saw a 65 percent increase in pages per session, with a massive 75 percent increase in tweets. It's also interactive "in less than 5 seconds over 3G."

* Alibaba saw a 76 percent increase in mobile conversions.

Conclusion

So What Are PWAs (Progressive Web Apps)? PWA is an application that can act as a native web page and mobile application at the same time, to provide the best user experience. PWA is used so that readers can access web pages without the help of the internet. This is how PWA works on web pages. In PWA Services Service Worker is intended to control network requests and serve offline, caching content, push notifications and background synchronization.

________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ ________

That's all the article What is PWA (Progressive Web Apps). Look forward to other interesting articles and don't forget to share this article with your friends. Thank you…

Resa Risyan

Just an ordinary person who wants to share a little knowledge, hopefully the knowledge I provide can be useful for all of us. Keep in mind! Useful knowledge is an investment in the afterlife.