What Are Progressive Web Apps and How Do I Install One?
Pinterest Stumbleupon Whatsapp
Advertisement

Apps dominate your phone 10 Android Apps That Will Make Your Life Much Easier 10 Android Apps That Will Make Your Life Much Easier Life is complicated -- but these apps can make it just a little bit easier to navigate. Read More . And while apps don’t quite influence your desktop or browser in the same way, that looks set to change. Progressive Web Apps (PWAs) are growing in stature as more browsers offer support.

But what exactly is a Progressive Web App and what will they do for you? Here’s everything you need to know.

What Is a Progressive Web App?

Progressive Web Apps are web applications that offer a regular site to users but appear as a native mobile app. PWAs attempt to bring the usability of a native mobile app to the modern browser feature set, taking full advantage of advances in both development areas.

What defines a PWA, then?

  • Universal: A PWA must work seamlessly (well, almost) for every user, regardless of their browser.
  • Responsive: PWAs should work with any device,such as your laptop, tablet, smartphone, and so on.
  • Design: The design should mimic native mobile apps, meaning streamlined, easy-to-find menus, with simple interactivity for advanced features.
  • Safe: PWAs should use HTTPS to keep user data secure.
  • Discoverable: Users can find PWAs and they are easily identifiable as an application (rather than a “site”).
  • Engagement: A PWA must have access to native engagement features like push notifications.
  • Updates: PWAs remain up to date, serving the latest versions of a service or site.
  • Installation: Allows users to easily “install” the PWA to their home screen without needing an app store.
  • Sharing: PWAs only require a single URL to share, without any installation.

As you can see, PWAs aim to provide users a full website experience with the streamlined features and interface design of a native app.

Progressive Web Apps and Service Workers

Key to Progressive Web Apps are browser service workers.

A service worker is a script that runs in the background of your browser, “separate from a web page, opening the door to features that don’t need a web page or user interaction.” You might use service workers like push notifications and background sync How to Disable Annoying Notifications on Chrome, Firefox, Safari, and More How to Disable Annoying Notifications on Chrome, Firefox, Safari, and More Here's how you can disable annoying browser notifications in Chrome, Safari, Opera, Firefox, and Microsoft Edge. Read More at the moment, but the immediate PWA future gives these scripts greater power.

As such, service workers form the foundation of the PWA standard, using the web cache for almost instantaneous results.

Before service workers, the go-to browser cache script was Application Cache (or App Cache). App Cache features in a wide range of offline-first services but was somewhat error-prone. Furthermore, App Cache has several well-known limitations, as A List Apart explains.

But the main problem for developers is a lack of direct interaction with exactly how AppCache works, stopping developers accurately fixing issues as they arise. In turn, websites and services with full offline functionality were a risky choice.

Service workers, however, only last as long as their action is required. In a PWA, when you click something or use a feature, a service worker springs into action. The service worker (remember, it is a script) processes the event, deciding whether the offline cache can complete the request. The idea is that there are multiple offline caches for the PWA to choose from, giving a much wider range of offline functionality.

In addition, the cache isn’t just for offline speed boosts. For instance, you head to a PWA, but your connection is extremely patchy. The service worker serves a previous cache, fully-functioning, without interrupting your experience.

PWAs: What Are Your Browser Options?

There are two requirements for using a PWA: a compatible browser and a PWA-enabled service.

First, let’s look at browsers. The Is PWA Ready? site is the best way of checking browser support.

Is PWA Ready? Website

Breaking it down a little more:

  • Desktop browser (full support): Chrome, Firefox, Opera, QQ Browser, 360 Browser
  • Desktop browser (buggy support): Safari, Microsoft Edge
  • Mobile browser (full support): Chrome, Firefox, Xiaomi, UC Browser, Baidu, Wechat, Sogou, 360 Browser, Quark
  • Mobile browser (partial support): Samsung, QQ Browser
  • Mobile browser (buggy support): Cheetah

So, the major browsers all support PWAs. In the case of Microsoft Edge and Safari, additional PWA support is coming very soon.

Finding and Installing PWAs

Now that you know which browser to use, you can think about searching for and installing a PWA. For this example, I’ll be using a Samsung Galaxy S8 with Chrome.

Already, PWAs are everywhere. Many companies are adapting their sites and services to offer PWA functionality. However, there isn’t a single sure-fire method of finding a PWA yet. PWAs are not deployed to the Google Play Store or App Store. In my experience, heading to a company or service’s mobile site usually triggers an Add to Homescreen dialog box.

Check out the video below to see what happens when you visit the Twitter mobile site.

Twitter Mobile PWA

Once you tap the Add to Home Screen button, you’ll see the PWA appear in your app drawer. It’s nearly like installing an app normally from Google Play.

Of course, visiting countless sites and hoping to see the homescreen trigger isn’t useful. In fact, it is downright time-consuming. As it stands, there aren’t too many sites dedicated to listing PWAs, and those that exist don’t crawl the web like a search engine How Do Search Engines Work? How Do Search Engines Work? To many people, Google IS the internet. It's arguably the most important invention since the Internet itself. And while search engines have changed a lot since, the underlying principles are still the same. Read More .

First, try outweb. It lists a pretty decent range of PWAs, with new options frequently appearing. Next, try pwa.rocks. It has a smaller selection, but some handy PWAs that you’ll want to add to your device.

Will PWAs Replace Native Apps?

Progressive Web Apps are an excellent hybrid step between your browser and a native app. Will they replace native apps entirely? Given that their current focus is existing sites and services, not at the current time.

We will undoubtedly see more crossovers, though. The statistics available at PWA Stats back this up, too. Here are a few interesting numbers for you to mull over:

  • Trivago saw a 150 percent engagement increase for users adding their PWA to a home screen.
  • Forbes’ PWA “loads in 2.5 seconds,” while impressions per visit are up 10 percent. Forbes’ PWA also saw user session lengths double.
  • Twitter Lite saw a 65 percent increase in pages per session, with a massive 75 percent increase in tweets.
  • Alibaba saw a 76 percent increase in mobile conversions.

PWAs aren’t yet mainstream. But with the huge range of benefits they provide, such as saving space on your device Save on Storage Space With These 7 Lite Android Apps Save on Storage Space With These 7 Lite Android Apps If you have an older device or just a cheap Android phone, these apps will be much better for you than their mainstream counterparts. Read More , you’ll hear about them more and more throughout 2018 and onwards.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. SnowFlake816
    April 7, 2018 at 5:32 pm

    Thank you for this informative article. I had come across the term PWA but never knew what it really meant.

    • Gavin Phillips
      April 7, 2018 at 6:11 pm

      No problem, thank you for reading and commenting :)