What are Progressive Web Apps? Why Use PWA?

Apps dominate your phone. 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 it do for you? Here’s everything you need to know.

What Is a Progressive Web App (PWA)?

Progressive Web Apps are web applications that offer a regular site to users but appear as native mobile app. PWAs attempt to bring the usability of a typical 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 with a full website experience with the streamlined features and interface design of a native app.

Benefits of PWA

Progressive web apps are designed to provide a user experience that is similar to that of a native mobile app, including features such as offline support and push notifications. They are also intended to be faster and more responsive than traditional web applications.

There are several benefits of progressive web apps over traditional web applications or traditional mobile apps.

First, PWAs are designed to be fast and responsive. They are built using common web technologies that are typically much faster than native mobile app code. This can significantly affect the user experience, particularly on devices with slower processors or low-bandwidth connections.

Second, these apps can take advantage of many of the same features that are available in regular mobile apps. For example, they can be designed to work offline, send push notifications, and access device hardware such as the camera and GPS.

Third, the progressive web app is much easier and cheaper to develop than native mobile apps. This is because they are built using standard web technologies that most developers are already familiar with. In contrast, native mobile apps often require specialized skills and tools.

Fourth, they can be deployed without going through the traditional app store approval process. This means they can be made available to users faster than native mobile apps.

Finally, progressive web app is discoverable than native mobile apps. This is because they can be indexed by search engines and linked to from websites and social media.

Progressive Web Apps and Service Workers

The key to Progressive Web Apps is 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 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 a wide range of offline-first services but was somewhat error-prone. But the main problem for developers is a lack of direct interaction with exactly how AppCache works, stopping developers from 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.

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.

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 per cent 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 per cent. Forbes’ PWA also saw user session lengths double.
• Twitter Lite saw a 65 per cent increase in pages per session, with a massive 75 per cent 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, you’ll hear about them more and more throughout 2018 and onwards.