Powerful Progressive Web App Features For Crazy App-Like Results

Chris Love

Last Updated - Sat Jan 09 2021

Progressive Web App (PWA) is a new class of web site providing native app experiences using a browser. PWA features are advantages making them the clear choice over native and classic websites.

PWAs function even when the device is offline. They make full use of modern web features including push notification, cache, and secure connections to provide rich Web based experiences.

They combine the functionality of native apps with the availability of the web, using the latest web and browser features to create better user experiences.

Because they are distributed through the web they eliminate the frustration created for both brands and consumers in App Stores.

f you have been listening to what is happening on the web and mobile in recent years you have probably heard of Progressive Web Apps. You may have read or heard about them and their features.

I heard and read those articles as well. Unfortunately, there seems to be a lot of confusion and misleading statements propagated to both the developer and business community. I thought I would go over Progressive Web Application features today to make sure everyone has a good foundational understanding.

The web platform has gone through a renaissance of changes in recent years as web standards have emerged for browsers to implement. This has made things much easier for developers to create better, cross-platform user experiences.

Primary Progressive Web App Features

• Installable like an App
• Secure by Default
• Service Worker
• Works Offline/Reliable
• Fast By Design
• Integrated With Platform
• No App Store Censorship
• Visible in Search Engines
• Cheaper to Market
• Immediate Updates
• Cross-Platform
• Smaller Disk Space
• Easy to Share
• Easier to Develop and Maintain than Native

Some of these recent enhancements include new APIs and functionality like service workers and the web manifest file. But there is more to the story as more and more platform and hardware APIs become accessible in the browser.

Progressive Web Apps are essentially a new, best in class, web site. Not only do they offer the traditional reach and engagement capabilities the web has offered for several decades they take advantage of these new platform features to even the playing field with their native application counterparts.

• What is a Progressive Web App?
• Progressive Web Application Minimal Requirements
• PWA User Experience Requirements
• PWA Features over Traditional Web Sites and Native Apps
• Discoverability
• Summary

For business stakeholders PWAs offer big returns for less investment. They are cheaper to create, maintain, extend and deploy. The marketing costs are much lower than native as well.

PWAs are attractive to developers as well because many developers have at least serviceable knowledge of how to code for the web. Native applications require knowledge of at least three different platforms and core languages like Java, Objective-C, C# and their markup and their unique rendering syntaxes. Progressive Web Apps are built using web standards and the familiar languages HTML, CSS and JavaScript.

What is a Progressive Web App?

Progressive Web Apps are really web sites that leverage modern browser capabilities and development best practices to deliver user experiences as good as if not better than native applications.

They do this because they take advantage of service worker caching, push notifications, responsive design and performance best practices. They are as much about implementing features as they are about delivering great, app-like, user experiences.

In a nutshell PWAs are web sites that behave like native apps.

Progressive Web Applications are platform agnostic. This means you can serve your PWA from any web server, CMS or web infrastructure like ASP.NET, PHP, etc. to any client-side platform. Client platforms include any mobile device or browser. Even if the user's browser does not support modern APIs a PWA gracefully defers to traditional experiences, meaning everyone is included.

Deliver a good progressive web app experience and your business can grow much faster and cost effectively than if could in the past through the web or native applications.

Progressive Web Application Minimal Requirements

PWAs require your site to use HTTPS, a valid web manifest file and registered service worker. These three technical requirements get you started.

• HTTPS
• Web Manifest
• Service Worker with Offline Caching

Any site that is not using HTTPS is pretty much dead these days. That majority of sites do, which is great. TLS (commonly known as SSL) provides an encryption layer around the data sent between the browser and the server. This means bad guys can't spy on your information, or worse change the data being sent back and forth.

Progressive Web Apps require HTTPS not only because modern APIs like service workers require HTTPS, but because it is the best practice. It provides a better user experience and visitors appreciate it.

The web manifest is a simple JSON file the browser loads in the background. It contains meta data about your site the browser and platform use to drive the add to homescreen experience. Here you can define the default start URL, color scheme, how your application launches, and the icons used to represent your app on the homescreen.

The final technical requirement is a registered service worker with a fetch event handler. I added that last detail because Chrome started checking for at least a fetch event handler before it would trigger the add to homescreen work flow.

The reason it checks for the fetch event handler it trying to see if the service worker might allow the application to work offline. There is not absolute litmus test to determine if a PWA functions offline. I mean you can have a fetch event handler and some assets cached locally, but that does not mean the application works offline.

It could still break, when offline. This is where having a skilled service worker developer involved in creating your Progressive Web App is important. Creating a solid caching strategy and workflow gets complicated the more an application does.

I always tell new clients and developers add these three features to your existing site and start there. Don't get too fancy up front with the service worker.

PWA User Experience Requirements

Meeting the three core technical requirements to be a progressive web app are one thing, but what does it really mean to be a PWA?

It is really more about delivering a top of the line user experience. Unfortunately, this is where most native apps and web sites fall short. I like to think PWAs give us a new opportunity to get it 'right' in a broad sense.

Just like app stores have quality guidelines, you can think of this section as a high-level review of progressive web application quality guidelines. For business owners this is a baseline to set your deliverable expectations.

Fast

The average web page now takes over 19 seconds to load on a typical phone. Native apps are not much better as I stare at splash screens longer than anyone should. Personally, I think splash screens should never been seen because the page/screen should just load and render.

Integrated

This is the idea users should not have to reach through a browser tab to access your app or web site. They should not care they are even on the web. They should just be able to tap your icon and launch your app. They expect your PWA to look and behave like any app.

Beyond the add to homescreen experience newer web APIs like Web Payments allow users to flow through checkout without dealing with traditional checkout workflows. This makes commerce much easier on mobile devices.

Another example is media playback. The Media Session API allows you to not only playback media like audio with the lock screen. In fact, you can provide meta data about the audio that appears on the lock screen like native music and podcast apps.

Reliable

The common perception is the web breaks when the network is unavailable. Service worker cache and PWAs enable the web to not only load instantly but make the network a progressive enhancement.

Now offline is not a concern. It is up to you to create a proper offline caching workflow and user experience for your application. Of course, larger sites may be limited as to how much content they can cache for offline experiences. But you can create a functional experience that provides users a serviceable offline experience.

Engaging

This is where you use the right capabilities at the right time to create a delightful experience. Of course, this is somewhat subjective, but there are steps you can take to ensure your level of engagement is high.

This includes responsibly using push notifications, background updates and more.

For example, some airlines have started using push with their progressive web apps to alert fliers about flight delays. I have been thinking of adding push to Love2Dev to let you know when I have a new article. Don't worry, I won’t bother you too often 😋.

PWA Features over Traditional Web Sites and Native Apps

Don't Progressive Web Apps sound great!

I sure think so.

But you may be wondering how they compare to traditional web sites and native apps. I mean native apps have been all the rage since the iPhone came out, right?

Well, the excitement around native apps has dwindled in recent years. Consumers have become fatigued with apps. Today the average mobile user does not download an app over the course of a month. Even worse, their app screen time is limited to a small set of large social media players, not average businesses.

As you will see progressive web apps are enhancements to traditional web sites. You won’t lose a single web site advantage by upgrading to a PWA. You only make it better. So much better most are better than their native counterparts.

Discoverability

93% of online activity starts with a search engine, not an app or an app store. This is one of the many reasons we offer search engine optimization services for our clients.

The web's super power is its reach and discoverability and search engines like Google and Bing are the #1 channel to engage with customers, not app stores.

If you have ever tried to promote a native app it is a steep, uphill battle. It is expensive. I have seen industry analysis reporting that average cost to acquire a single app install between $8-30.

A good search engine optimization program will net you thousands to millions of visitors each month for free. Paid advertising for the web can cost less than a nickel per visitor.

This makes the web more cost efficient to engage with new and established customers than native apps.

It is almost impossible to drive direct traffic to a landing screen in a native app, especially if the customer has not gone through the 6-8 steps needed to install a native app. But you can drive mass amounts of traffic to any landing page either through search or paid channels.

The other problem native app stores create is the poor indexing. It is very difficult to find apps for a niche because most are not indexed well. But more important is studying what apps consumers do install.

The reality is the only company with real native traction is Facebook. Between Facebook, Facebook Messenger, Instagram and WhatsApp they own about 90% of the apps installed and used on devices.

In fact by 2015 most users had funneled themselves to the top three apps for about 80% of their active screen time. Those top three apps are all Facebook brands.

Games are another category where app usage is high but segmented to mostly kids. I won't try to guess what the game market is like because I do not play in that niche (pun intended LOL). I do know customer acquisition for games is in the $20/download. Again, not an attractive market for me to enter.

For businesses, native applications are not appealing because they do not effectively feed sales funnels and for most don't offer functionality the web cannot do.

No Sales Tax

App stores take a cut that makes the mafia jealous, 30%. Plus, you could also be charged just for the privilege of using their SDK and publishing to their platform.

E-Commerce margins are thin, any retail business operates on thin margins. When the distribution platform takes a 30% cut turning a profit is very difficult. This is why most attempts at apps fail.

The web has been able to conduct online transitions for over 20 years. Amazon accepted its first online payments in 1994, and yes, I remember when they started!

Accepting online payments is easier today than it ever was. Banks typically charge 2-3% of a transaction, roughly 10% of the app store transaction fees. Services like Stripe and PayPal have made accepting payments much easier. But there are numerous gateway services available for online business. I have worked with at least a half dozen over the years.

No App Store Censorship

I wrote a few months back about Apple removing massive numbers of apps because they did not consider them 'app-like'. They cited section 4.2.6 of their quality guidelines.

This left many businesses with no tangible mobile presence since they had invested so heavily in the native app channel.

The only censor the web needs to worry about are search engines. An honestly SEO boils down to delivering the best answer and best experience for customers. At that point it is up to you to drive them through your engagement and sales funnels to strengthen the relationship. Establish a good relationship and they will add your PWA to their homescreen and subscribe to push notifications and your e-mail newsletter.

At that point you have a direct way to connect with those customers without any fear of a third party dropping you without warning or rejecting an update to your app.

Immediate Update Deployment

Unlike native applications the web has always been easy to quickly update and distribute changes to visitors. Now that PWAs can be 'installed' on a user's device these updates can be made even before they open the site.

App Stores require you to upload your latest updates to their platform, one for each platform you app is distributed, which means at least three for most apps. It then goes through a review process, which will either result in rejection or approval by the platform censors. This process can take several days.

It then goes into their distribution queue, which can take up to three weeks before customers receive the update.

If you happen to break something in your app, you may not know for several weeks and then distributing a fix might take a few more weeks. This much time means most customers are no longer engaged and won't come back.

The web is free from this latency. When you make a site update and deploy to your server it is immediately available to users. If you happen to break the app, like I did this morning LOL, you can deploy fixes as fast as you can make them.

If you use push notifications, you could even use this channel to prompt the user to allow your service worker to update the cached responses in the background. The customer does not even need to open your app!

How cool is that?

Cross-Platform

Progressive web apps are truly cross-platform. That's because they are web sites first that progressively become app-like.

The better news is all modern browsers support service workers, the key technology driving PWA.

Chrome has the first mover advantage with the most mature support story, but Microsoft, FireFox, Samsung and even Apple are quickly closing ranks. Most have some form of add to homescreen experience. But even when they don't you can still prompt the user to bookmark the site. On iPhone and iPad add the site to the homescreen using iOS's traditional mobile web app capable functionality.

Smaller Disk Footprint

Native apps are fat. This means they take up a significant portion of the limited storage on mobile devices. I know my iPad 2 has almost no apps on it now because there is only enough disk space for the operating system and not much more.

The main reason is iOS apps have become bloated, mostly due to retina graphics. Android apps are not much better and don't get me started about Windows.

Granted the average web page is too fat these days too. They don't have to be, in fact most of the progressive web applications I create only require a few hundred kilobytes of storage. This can vary with how many images are required, but proper image size and caching policies keep even those to a minimum.

This means consumers have more room to take photos, videos and all sorts of other 'fun' stuff they love.

Take up too much space without offering a compelling value and your app is certain to get deleted.

Easier Sharing

I know native apps often utilize native sharing features. But have you really looked at what is shared?

It's a URL, or an address to a web page. Why add an extra step to the process?

The web allows users to share the exact page they are viewing with their friends and social media followers.

Here is a dirty little secret, this can be done without any JavaScript! Just check out the share buttons at the bottom of this article. And while you are there, share it with your followers!

There is an emerging web standard to integrate with platform sharing APIs, but I suspect it is at least a year away from broad support.

Search Engine Optimization

The web's advantage is the ability to link, making it easy to connect disparate points. Alex Russel declared this ability the web's super power.

Over the past year I have refreshed my SEO skills and interest, in large part because PWAs are great for SEO. I have raised the exposure of Love2Dev significantly from the past few years. So much so I have added SEO to Love2Dev's service offerings.

The big advantage here is organic search is free, well sort of. I had to make intentional efforts to improve not only technical aspects of the site, but also learn to write differently. I also needed to learn about modern link building and many other details. Other than a few research tools I do not spend any money on this marketing channel.

Native applications do not have this advantage. Many point to app stores as a way for customers to discover your app or brand. They are wrong. App stores have terrible search functionality. Finding apps is almost impossible, even when you know the name of the app. I have given up several times.

Plus, apps do not offer deep discoverability. The strength of building a brand is in the long tail. This means being one of the best answers to as many questions customers may have in your niche. The search volumes are low, but there are billions of these searches made each day. This provides far more opportunities for you to reach customers.

No app has the ability for someone to discover it when they are searching for 'white wicker patio furniture'.

For the record that term gets about 1000 monthly searches and has a high purchase intent. Marketers you know what that means. No one will go through the hassles of downloading your native app to see what white wicker patio furniture you have to offer.

Easier to Develop than Native Apps

Development costs are important. I won’t lie a great e-commerce application, even when built using Shopify or Magento is not cheap. Same goes for a good promotional site that works.

But the financial investments are much lower than native apps. I identify three main reasons why:

• More Tools
• Broader Developer Base
• Based on Web Standards, not Proprietary Languages and APIs

A web site can be built using Notepad or any text editor. I and millions of other developers (including many at Google) use Microsoft's Visual Studio Code. VS Code is a free integrated development environment that can be used for multiple languages and platforms. These tools make the web easier to get up and running for developers.

There are literally millions upon millions of developers versed in a minimal set of web development skills. This means you have a larger pool to select.

Finally, the web is built on a set of independent standards. Each browser then implements these standards. Developers do not need to worry about platform specific implementations or proprietary APIs. This means you can write one and the site runs everywhere.

Native apps require developers to learn iOS, Android and Windows. Each platform is very unique and learning all three is a challenge even for the best developers.

Summary

Progressive web apps are the best in class web experiences. Not only are the best web sites they offer user experiences in parity with native app counter parts. They offer many advantages to businesses to engage with customers native apps cannot touch.

PWAs can work offline, should load instantly and provide new channels to reengage visitors to build brand relationships. Developers like them because they give them a new playground with the features service workers offer.

For both developers and business stakeholders Progressive Web Apps are the clear winner is customer engagement applications.

If you are new to progressive web apps and want to know more I have a new book, Progressive Web Application Development By Example and an online course: Progressive Web Apps From Beginner to Expert available to help developers get up to speed.

For the business side we offer Progressive Web Application development and consulting services.

Either way, be sure to add Love2Dev to your homescreen so you won’t miss any content about Progressive Web Apps and SEO we publish in the future.