3 Things You Need to Know About Progressive Web Apps

Originally published at onix-systems.com.

In 2018, 52.2% of all website traffic worldwide was generated through mobile phones, up from 50.3% in 2017. Mobile’s lead is expected to continue growing despite the user experience that is currently compromised by the less powerful devices, smaller screens, and unreliable bandwidth. Most stats show that browsing the Internet takes only some 10% of the mobile users’ time: they spend most of it in several favorite native mobile apps. The mobile world has been tied to the Android and iOS platforms for years.

However, a third player is challenging the status quo. All major browser vendors are now promoting the progressive web application (PWA) technology. Such web applications (i.e. websites or web pages) work everywhere and share certain user experience advantages with native apps. If websites come with rich UX, instant loading, push notifications, etc., people will spend more time browsing them. They will see more advertisements, and with notification updates, will be likely to visit often. Progressive web apps thus merge the web and mobile worlds for the benefit of users and businesses.

The progressive web application is still a relatively new and even confusing concept. (We had touched on the subject only once, investigating mobile development costs.) This article will provide the basic info. What is a progressive web app? What makes it different from regular web applications? How is it built? If you haven’t heard about PWAs yet, by the end, you may have the urge to have one too.

PWA Definition and Attributes

The Internet abounds in PWA definitions that aim at being more conclusive, accurate, detailed, comprehensive or concise. We’ll list a few because each definition adds a valuable detail or emphasizes a particular benefit of the phenomenon. The progressive web applications are:

  • a methodology that involves a combination of technologies to build powerful web apps;
  • a mixture of mobile and web applications;
  • websites built using web technologies but acting and feeling like a mobile app;
  • user experiences that have the reach of the web and are reliable, fast, and engaging;
  • web applications that load like traditional websites but can offer the user functionality and device hardware access normally available only to native mobile applications, combining the flexibility of the web with the experience of a native app;
  • websites that use a combination of modern technologies (APIs), best practices, and design concepts to deliver an ‘app-like’ user experience across all platforms;
  • web apps that bring native app features through the web to all platforms and devices using web standards running in a secure context;
  • a set of best practices to build a web application with an experience so uniform and seamless that users are unable to tell the difference between a PWA and a native mobile app.

Progressive web applications as experiences combine the best of the web and native apps. They load swiftly even in uncertain network conditions. The app provides a full-screen work area and quickly responds to user interactions with silky smooth scrolling and animations. Whether a smartphone, PC or laptop, it can access the internals of your device, e.g., camera, accelerometer, or GPS for your location. As the user builds a relationship with the app, it’s becoming more powerful over time. It also sends relevant push notifications.

Progressive web applications deliver better user experiences thanks to the concept of progressive enhancement. It means that a PWA will work regardless of the browser and smart device type, albeit with some limitations.

The originators of the term listed nine attributes of the class. Since then, one more has been added. So, truly progressive web apps are:

1) Responsive. They must fit any form factor: desktop, phone, tablet, or forms yet to emerge.

2) Connectivity independent. Progressively enhanced with service workers, they can work offline or on low-quality networks.

3) App-like-interactions. A Shell + Content application model facilitates app-style interactions and navigation.

4) Fresh. Progressive web apps are always up-to-date.

5) Safe. Served via HTTPS (HTTP over TLS cryptographic protocol), they prevent snooping and tampering with the content.

6) Discoverable. Search engines can find them and identify as ‘applications.’

7) Re-engageable. Progressive web apps make re-engagement easy by accessing the re-engagement UIs of the OS, such as push notifications.

8) Installable. Users can install the application from the browser window, omitting app stores.

9) Linkable. PWAs are shared via a URL with zero-friction and do not require complicated installation.

10) Progressive. According to the progressive enhancement as a core tenet, PWA should work for every user, regardless of browser choice.

A genuine progressive web application must be fast, make the network optional, and provide real value to the customers. What about the site owners?

The Benefits of Progressive Web Apps

For example, visitors on the mobile web rarely come back to a website. Companies came up with annoying banners urging to install native mobile apps. If the user agrees, they have to go through the tiresome installation procedure. That further reduces the odds of installation.

PWAs are different. Browsing progressive web pages, users may encounter an ‘Add to home screen’ banner. If they tap the button, the app installs itself in the background from the web application. Now it’s a mobile app that has an icon on the home screen. The user needs only to tap on it instead of typing the URL. Moreover, the logo on the home screen is a constant reminder of the brand.

Afterward, whenever the user opens it, they can browse the same content in their smartphone even without the Internet connection. It’s much faster to start than a normal website. In other respects, a PWA behaves and feels like a native app. The seamless and integrated user experience helps to retain the customers and generate traffic.

Native apps installed on devices have enjoyed an advantage over web applications that are more heavily affected by unreliable cellular connections. However, service worker caching in PWAs allows to manage assets locally. That facilitates quality experiences offline or when the network is unreliable.

If a website is too slow, people click the ‘Close’ button after 3 seconds. When users massively abandon a site, it affects overall brand quality, search engine rankings, and other key performance indicators. Users typically have to wait because a website is busy making rides to the server. A PWA, by contrast, caches the data and allows to start the app again even without hitting the network. When an app responds to user interactions and gives real content almost instantly, even on a poor connection, people view the service as more reliable.

If they go offline, the content loaded earlier can be rendered quickly as well. In lieu of new pages, the app may display placeholders notifying the user of their connectivity state. The developers can architect PWAs to provide rich offline experience and reliable work. If your app is more reliable than a standard website or mobile app, it pleases more customers, conversions for new users improve, and your business grows.

Half of the world’s web users are still using 2G Internet. If you are expanding your services to those areas, you need a lightweight app that will work with a slow connection. Most of a PWA’s data is saved within the device’s storage with the first launch. The next time a user wants to use it, the app downloads a little more data. It’s a useful ability if the app targets emerging markets.

Since PWAs can work on multiple platforms, the users will enjoy the same quality experience on every device they’re using. That allows businesses to approach a broader audience.

Push notifications are often considered annoying but customers engage more actively with brands than use pushes than with brands that don’t. PWAs can send notifications to the device from different browsers across different platforms even after the app is closed. That empowers companies to drive the engagement up by keeping the users notified and engaged with their content. Your DevOps team can take advantage of the technology to upgrade and update your application in the background.

PWAs also can save you time and effort. If a company has a website and a mobile app, it needs development teams with different coding backgrounds. The applications for Android and iOS are separate projects. The website must work equally well on a desktop, tablet, and smartphone. In the case of progressive web apps, one team of web developers is enough to maintain one app-like, responsive OS-agnostic platform. The development and maintenance are much easier and the content will stay current, safe, and consistent since there is a single point of intake. The development team can make adjustments on the fly and update the app even a few times a day since there is no app store in between.

PWAs may allegedly cost nearly 10 times less than a mobile app. Besides the costs, the solution significantly reduces time-to-market.

You can be sure your application is safe and sound and no one unauthorized can tinker with it. Lastly, search engines use HTTPS, which ensures its security, as a key ranking factor.

Let us list a few success stories involving PWAs:

AliExpress

Forbes

Pinterest

Tinder

Twitter

Thousands of other companies are adopting the PWA philosophy and reporting improved site speed and increased user engagement numbers and conversion levels.

What are the ‘vitamins’ mentioned by Alex Russell that give PWAs an edge over regular web and native mobile applications? What does it take to build a PWA?

How Progressive Web Apps Are Made

1. Valid Web App Manifest

2. Registered Service Worker with a fetch Event Handler

Service workers unlock many browser capabilities. Service workers use a background thread, which eliminates any possible impact on the real-time user experience. Running in the background, they can accomplish the work even when the website is closed.

This script should be registered via your regular client-side JavaScript. Currently, Chrome, FireFox, and Opera are leaders in rolling out service worker support.

3. Running under HTTPS

These minimum requirements are simple to implement. Moreover, if an existing website is not too old, developers can add the three elements quickly and without disrupting the current experience and technology stack. (If you’re interested in a comprehensive guide, there’s Google’s checklist of the tasks.) Other technologies with which PWAs are built include push notifications and IndexedDB/local data structure for caching.

Generally, the development process for a PWA is quite similar to regular web application development. The tech stack includes HTML5, CSS, JavaScript, and JS frameworks. Most often, the developers use:

  • Angular. The CLI command ng add @angular/pwa is used to configure a web application to use service workers by adding the service-worker package and setting up the necessary support files.
  • ReactJS. create-react-app is a popular tool which facilitates the creation of React apps with no build configuration.
  • Vue. After the release of Vue CLI 3, developers can use plugins to implement a PWA in their project at any point of the development.

Conclusion

The progressive web application philosophy includes using modern web APIs along with traditional progressive enhancement strategy. The resulting website looks, feels, and acts like a native application across the platforms. It’s fast, secure by default, and works even without an Internet connection.

Better user experience on a business’ site means the customers are happier and more likely to engage and buy from it. Progressive web apps help to remove friction from the user’s interaction with the app and assist in branding on the platform. Push notifications unlock a new avenue for brands to connect with potential customers. Alibaba, Twitter, Uber, and thousands of smaller companies have leveraged the power of PWAs.

Onix is passionate about web performance and has years of experience architecting sites to meet the users’ expectations. Don’t hesitate to get in touch!

Special thanks to Vladimir Perepelica, Tech Lead at Onix, for the assistance in writing this post!

FOLLOW US:

Onix-Systems provides IT services in website, mobile app and emerging technologies software development. Check our blog -> https://onix-systems.com/blog

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store