by Dave Gray

Engage your users and enhance their experience with Progressive Web Apps

Yf8Z7uqoTCkHXhSJfD7T5d-bBbUCtqEiJRQr
Photo by Rodion Kutsaev on Unsplash

What is a Progressive Web App?

A Progressive Web App (aka PWA) is a duality. It is both a website and a web app. A PWA provides progressive enhancements to new and existing websites. These mobile-focused enhancements are easy to justify. Mobile Internet usage passed desktop Internet usage in the fall of 2016. It is truly a mobile-first world.

One such enhancement is the “Add to Home Screen” option. Websites enable this feature in some browsers by meeting specific PWA design criteria. This feature lets you save the PWA icon to your home screen alongside your other app icons. You can then launch the PWA with the look and feel of an app.

hfv56qaFb28RtMwcPtMmlxU5xC3tizX4HPTQ
The default message from Firefox Beta when visiting a Progressive Web App.

Web developers may now design an “app-like” full screen experience for users. HTML, CSS, and Javascript are the only necessary programming languages. Native mobile device features including push notifications, camera, geolocation, and much more are now available for use. Also, a PWA should still provide functionality even if you lose your data connection. It should work offline!

Google has defined three areas that are “musts” for Progressive Web Apps: They must be reliable, fast, and engaging. Google states that Progressive Web Apps should “load instantly, regardless of the network state”, “respond quickly to user interactions”, “live on the user’s home screen”, and “offer an immersive full screen experience”.

Why do I (or why does my company) need a Progressive Web App?

You can eliminate the need to develop separate solutions (iOS, Android, Web) when a Progressive Web App will suffice.

PWAs are not replacements for all mobile apps by any means. There are many mobile apps with features PWAs cannot replicate. However, if your app focuses on information sharing (posts, pics, products, support, social interaction), a PWA is a great choice.

Another answer to the question “Why?” is reach.

Referencing the comScore 2017 U.S. Mobile App Report (request your access here), 87% of usage time is on mobile apps vs. 13% of usage time on mobile web. Yet when comparing the reach of the Top 500 Mobile Web Apps vs the Top 500 Mobile Web Properties, mobile web has more than double the reach — 15.7 million average monthly unique visitors vs. 7 million for mobile apps.

In addition, comScore notes that 80% of users intentionally moved apps to their home screen in 2017 which is up 5% from 2016.

AW2wV7m8DAOiyp7gyPyTPwyZ3oK3rT07hi92
The Pmount PWA installed on the home screen and ready to send push notifications for daily specials.

Progressive Web Apps combine the capabilities of native app features that drive high usage times with the reach of web properties and the ability to install on the home screen. This hybrid combination makes Progressive Web Apps worth consideration.

Several websites are already taking the step to full-functioning Progressive Web Apps.

1aj7EZIQJsVV120dVqijEx5ykn4frLp04V01
The Twitter Lite PWA requesting permissions for push notifications and a home screen icon

Twitter Lite is a great example utilizing push notifications and offline functionality. Twitter’s PWA “significantly increases engagement and reduces data usage”.

b7AfNLZRm9FWG8COOXRqKV0VdpzxbP9Tjv3k
The Pinterest PWA resulted in an increase of 40% more time spent in the mobile experience

This Pinterest PWA case study reveals impressive statistics and valuable insights. In comparison to their previous mobile web experience, Pinterest achieved an increase of 60% in core engagements. Their user-generated ad revenue increased by 44%. In addition, time spent is up by 40%.

gfROMdw0E8X1UM9sVT5gNTbGTq7HphHr3F-y
Over half a million Trivago users have already decided to “add to home screen”

Trivago’s PWA is achieving amazing results. More than half a million users have utilized their “add to home screen” functionality. The engagement of those users is up 150%. Trivago discusses their PWA decision in this video.

Many other examples of PWAs exist. Start your search at pwa.rocks and this list of 5 awesome PWAs.

How do I get started?

If you are a web developer, a great place to start is the Google Developers Progressive Web Apps page. You will need to learn about Service Workers and Web App Manifests.

Google provides an automated website audit tool called Lighthouse. Lighthouse audits five categories for your app: Progressive Web App, Performance, Accessibility, Best Practices, and Search Engine Optimization. The detailed Lighthouse audit report will give you 15 pages of details with over 50 individual audit results.

6Sqon96qx2nVOJugWsfb2ApTSZsxEEkruXto
The five categories of audit results provided by Lighthouse.

If you are not a web developer, you will need to find one to create or update your current website to a progressive web app. PWAs are currently developer-intensive. I am not aware of any service that takes the knowledge of code out of the solution. If you own the local pub or coffee shop, you might find a frequent patron who is also a developer that needs a PWA test project. (See thepmount.com) In the coming months, I plan to publish articles on each step of the PWA creation process.

Conclusion

Progressive Web Apps provide progressive enhancement to existing websites and set new criteria for both pre-existing and new web apps to strive for. Meeting the PWA requirements and passing the Lighthouse audits will help provide reliable, fast, and engaging user experiences on mobile devices… and that is something we should all benefit from.

jElxr0WSiaE1TRYpVhvO2nrl9HZ1zdgjvEEr
Today’s Americano from the local coffee shop

Reach out to me any time on LinkedIn or Twitter. And if you liked this article, give it a few claps. I will sincerely appreciate it.

Dave Gray | Professional Profile | LinkedIn
View Dave Gray's professional profile on LinkedIn. LinkedIn is the world's largest business network, helping…www.linkedin.comDave Gray (@yesdavidgray) | Twitter
The latest Tweets from Dave Gray (@yesdavidgray). Instructor @FHSUInformatics * Developer * Musician * Entrepreneur …twitter.com