Maximize Availability with Progressive Web Apps

Although consumers are spending more time in apps than ever, the number of new apps they adopt is shrinking. More than 65% of mobile users download less than one app each month. Getting attention for a new app is hard, and only 26.4% of people who do visit the store page go on to download it. In the past creators have tried to get around this using web apps. Web apps don’t need to be downloaded at all. They’re accessed through a browser, and as such are mostly device agnostic (though each browser has its own quirks that may affect how the web app performs). Traditional web apps have a lot of pitfalls, however. Performance is noticeably worse than with native or hybrid apps. There aren’t many features available when users are offline or in a low-service area. Even when they are online access to device utilities like the camera or gyroscope is severely limited. Web apps don’t offer nearly the same experience as a native app. At least, that was the case.

The Web App Revolution

A major change is underway in how the mobile web works. The new breed of web apps- called progressive web apps or PWAs- have more in common with native applications than they do with mobile websites. They offer a broad range of features typically only found in native and hybrid apps without consumers being required to download anything. Google’s VP of Product Management, Rahul Row-Chowdhury, compared PWAs to the paradigm-changing advent of AJAX some ten years ago, saying, “Progressive Web Apps are that same fundamental shift for the mobile Web.” PWAs solve a lot of problems for creators. First, they save time and money by allowing developers to focus on one product. Native apps require a separate product for each platform while hybrid apps use platform-specific wrappers to function on different platforms. Progressive web apps just need a browser, so companies are freed from the burden of building and maintaining a handfull of codebases. Most apps aren’t included in search engine results; prospective users have to visit the app store in order to find them. Creators get around this with the imperfect solution of a “landing page” with a link to the store. That lets them apply the SEO needed to help users find their app, but that adds steps to the process. The more steps involved in doing something- even something a person is excited about- the less likely the user is to continue. Only 90% of those who download an app will use it, and every additional step knocks out up to 20% of potential users. This is the biggest advantage of progressive web apps. More users complete the app onboarding process because there are dramatically fewer obstacles between them and the content. PWAs handle offline access (a limitation of traditional web apps) using Service Workers. Service Workers are asynchronous JavaScript files that run in the background of an app. They use APIs to store and retrieve application data in a persistent content stash. Fetch and Cache APIs intercept network requests and meet them using cached resources. This structure supports advanced features like background sync and push notifications. It also boosts mobile performance in low-signal areas or on budget-friendly devices, which broadens the prospective audience.

What Makes a Web app Progressive?

Progressive web apps aim to provide the same experience as native apps, or as close as possible. There’s a list of requirements a PWA has to meet to be considered progressive:

• Progressive - It’s most important that PWAs take advantage of evolving browser features and device functions to provide a forward-facing experience. They should work on every browser, for every user.
• App-like feel - PWAs need to be built on the app-shell model with few page refreshed, giving users the feel of an app as opposed to a mobile website.
• Connectivity Independent - A progressive web app should work in low signal areas and offline.
• Responsive - No matter how a user accesses it- via tablet, smartphone, etc.- a PWA’s UI needs to fit the device’s form factor.
• Discoverable - PWAs should be as easy for search engines to find as websites are.
• Installable - While PWAs don’t need to be downloaded, they should be able to be saved to a device’s homescreen for easy access.
• Linkable - Like websites, PWAs need to be able to retain their state when shared via link or bookmarked.
• Re-engageable - Re-engagement should be driven through native features such as push notifications.
• Safe - Because they’re susceptible to “man-in-the-middle” attacks, PWAs should always be hosted over HTTPS.
• Fresh - New content should be made immediately available to all users within network coverage, or as soon as they reenter coverage areas.

Development Concerns

Analysts call progressive web apps the app model of the future, but there are still valid concerns with the structure. While PWA components are W3C compliant, they aren’t supported by all browsers when integrated into a web app. This lack of universal support is the main issue limiting their popularity. Fortunately, major browsers like Google Chrome, Firefox, Opera and Samsung Internet already support progressive web apps and Edge has announced it will at some point. Safari is being vague about whether PWA component support is in the cards. PWAs are more difficult to build properly. Since they’re an evolving format, the number of developers skilled in their creation is limited. That’s a serious problem when accessing device functions is as complex as it is. Progressive web apps can access most (not all) features ignored by their traditional cousins, but getting them to operate smoothly across all browsers is a demanding task. The need for more expertise seems to cause higher development costs per app. The total investment is lower since only one app is needed, though, so paying for a better developer still results in a net lower investment. Some developers have criticized progressive web apps for not appearing in app stores. This isn’t necessarily a bad thing, however. PWAs are meant to be found through browser searches using SEO, not downloaded through an app store. Publishers are promoting them elsewhere. It’s an entirely different approach to attracting and holding users. App store absence may not be a valid criticism, but the limitation on social media interactivity is. Plugins such as Facebook Login and Google Login can’t fetch data from apps, so users will have to log in separately. On top of that, major social media players are building their own PWAs. They’re interested in promoting their own options, which makes promoting progressive web apps on social media difficult.

PWAs in Action

Despite the complications of progressive web apps, some big companies have seen enough promise to adopt the technology.

Twitter

Twitter has a healthy user base for their downloadable app, but they wanted to create a responsive mobile presence as well. Developers aimed for a mobile experience that was indistinguishable from their existing native app. Their Twitter Lite Progressive Web App became the default mobile option for Twitter this past April. In the few months since its release, it seems like Twitter Lite hit the right mark. They’ve experienced a 65% increase in pages per session and a 20% decrease in bounce rate. The Engineering Lead for Twitter Lite, Nicolas Gallagher, revealed another advantage of the app: “The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.”

Lancôme

Lancôme has a spread of small apps for the Android and Apple markets. When mobile traffic to their site passed desktop traffic last year, however, they needed to amp up their mobile presence. A progressive web app seemed like a better choice than competing for downloads. The Lancôme PWA was released last October. It loads nearly three times faster than the old mobile site. The app is most popular with iOS users, where mobile sessions grew by 53%. Lancôme saw a 17% boost in conversion rates, but what really drove business were the push notifications and reminders. Lancôme was able to remind customers about items left in the shopping cart, and 7% of notifications resulted in a purchase.

AliExpress

E-commerce is a constantly growing field. AliExpress uses a native app for the absolute best user experience. Like many retailers, though, they had a problem with drawing new users. They saw their mobile web presence as a platform for attracting users to their app, and their mobile website was not meeting those needs. It gave users a substandard shopping experience that didn’t represent the brand well. The AliExpress PWA has been a wild success. Conversion rates for new users has increased by 104%, with 92% conversion rates on Safari. Users across browsers spend 74% more time in the app per session and visit twice as many pages.

Looking Forward

Progressive web apps are still a young technology, but they have a lot of promise. They offer workable solutions for most of the biggest problems facing app development: customer engagement, availability, performance. The drawbacks should be worn down as technology becomes more standard.

Can a dynamic progressive web app work for your company? Concepta has the experienced developers to maximize your mobile performance!