Get best of the week

Progressive web applications. Guide to action

Hello, Habr! We are exploring the possibility of publishing a book on PWA (Progressive Web Applications). There are already a lot of publications on Habré on this topic, the material from the RUVDS company’s blog is of particular interest , from which we will quote the definition of PWA:
... is a mobile application that has been downloaded from a web application. Moreover, as you can see, to install such an application you do not have to interact with the Play Market. As a result, the installation of such applications is as simple as possible. However, this is far from the most interesting. By launching such programs, you get the opportunity to work with the data that they display, even without an Internet connection. They allow you to interact with web pages offline.
The question sometimes arises: how do progressive web applications relate to native ones? Is it worth it to develop PWA if you already have native? First of all, this question, as well as many others, is answered by the article of Jason Grigsby from the site “A List Apart”, which we have translated for you today. The article is an excerpt from the book of 2018. Please do not forget to vote.

To determine if your organization is wise to develop its own progressive web application (PWA), ask yourself two questions:

  1. Does your organization have a website? If so, then a progressive web application will probably come in handy. It sounds corny, but it is: it is advisable to turn almost any website into a progressive web application, since they contain the best practices of the Web.
  2. Does your organization make money through the site through electronic sales, advertising, or in some other way? If so, then you definitely need a progressive web application, as it can significantly increase revenue.

This does not mean that the site needs to implement all the existing features of progressive web applications. You may not need to provide offline functionality, push notifications, or even the ability to set your site on the home screen of a user device. It is likely that an absolute minimum will suffice: a secure site, a service worker that speeds up its work, a manifest file - such things will come in handy on any site.

Of course, you can decide that your personal website or side project is not the resource for which it is worth developing a progressive web application, spending extra time and effort on it. This is understandable, and in the long term, even personal sites will be overgrown with the capabilities of progressive web applications, when support for these features will be added to the content management systems on which these sites are based. For example, Magento and WordPress at the time of writing this text had already announced plans to add advanced web application capabilities to their platforms. Others are expected to follow suit.

However, if you run a site that somehow provides a profit for your organization, you should turn it into a progressive web application and plan how to do it now. Companies that have deployed advanced web applications receive increased conversions, user engagement, increased sales and advertising revenue. For example, Pinterest as a result of the introduction of PWA, the main audience increased by 60 percent , and user-generated advertising revenue grew by 44 percent. West Elm users began to spend about 15 more time on the site, revenue from one visit increased by 9 percent .



Drawing: Eddie Osmani, Google, wrote a case study on Pinterest's progressive web application, comparing it to both their old mobile site and their native app.

There are so many success stories associated with progressive web applications that my company, Cloud Four, has launched a site called PWA Stats that records them. It is likely that there will be a case about an organization similar to yours, and with this example you can convince colleagues of the appropriateness of a progressive web application for your company.



Figure : PWAstats.com contains statistics and stories that testify to the effectiveness of progressive web applications.

And such persuasive work may be necessary. Despite the obvious advantages of progressive web applications, many businesses have not yet reorganized for them, often because management simply does not yet know about PWA. (Therefore, when you start creating PWA right now, you might be gaining time!)

However, there is also serious confusion as to what advanced web applications are capable of, what they can be used for, and how they relate to native web applications. Such confusion provokes fear, uncertainty, doubts, and all this slows down the implementation of progressive web applications.

If you advocate the implementation of PWA in your organization, then some may not understand you, and you may even encounter resistance. So let's discuss some of the arguments that will help you strengthen your position and come in handy when convincing your colleagues.

Native applications and PWA can coexist


If your organization already has a native application, then stakeholders may object that in addition they do not need any PWA - especially because the main advantage of PWA is the introduction of features and functionality inherent in native applications.
It is tempting to assume that progressive web applications compete with native ones - as a rule, it is in this vein that they are written about in the media. But in fact, a progressive web application works regardless of whether the company already has a native one.

Take a break from the “native apps versus web apps” disputes and focus on the specifics of user interactions with your organization’s website on the Internet. It is advisable to use advanced web applications simply because of their own advantages: they help you expand your user audience, protect your site, make a profit, provide more reliable interactions with users and notify them of updates - all this will complement the capabilities of your native application.

Custom Audience Extension


Not all of your current users have your native application installed - and your potential users don't have it at all. Probably, the application is not even installed at the majority of typical users, but those who still installed it can go there from a PC.

Improving the quality of interactions with the site, you increase the chances that your current and future users will read your content or purchase your products (or even download your native application!) You can improve the quality of working with the site using a progressive web application.

Despite what technical blogs assure you, the mobile web is growing faster than native applications. The comScore website compared the top 1000 mobile apps with the top 1000 most-placed sites and concluded that “the mobile web’s audience is almost three times that of mobile apps and is growing twice as fast . ”

Although it’s true that people spend more time in their favorite mobile applications than on the web, keep in mind that sometimes it’s very difficult to convince a person to install your application on their device. Approximately half of smartphone users in the USA, as a rule, do not install even one application per month .

If your native application is in the application store, this does not guarantee that people will install it. Work on promoting the application and encouraging users to install it is expensive. According to Liftoff, a mobile app marketing company,the average cost required to install the application by one user is $ 4.12 and soars up to $ 8.21 per user, if you want a person to create an account in your application.

If you are lucky enough and someone starts installing your application, the following obstacle arises: you need to convince people not to quit using the application. When a specialist, Andrew Chen, analyzed data on user retention on the material of 125 million mobile phones, he found that the average application loses 77% of DAU (daily active users) 3 days after installation . In 30 days, 90% of DAUs are lost. Over 90 days, more than 95% of DAUs are lost.



Drawing: Mobile user loyalty remains very short lived. The average application loses 95% of its active users in 90 days.

Progressive web applications do not face such challenges. Understanding a progressive web application is no more difficult for a person than on your site, since this is your site. All the features of a progressive web application are also immediately available. You do not have to perform intermediate steps: first go to the application store, then download the application from there. Installation is quick: it happens in the background when you first visit the site and literally comes down to adding an icon to the main screen.

As Alex Russell wrote in his article on Medium in 2017:
Slippage when installing PWA is much lower. Our internal metrics on Google show that with comparable volumes of PWA banners and native application banners (the comparison is almost the same as with apples and apples), PWA banners give conversion 5-6 times more often. More than half of the users who decided to install the native application when navigating through such banners do not finish the installation process, while PWA installation occurs almost instantly.
In short, a significant and yet growing proportion of your users communicate with you via the web. Progressive web applications can increase revenue, increase user engagement, as well as their number.

Protect your site


If you collect credit card information or other proprietary information, you are simply required to provide your users with a well-protected website. But even if confidential data is not processed on your site, it still makes sense to use the HTTPS protocol and provide the user with safe interaction with the site. The most seemingly innocent network traffic may contain signals that simplify user identification and potential hacking of their data. What can we say about the concerns regarding possible state surveillance.

Previously, the operation of a secure server was expensive, complicated, and also (it seemed) that it runs slower than usual. Today everything has changed. SSL / TLS certificates used to cost hundreds of dollars, but today the Let's Encrypt providergives them away for free. Many hosting providers work with certificate providers, so you can configure HTTPS with one click. In addition, it turns out that HTTPS is not as slow as it once seemed .

HTTPS sites can also upgrade to a new version of HTTP called HTTP / 2. The main advantage of HTTP / 2 is that it is significantly faster than HTTP / 1. Many hosting providers and content delivery networks (CDNs) provide that when you switch to HTTPS you are connected to HTTP / 2 without any additional action on your part.

Even if such an incentive is not enough to switch to HTTPS, browser manufacturers use the carrot and stick method, pushing sites to introduce changes. As a “whip”Chrome began to warn users that they are entering their data on a site that is not equipped with HTTPS . Other browsers are likely to follow suit and will flag sites that work without encryption, so that users realize that their data can be intercepted.



As an HTTPS gingerbread browser, browsers are beginning to require HTTPS capabilities from the site as mandatory. If you want to use the latest and greatest web technologies, then you can not do without HTTPS . In fact, some features that used to work over unsecured HTTP are now considered to affect sensitive data. Such, for example, is geolocation. In HTTPS, they are limited. After some thought, it seems that this is also a little whip. Gingerbread Whip?

Given all this, it is advisable to provide your users with a secure site. So terrible senseless warnings are immediately excluded. You get access to new browser capabilities. Get the speed gains provided by HTTP / 2. And also: set the stage for a progressive web application.
In order to use service workers, a key technology related to progressive web applications, you need to equip HTTPS on the site. Therefore, if you want to enjoy all the PWA goodies at once, first you need to do some serious preparatory work.

Increase profits


There are numerous studies that demonstrate a correlation between the speed of a site and how much time and money people are willing to spend on it. According to the DoubleClick, " 53% of visits to mobile websites interrupted initiated by the user if the download page takes more than 3 seconds ." The company Walmart has found that for every 100 milliseconds to optimize page loading speed falls to 1% of additional revenue .

In the end, the high software the speed of interacting with the site means a lot. Unfortunately, the average duration of loading the pages of mobile sites when connecting via 3G is 19 seconds . Again, this progressive web application helps to cope with this problem.

Using service workers, PWAs provide incredibly fast interactions. Using service workers, the developer can explicitly indicate which files the browser should store in the local cache and under what circumstances should check for updates for cached files. Files stored in the local cache can be accessed much faster than files retrieved from the network.

When requesting a new page in a progressive web application, the user already has in the local cache of the device most of the files necessary to display this page. Thus, the page can load almost instantly, since the browser only needs to download additional information on this page.

In many respects, it is these factors that provide high speed of work with native applications. By installing the native application, the user pre-downloads the files necessary to run the application. After that, the native application has to retrieve only new data from the network. Service workers can do something similar when interacting with the web.

Progressive web applications can have a dramatic effect on performance. For example, Tinder managed to reduce the page loading time from 11.91 seconds to 4.69 seconds by developing a progressive web application, moreover, it is 90% more compact than their native Android application. Treebo hotel chain launched its own progressive web application and received a fourfold increase in conversion over the year; conversion rates for returning users tripled, and the median user interaction time with a mobile site dropped to 1.5 seconds.

Ensure network reliability


Mobile networks are not working smoothly. You just had a high-speed LTE connection, and now you are already crawling at a 2G pace or are generally offline. We all found ourselves in such situations. But most sites are still being done with the expectation that work with them will take place on a reliable network.

The PWA approach allows you to create an application that you can continue to work with offline. In fact, to ensure offline work with applications and to speed up interaction with web pages, the same technology was used: service workers.
As you already know, service workers allow you to explicitly tell the browser which data to cache locally. This category of files can be expanded: let it be not only the resources necessary for downloading the application, but also the content of web pages so that users can not interrupt their viewing, even when offline.



Figure : The title bar in the progressive housing.com web application changes color from purple (left) to gray (right) when it is offline. The content that the user viewed earlier or added to favorites is available offline (on the right), and this is reasonable, as the housing.com application is aimed at the Indian market, and in India the network connection can be slow and unreliable.

Using a service worker, you can even pre-cache the application shell by doing this “behind the scenes”. Thus, when a visitor first comes to a progressive web application, he will be able to download the entire application, save it in the cache - and that’s all, you can work with it offline without any additional actions on the part of the user.

Do not let go of users


Perhaps push notifications are the best way to engage users in working with the application. Push notifications seduce a person, encouraging him to return to the application for tasty information - from urgent news to chat messages.

Why, then, implement push notifications only for those who have installed the native application? For example, if you have a messenger application, or it is designed to work with social networks, it would be very helpful to notify users of new messages.



Figure : A progressive Twitter application called Twitter Lite sends the same notifications as the native application (left). When you select such a notification, you immediately go to Twitter Lite to the tweet to which it refers (right).

Progressive web applications and, in particular, service workers we love, allow us to use push notifications on any site. Notifications are not a required feature in a progressive web application, but they are often effective in improving user re-engagement and revenue growth.

Regardless of whether you have a native application, a progressive web application does not bother you. Each step in developing such an application is a step towards improving the website. Sites must be safe. Must be fast. It would be nice if they were available offline and, if necessary, could send notifications to users.
Those users who don’t have your native application (or they don’t use it) will enjoy the fact that working with your site has become much more convenient. A big plus for your entire business. So simple.

More articles:


All Articles