Progressive Web Apps: The Case for PWAs
#1
Progressive Web Apps: The Case for PWAs

<p><b>A note from the editors:</b> We’re pleased to share an excerpt from Chapter 2 of Jason Grigsby’s <a href="https://abookapart.com/products/progressive-web-apps"><cite>Progressive Web Apps</cite></a>, from <a href="https://abookapart.com/"><cite>A Book Apart</cite></a>.</p><p>Now that you know what a progressive web app is, you’re probably wondering if your organization would benefit from one. To determine if it makes sense for your organization, ask yourself two questions:</p>

<ol>
<li><strong>Does your organization have a website?</strong> If so, you would probably benefit from a progressive web app. This may sound flippant, but it’s true: nearly every website should be a progressive web app, because they represent best practices for the web.</li>
<li><strong>Does your organization make money on your website via ecommerce, advertising, or some other method?</strong> If so, you <em>definitely</em> need a progressive web app, because progressive web apps can have a significant impact on revenue.
</ol>

<p>This doesn’t mean that your site needs to have every possible feature of progressive web apps. You may have no need to provide offline functionality, push notifications, or even the ability for people to install your website to their homescreen. You may only want the bare minimum: a secure site, a service worker to speed up the site, and a manifest file—things that benefit every website.</p>

<p>Of course, you may decide that your personal website or side project doesn’t warrant the extra effort to make it into a progressive web app. That’s understandable—and in the long run, even personal websites will gain progressive web app features when the underlying content management systems add support for them. For example, both <a href="https://magento.com/news-room/press-releases/magento-commerce-announces-progressive-web-applications-studio">Magento</a> and <a href="https://www.youtube.com/watch?v=Di7RvMlk9io">WordPress</a> have already announced their plans to bring progressive web apps to their respective platforms. Expect other platforms to follow suit.</p>

<p>But if you’re running any kind of website that makes money for your organization, then it would behoove you to start planning for how to convert your website to a progressive web app. Companies that have deployed progressive web apps have seen increases in conversion, user engagement, sales, and advertising revenue. For example, <a href="https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154">Pinterest saw core engagement increase by 60 percent</a> and user-generated ad revenue increase by 44 percent (Fig 2.1). <a href="https://www.youtube.com/watch?v=PsgW-0M67TQ&amp;feature=youtu.be&amp;t=34m4s">West Elm saw a 15 percent increase in average time spent on their site</a> and a 9 percent lift in revenue per visit.</p>

<figure>
<img src="/d/progressive-web-apps/fig2-1.jpg" alt="Comparing old mobile web to the progressive web version of Pinterest, the time spent that was greater than 5 minutes increased by 40%, the user-generated ad revenue increased by 44%, ad clickthroughs increased by 50%, and core engagement metrics improved by 60%. Even comparing to the native app, most of these same metrics increased between 2-5%.">
<figcaption><strong>Fig 2.1:</strong> Addy Osmani, an engineering manager for Google, wrote <a href="https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154">a case study about Pinterest’s progressive web app</a>, comparing it to both their old mobile website and their native app.</figcaption>
</figure>

<p>The success stories for progressive web apps are so abundant that my company, Cloud Four, started a website called <a href="https://www.pwastats.com/">PWA Stats</a> to keep track of them (Fig 2.2). There’s a good chance that we’ve collected a case study from an organization similar to yours that you can use to convince your coworkers that building a progressive web app makes sense.</p>

<figure>
<img src="/d/progressive-web-apps/fig2-2.jpg" alt="A screenshot of the PWA Stats homepage, showing case studies for Uber, Trivago, Petlove, and the Grand Velas Riviera Maya resort.">
<figcaption><strong>Fig 2.2:</strong> <a href="https://www.pwastats.com/">PWAstats.com</a> collects statistics and stories documenting the impact of progressive web apps.</figcaption>
</figure>

<p>And convincing them may be necessary. Despite the clear benefits of progressive web apps, many businesses still haven’t converted—often because they simply don’t know about PWAs yet. (So if you start building one now, you may get a jump on your competition!)</p>

<p>But there is also a lot of confusion about what progressive web apps are capable of, where they can be used, and how they relate to native apps. This confusion creates fear, uncertainty, and doubt (FUD) that slow the adoption of progressive web apps.</p>

<p>If you advocate for progressive web apps in your organization, you’ll likely find some confusion and possibly even encounter some resistance. So let’s equip you with arguments to cut through the FUD and convince your colleagues.</p>

<h2>Native apps and PWAs can coexist</h2>

<p>If your organization already has a native app, stakeholders may balk at the idea of <em>also</em> having a progressive web app—especially since the main selling point of PWAs is to enable native app features and functionality.</p>

<p>It’s tempting to view progressive web apps as competition to native apps—much of the press coverage has adopted this storyline. But the reality is that progressive web apps make sense irrespective of whether a company has a native app.</p>

<p>Set aside the “native versus web” debate, and focus on the experience you provide customers who interact with your organization via the web. Progressive web apps simply make sense on their own merits: they can help you reach more customers, secure your site, generate revenue, provide more reliable experiences, and notify users of updates—all as a complement to your native app.</p>

<h3>Reach more customers</h3>

<p>Not all of your current customers—and none of your potential customers—have your native app installed. Even your average customer is unlikely to have your app installed, and those customers who <em>do</em> have your app may still visit your site on a desktop computer.</p>

<p>Providing a better experience on the website itself will increase the chances that current and future customers will read your content or buy your products (or even download your native app!). A progressive web app can provide that better experience.</p>

<p>Despite what the tech press might have you believe, the mobile web is growing faster than native apps. comScore compared the top one thousand apps to the top one thousand mobile web properties and found that “<a href="https://www.comscore.com/Insights/Presentations-and-Whitepapers/2016/The-2016-US-Mobile-App-Report">mobile web audiences are almost 3x the size and growing 2x as fast as app audiences</a>”.</p>

<p>And while it’s true that people spend more time in their favorite apps than they do on the web, you may have trouble convincing people to install your app in the first place. <a href="https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report">Over half of smartphone users in the United States don’t download any apps</a> in a typical month.</p>

<p>Having a native app in an app store doesn’t guarantee that people will install it. It costs a lot to advertise an app and convince people to try it. According to app marketing company Liftoff, <a href="https://www.emarketer.com/Article/Cost-of-Acquiring-Mobile-App-User/1016688">the average cost to get someone to install an app is $4.12</a>, and that shoots up to $8.21 per install if you want someone to create an account in your app.</p>

<p>If you’re lucky enough to get someone to install your app, the next hurdle is convincing them to continue to use it. When analyst Andrew Chen analyzed user retention data from 125 million mobile phones, he found that “<a href="https://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/">the average app loses 77% of its DAUs [daily active users] within the first 3 days</a> after the install. Within 30 days, it’s lost 90% of DAUs. Within 90 days, it’s over 95%” (Fig 2.3).</p>

<figure>
<img src="/d/progressive-web-apps/fig2-3.jpg" alt="Chart: The average retention curve for Android apps drops precipitously within the first three days and continues to drop more slowly to near 0 over the next 90 days.">
<figcaption><strong>Fig 2.3:</strong> App loyalty remains a big issue for native apps. The average app loses over 95 percent of its daily active users within 90 days.</figcaption>
</figure>

<p>Progressive web apps don’t have those same challenges. They’re as easy for people to discover as your website is, because they <em>are</em> your website. And the features of a progressive web app are available immediately. There’s no need to jump through the hoops of visiting an app store and downloading the app. Installation is fast: it happens in the background during the first site visit, and can literally be as simple as adding an icon to the home screen.</p>

<p>As Alex Russell wrote in <a href="https://medium.com/dev-channel/why-are-app-install-banners-still-a-thing-18f3952d349a">a 2017 Medium post</a>:</p>

<figure class="quote">
<blockquote>The friction of PWA installation is <em>much</em> lower. Our internal metrics at Google show that for similar volume of prompting for PWA banners and native app banners — the closest thing to an apples-to-apples comparison we can find — <em>PWA banners convert 5–6x more often</em>. More than half of users who chose to install a native app from these banners fail to complete installing the app whereas PWA installation is near-instant.</blockquote>
</figure>

<p>In short, a large and growing percentage of your customers interact with you on the web. Progressive web apps can lead to more revenue and engagement from more customers.</p>

<h3>Secure your website</h3>

<p>If you’re collecting credit cards or private information, providing a secure website for your web visitors is a must. But even if your website doesn’t handle sensitive data, it still makes sense to use HTTPS and provide a secure experience. Even seemingly innocuous web traffic can provide signals that can identify individuals and potentially compromise them. That’s not to mention the concerns raised by revelations of government snooping.</p>

<p>It used to be that running a secure server was costly, confusing, and (seemingly) slower. Things have changed. SSL/TLS certificates used to cost hundreds of dollars, but now certificate provider <a href="https://letsencrypt.org/">Let’s Encrypt</a> gives them out for free. Many hosting providers have integrated with certificate providers so you can set up HTTPS with a single click. And it turns out that <a href="https://istlsfastyet.com/">HTTPS wasn’t as slow as we thought it was</a>.</p>

<p>Websites on HTTPS can also move to a new version of HTTP called HTTP/2. The biggest benefit is that HTTP/2 is significantly faster that HTTP/1. For many hosting providers and content delivery networks (CDNs), the moment you move to HTTPS, you get HTTP/2 with no additional work.</p>

<p>If that wasn’t enough incentive to move to HTTPS, browser makers are using a carrot-and-stick approach for pushing websites to make the change. For the stick, Chrome has started warning users when they enter data on a site that isn’t running HTTPS. By the time you read this, <a href="https://blog.chromium.org/2017/04/next-steps-toward-more-connection.html">Google plans to label all HTTP pages with a “Not secure” warning</a> (Fig 2.4). Other browsers will likely follow suit and start to flag sites that aren’t encrypted to make sure users are aware that their data could be intercepted.</p>

<figure>
<img src="/d/progressive-web-apps/fig2-4.jpg" alt="The eventual treatment of all HTTP pages in Chrome will be to show a red yield icon with the words 'Not secure'.">
<figcaption>Fig 2.4: Google has announced its intention to <a href="https://www.chromium.org/Home/chromium-security/marking-http-as-non-secure">label any website that isn’t running HTTPS as not secure</a>. Different warning styles will be rolled out over time, until the label reaches the final state shown here.
</figcaption>
</figure>

<p>For the HTTPS carrot, browsers are starting to require HTTPS to use new features. If you want to utilize the latest and greatest web tech, <a href="https://blog.mozilla.org/security/2018/01/15/secure-contexts-everywhere/">you’ll need to be running HTTPS</a>. In fact, some features that used to work on nonsecure HTTP that are considered to contain sensitive data—for example, geolocation—are being restricted to HTTPS now. On second thought, perhaps this is a bit of a stick as well. A carrot stick?</p>

<p>With all that in mind, it makes sense to set up a secure website for your visitors. You’ll avoid scary nonsecure warnings. You’ll get access to new browser features. You’ll gain speed benefits from HTTP/2. And: you’ll be setting yourself up for a progressive web app.</p>

<p>In order to use service workers, the core technology for progressive web apps, your website <em>must</em> be on HTTPS. So if you want to reap the rewards of all the PWA goodness, you need to do the work to make sure your foundation is secure.</p>

<h3>Generate more revenue</h3>

<p>There are numerous studies that show a connection between the speed of a website and the amount of time and money people are willing to spend on it. DoubleClick found that “<a href="https://marketingplatform.google.com/about/resources/">53% of mobile site visits are abandoned if pages take longer than 3 seconds to load</a>.” Walmart found that <a href="https://www.slideshare.net/devonauerswald/walmart-pagespeedslide">for every 100 milliseconds of improvement to page load time, there was up to a one percent increase in incremental revenue</a>.</p>

<p>Providing a fast web experience makes a big difference to the bottom line. Unfortunately, the average load time for mobile websites is <a href="https://marketingplatform.google.com/about/resources/">nineteen seconds on 3G connections</a>. That’s where a progressive web app can help.</p>

<p>Progressive web apps use service workers to provide an exceptionally fast experience. Service workers allow developers to explicitly define what files the browser should store in its local cache and under what circumstances the browser should check for updates to the cached files. Files that are stored in the local cache can be accessed much more quickly than files that are retrieved from the network.</p>

<p>When someone requests a new page from a progressive web app, most of the files needed to render that page are already stored on the local device. This means that the page can load nearly instantaneously because all the browser needs to download is the incremental information needed for that page.</p>

<p>In many ways, this is the same thing that makes native apps so fast. When someone installs a native app, they download the files necessary to run the app ahead of time. After that occurs, the native app only has to retrieve any new data. Service workers allow the web to do something similar.</p>

<p>The impact of progressive web apps on performance can be astounding. For example, <a href="https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0">Tinder cut load times from 11.91 seconds to 4.69 seconds</a> with their progressive web app—and it’s 90 percent smaller than their native Android app. Hotel chain Treebo launched a progressive web app and <a href="https://tech.treebo.com/we-didnt-see-a-speed-limit-so-we-made-it-faster-treebo-and-pwas-the-journey-so-far-f7378410abc7">saw a fourfold increase in conversion rates year-over-year</a>; conversion rates for repeat users saw a threefold increase, and their median interactive time on mobile dropped to 1.5 seconds.</p>

<h3>Ensure network reliability</h3>

<p>Mobile networks are flaky. One moment you’re on a fast LTE connection, and the next you’re slogging along at 2G speeds—or simply offline. We’ve all experienced situations like this. But our websites are still primarily built with an assumption that networks are reliable.</p>

<p>With progressive web apps, you can create an app that continues to work when someone is offline. In fact, the technology used to create an offline experience is the same technology used to make web pages fast: service workers.</p>

<p>Remember, service workers allow us to explicitly tell the browser what to cache locally. We can expand what is stored locally—not only the assets needed to render the app, but also the content of pages—so that people can continue to view pages offline (Fig 2.5).</p>

<figure>
<img src="/d/progressive-web-apps/fig2-5.jpg" alt="Three screens from the housing.com site show how the design adapts to show when it is offline and that it can continue to show saved results even when offline.">
<figcaption><strong>Fig 2.5:</strong> The header in <a href="https://housing.com">housing.com’s progressive web app</a> changes from purple (left) to gray when offline (middle). Content the user has previously viewed or favorited is available offline (right), which is important for housing.com’s home market in India, where network connectivity can be slow and unreliable.
</figcaption>
</figure>

<p>Using a service worker, we can even precache the shell of our application behind the scenes. This means that when someone visits a progressive web app for the first time, the whole application could be downloaded, stored in the cache, and ready for offline use without requiring the person to take any action to initiate it. For more on when precaching makes sense, see Chapter 5.</p>

<h3>Keep users engaged</h3>

<p>Push notifications are perhaps the best way to keep people engaged with an application. They prompt someone to return to an app with tantalizing nuggets of new information, from breaking news alerts to chat messages.</p>

<p>So why limit push notifications to those who install a native application? For instance, if you have a chat or social media application, wouldn’t it be nice to notify people of new messages (Fig 2.6)?</p>

<figure>
<img src="/d/progressive-web-apps/fig2-6.jpg" alt="Two screens: On the left, a list of system notifications including one from the Twitter website. On the right, the notification opened on the Twitter site to a funny tweet about WiFi passwords in a bar.">
<figcaption><strong>Fig 2.6:</strong> Twitter’s progressive web app, Twitter Lite, sends the same notifications that its native app sends. They appear alongside other app notifications (left). Selecting one takes you directly to the referenced tweet in Twitter Lite (right).</figcaption>
</figure>

<p>Progressive web apps—specifically our friend the service worker—make push notifications possible for any website to use. Notifications aren’t required for something to be a progressive web app, but they are often effective at increasing re-engagement and revenue:</p>

<ul>
<li>United eXtra Electronics saw <a href="https://developers.google.com/web/showcase/2016/extra">a fourfold increase in re-engagement and a 100 percent increase in sales</a> from users arriving via push notifications.</li>
<li>Notifications contributed to <a href="https://developers.google.com/web/showcase/2017/lancome">a 12 percent increase in recovered carts</a> for Lancôme.</li>
<li>Classified ads company OLX saw <a href="https://developers.google.com/web/showcase/2017/olx">a 250 percent increase in re-engagement</a> using push notifications and a 146 percent higher click-through rate on ads.</li>
<li>Carnival Cruise Line garnered <a href="https://developers.google.com/web/showcase/2016/carnival">a 42 percent open rate from its push notifications</a>. In addition to the 24 percent of mobile users who opted in to the notifications, 16 percent of desktop users opted in as well.</li>
</ul>

<p>We’ll talk more about push notifications in Chapter 6. For now, it can be helpful to know that progressive web apps can send push notifications, just like a native app—which may help you make the case to your company.</p>

<p>Whether you have a native app or not, a progressive web app is probably right for you. Every step toward a progressive web app is a step toward a better website. Websites <em>should</em> be secure. They <em>should</em> be fast. They would be better if they were available offline and able to send notifications when necessary.</p>

<p>For your customers who don’t have or use your native app, providing them with a better website experience is an excellent move for your business. It’s really that simple.</p>


http://alistapart.com/article/progressiv...ps-excerpt
Reply