2018 State of Progressive Web Apps

Published in

Progressive Web Apps

9 min readFeb 8, 2018

As we look deep into 2018, one of the questions on every Web developer’s mind ought to be, “What trend will define the web in 2018?”. From 2013 being dubbed the “Year of Responsive Web Design” and Google’s announced Mobilegeddon in April 2015 when they started to boost the rankings of mobile-friendly websites in mobile search results, to 2016 when Accelerated Mobile Pages got introduced and 2017 when progressive web apps started being supported by the Chrome browser, the Web technology evolved in a spectacular way and so did the businesses that knew how to take advantage of the newer trends.

In all the studies we conducted the previous years*, the e-commerce segment was one of the most active in this regard: in 2016, 31% of e-commerce sites that didn’t have any mobile footprint turned their attention toward optimizing the experience for their on-the-go users (compared to the average of 25% from other categories: news, tech, business, and sports). Additionally, in 2016, the e-commerce segment scored the highest percentage in SSL usage — 25%.

That’s why, this year we focused the entire Progressive Web App study on the e-commerce segment, trying to identify where everything is heading in terms of mobile Web development, now that responsive web design reached saturation with 87% of digital experience-makers embracing it.

WHAT ARE PROGRESSIVE WEB APPS?

Progressive Web Apps (PWA) are experiences that combine the best of the web and the best of apps. Native app store apps have become hugely popular in the past through features such as push notifications, working offline, smooth animations and transitions, loading on the homescreen and so on.

Mobile Web Apps are JavaScript applications that work in the browser and attempted to bring some of the native apps features to the web, but weren’t able to provide push notifications for example. With the mobile introduction of new Web APIs, Progressive Web Apps are now closing the gap, providing the full app-like experience on the mobile web.

A lot of attention has been paid to progressive web apps lately, and we couldn’t miss the chance to analyze how many of the URLs we scrutinized (over 5,000 e-commerce websites from Alexa) support any of the main characteristics of progressive web apps:

HTTPS,
Offline mode,
Web push notifications,
“Add to Home Screen” prompts.

Today, progressive web apps are fully supported by Chrome and Opera. Firefox supports nearly all of their features. Microsoft Edge is working on them. The Samsung Internet browser has been making great strides this past year and has shown a strong commitment to progressive web apps, as demonstrated by Samsung’s leadership in some of the key standardization work. Apple has finally jumped on the mobile web train: service workers, a key component for supporting progressive web apps, are available in Safari 11.1 for iOS 11.3 and macOS 10.13.4.

Now, onto the key findings.

AVERAGE PROGRESSIVE WEB APP SCORE FOR E-COMMERCE SEGMENT IS 40/100

Out of the top 5,000 e-commerce websites we studied (see below details on the methodology), 58% of them scored between 40 and 60 out of 100 on LightHouse, 41% below 40 and approximately 1% over 60.

To put things into perspective, back in 2015, by the time Google expanded the use of mobile-friendliness as a ranking signal (in fact penalizing all sites that don’t have a mobile strategy), 40% of the researched sites had NO mobile web strategy whatsoever!

Obviously, this is not a satisfactory score and the main reasons lie in the fact that less than 2% have a service worker installed or a manifest file in place. In essence, the majority of e-commerce websites are still missing one or more of the key progressive web app features such as offline mode, push notifications or add to homescreen.

On the other hand, what’s interesting is the increase in HTTPS usage from previous years (25%) to 75%. What started in 2014 when Google announced HTTPS as a ranking signal had a more aggressive follow-up in 2016 when they announced that beginning January 2017 (Chrome 56), they’ll mark HTTP pages that collect passwords or credit cards as non-secure, as part of a long-term plan to mark all HTTP sites as non-secure.

TOP PROGRESSIVE WEB APPS SCORE 85% IN SEO

Every web page of a Progressive Web App is considered as a Javascript site by Google. For a PWA, a new URL can be created and the Googlebot will crawl it, just like it does for other pages published on the web. Nevertheless, there could be some crawling issues with PWAs and thus developers have to smartly optimize the site for proper indexing to every page.

Over 90% of the investigated URLs have an average SEO score of 85% with the top 1% that scored high on the Progressive Web App scale being among them. In other words, chances are they’ve implemented some of the below tips that make PWAs SEO-friendly:

When the PWA is serving contents from various online resources, we have to use rel=canonical tags in order to avoid any content violations.
When generating URLs for PWAs, we need to check that they are free from “#”. If the URL has a hash symbol in it, Google will ignore everything else after it. Alternatively, we can stay on the safe side and use the traditional SEO rules.
It is important to test how Googlebots are seeing the pages and indexing them. For this, we can use Google’s Fetch and Render tool, available under the Search console.
Avoiding the AJAX-Crawling scheme on new sites.
Making sure required resources aren’t blocked by robots.txt.
Reducing the number of embedded resources in the page (especially the number of JavaScript files required to render the page), since these might not be fully loaded.
Using an accurate sitemap file to signal any changes to your website when using Accelerated Mobile Pages (AMP).

For large scale websites having multifarious features, opting for PWAs sounds reasonable but optimizing a PWA needs a little more effort than a regular website as it makes use of flexible JavaScript to do its job. This can result in a kind of trade-off between easier development and nice UIs, but the trickier handling of SEO.

BEST PRACTICE AND ACCESSIBILITY SCORE IN PROGRESSIVE WEB APPS

If we look at the e-commerce URLs that scored over 80% for PWA, we see an average of 75% in both best practice and accessibility score. Here are some of the recommendations for avoiding performance pitfalls in PWAs:

Use of HTTP/2
No using front-end JavaScript libraries with known security vulnerabilities (older versions)
App’s `short_name` must be less than 12 characters to ensure that it’s not truncated on homescreens.
No logging errors that can come from network request failures and other browser concerns.
Avoids Application Cache or WebSQL DB because both are deprecated
Avoids requesting the geolocation permission on page load. That’s because users are mistrustful of or confused by sites that request their location without context.
Displays images with correct aspect ratio

In terms of accessibility, Lighthouse indicates multiple recommendations and besides the automated tests, it also encourages developers to do some manual checks.

MANIFEST FILES BEING USED 3 TIMES MORE THAN SERVICE WORKERS

The web app manifest is a simple JSON file that gives developers the ability to control app appearance to the user in areas where they would expect to see apps (for example, a mobile device’s home screen), direct what the user can launch, and define its appearance at launch.

Web app manifests provide the ability to save a site bookmark to a device’s home screen. When a PWA is launched this way:

It has a unique icon and name so that users can distinguish it from other sites.
It displays something to the user while resources are downloaded or restored from cache.
It provides default display characteristics to the browser to avoid abrupt transition when site resources become available.
It does all this through the simple mechanism of metadata in a text file.

Once the manifest file has been created and uploaded to the PWAs domain, it must be included to all the pages that encompass the web app, as follows:

<link rel="manifest" href="/manifest.json">

What was interesting to observe is that, out of the URLs that were taking advantage of the manifest benefits, 98% were using the theme_color property to set the color of the toolbar, 25% to launch with a custom splash screen, but only 6% to prompt users to “Add to HomeScreen”.

As far as a Service Worker is concerned, it’s essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages. The service worker can receive push messages from a server when the app is not active. This lets the app show push notifications to the user, even when it is not open in the browser.

Service workers enable applications to control network requests, cache those requests to improve performance, and provide offline access to cached content, but one thing to note about Service Workers is that they only run over HTTPS.

We wanted to see how many of those URLs using SSL certificates actually take advantage of the service workers’ benefits and it seems that the percentage is very low: less than 1%.

This might be due to the fact that service workers were not fully supported in 2017, with Safari just joining the PWA game earlier this year.

The fact that service workers are so poorly implemented on websites nowadays directly affects mobile user engagement, which is a shame because web push notifications reportedly increase engagement by four times, and those users spend twice as long on the websites. As an example, after rolling out its progressive web app, AliExpress improved its conversions for new users across all browsers by 104% and increased its iOS conversions by 82%, despite iOS not supporting the full feature set of progressive web apps.

WHAT DEVELOPERS ARE SAYING?

As far as developers are concerned*, their preferences for building progressive web apps are:

40% to use Angular 2.X, 37% ReactJS and only 27% VueJS
Bootstrap (50%), Material UI (33%) and Semantic UI (10%) are the most used CSS frameworks
The most important PWA features: Caching/Offline (over 80%). 66% recognize “Add to HomeScreen” or App Install Prompt as being mandatory in a PWA whereas 60% consider Push Notifications as being key to building PWAs.

When asked about the businesses that can benefit from implementing a progressive web app, 66% agreed that News & Magazines are better positioned to take advantage of presenting their mobile users with a PWA while e-Commerce came on 2nd with 55% of the votes.

WHERE TO GO FROM HERE?

While Progressive Web Apps aim to amplify user experience on the web it is important to understand that not every business needs a PWA. Businesses should count the factors that call for an app-like experience on the web. If your business has a low scale website, less media content, has quick load time, with users easily accessing the info/service of their interest, sticking to a responsive, traditional website might be a good idea.

Take for example Flipkart*, India’s largest e-commerce site. They began building Flipkart Lite, a Progressive Web App that combines the best of the web and the best of the Flipkart native app.

Flipkart wanted to be able to re-engage with mobile web users just as they would with mobile app users. The company implemented an “Add to Home Screen” prompt. Now, 60% of all visits to Flipkart Lite come from people launching the site from the homescreen icon. Add to Home Screen also delivers high-quality visits, with customers converting 70% more than average users. These two activities alone resulted in engagement numbers that were 40% higher than before.

For e-commerce businesses looking to provide their users (and potential customers) mobile-first experiences and increase engagement and conversion rates, building a PWA should make the 2018 list.

It’s true that progressive web apps are not yet mainstream, however, with all of the benefits they promise, there’s an untapped potential that will certainly be explored throughout 2018 by many more businesses.

__________