davidbgk
/
larlet-fr-david-cache

title: Progressive Web Applications (PWA): A primer
url: https://tech.people-doc.com/progressive-web-applications-primer.html
hash_url: f23e53c1e67a3062da9d338079897fde


<h3>Wanna Feel Old?</h3>
<p>Back in the days some developers created static websites, and I meant static as in table layout and pixel-perfect design. This were the good ol’ times… Well not really, and since then the web did move a lot!</p>
<p>First, we get rid of those damn table layout, flex a bit to continue by adding some interactivity to website using GIF, <a href="https://www.wikiwand.com/en/Dynamic_HTML">DHTML</a>, and <a href="https://www.wikiwand.com/en/Ajax_(programming)">AJAX</a>. Then, we decided to challenge the screen size <em>statu quo</em> and go to the infinity of handheld devices form-factors.</p>
<p>That’s when Responsive Web Design (RWD) emerged has a good idea to avoid duplicating what we did. A side-effect of RWD has been to highlight the multiple way and devices people were using to browse the web, thus benefiting accessibility and those who need it (i.e. everyone).</p>
<p>With the development of the smartphone market, web development was taken over by native mobile technologies (Android, IOS, etc). So, it was time to get back to our basic, and work on real tooling to move our ecosystem forward. Hence, the birth of Node/NPM that changed the game, introducing frameworks and libraries to the daily process of web developers (grunt, gulp, webpack, rollup, etc). We were now developing web app more often than website and web developers’ role evolve to become Software Engineer one!</p>
<p>With these new powers, came new responsibilities. Now, more than before, we have to ensure our products quality, maintainability, performance and reachability. Indeed, in this age, users access content on various type of devices (desktop, smart- vs. dumb-phone) and uneven connection speed (office, home, commute). Once again, we were caught up with what accessibility has been trying to fix for years.</p>
<p>Ok, but that was back in 2015…</p>
<h3>What is a Progressive Web App?</h3>
<p>Since 2017, web browser are trying to reclaim market shares from the native apps using Progressive Web App (PWA):</p>
<blockquote>
<p>A website which looks and behaves exactly like a native mobile app, which means that it can be <strong>added to the home screen</strong> on a smartphone, send <strong>push notifications</strong>, access the <strong>device’s hardware</strong> and - most importantly - <strong>work offline</strong>.
— <a href="https://webagility.com/posts/how-progressive-web-apps-make-the-web-great-again">webagility.com/posts/how-progressive-web-apps-make-the-web-great-again</a>.</p>
</blockquote>
<p>If you never used a PWA before, you might want to reconsider your statement after visiting at <a href="about:serviceworkers-internals">about:serviceworkers-internals</a> on Firefox and <a href="chrome://serviceworker-internals/">chrome://serviceworker-internals/</a> on Chrome.</p>
<p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_1.png" alt="Examples of th satstuspage of a browser" width="50%" style="position:relative;left:25%"></p>
<p>What are those pages, you might ask? They list the service workers, the part of the PWA that manages cache and let the application work even when there is no more connectivity.</p>
<p>Understanding PWA will be easier if you are familiar with modern web framework that hook into a page to load the app and navigates other content from it. In PWA parlance they call this the application shell pattern and it aims at making the app <a href="https://developers.google.com/web/updates/2015/11/app-shell#first_load_and_loading_other_pages">load fast, be cached, dynamically display content</a>.</p>
<p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_2.jpg" alt="What is the AppShell?" width="50%" style="position:relative;left:25%"></p>
<p>In order to get a fast TTI (Time To Interactive), you should design your homepage carefully to hold what should be on screen immediately and inline it (CSS and images mainly) or fake it (use CSS or text placeholder).</p>
<p>But first things first, what are the benefits of developing and using PWA?</p>
<h3>Business Incentives</h3>
<p>The paramount benefit is to make your users happier with an application that will be <a href="https://developers.google.com/web/progressive-web-apps/">faster to install, more reliable to use and provide engaging content</a>. And happier users stay longer, and come back to your app. Behind this claim, are facts and numbers to support it.</p>
<p>First, the bounce rate is extremely dependant on how fast your app serves content but above all how fast it becomes interactive so the app can handle user input. This metric is called <a href="https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive">Time to Interactive</a> and if it goes above 3s expect to lose half of your users.</p>
<p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_3.png" alt="Time To Interactive" width="50%" style="position:relative;left:25%"></p>
<p>Using PWA will reduce network consumption as you reduce the amount of data to transfer to only the data themselves, the application code can be cached and persist even after tab or browser has been closed. If your company pays for its bandwidth, you know how this is important.</p>
<p>As you are distributing your app yourself, you mobile app is the same as your web app so this means less code to maintain and less dependencies to 3rd parties such as Play Store and their review processes.</p>
<p>Due to being web content with light payload you can reach emerging market at the same cost for you and reduced cost for your users (remember not every country has cheap 100 Go/month like we have in France).</p>
<p>Google developers platform has a lot of <a href="https://developers.google.com/web/showcase/">showcases you can explore</a> to see other benefit, categorized by regions or industries.</p>
<h3>User benefits</h3>
<h4>Lighter</h4>
<p>In comparison to native apps, PWA are a lighter as most of the heavy-lifting is done by the browser so you can focus on coding and shipping code related to your business.</p>
<p>As the app mostly exchanges data even across browser sessions, your user will consume less from their data plans and they will love you for this as they will be able to consume more of your content.</p>
<p>Once again a lighter app means more people can access it, in different context and with different connectivity. Indeed, why would you cut off potential customer from Africa or a remote mountainous areas in France?</p>
<h4>Faster to install</h4>
<p>Being lighter mean faster to download and install, that means faster access to content and more time on the app.</p>
<blockquote>
<p>In a mobile app <strong>every step you make a user perform</strong> before they get value out of your app will <strong>cost you 20% of users</strong>.
— Gabor Csele, a Product Manager in Google</p>
</blockquote>
<p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_4.png" alt="From Discovery to Install charts, comparing apps VS PWAs" width="50%" style="position:relative;left:25%"></p>
<h4>Familiar Behavior</h4>
<p>One goal of PWA is to fill the gap between web experience and native experience using only web technologies. Despite being an active area of development, mobile web browser and OS offer some features to make you feel like your are using a native app. For instance, installing a PWA you will:</p>
<ul>
<li>Get your app icon on the homescreen and the app listing,</li>
<li>View your app as another native app while hitting windows listing button</li>
<li>Manage it like native app (removal)</li>
</ul>
<h3>Installing</h3>
<p>To install a progressive web app it’s better to get yourself a smartphone and open your browser of choice. In Firefox, <a href="https://developer.mozilla.org/en-US/Apps/Progressive/Add_to_home_screen">look for the house icon</a>, it’s official name is <em>Add to Home screen</em> (A2HS), with a plus in the URL bar, on Chrome <a href="https://developers.google.com/web/fundamentals/app-install-banners/">head to the menu and look for Add to Homescreen</a>.</p>
<h3>What Can Web Do Today?</h3>
<p>You might think that the web can compete with native app API, that’s probably because you forgot about <a href="http://whatwebcando.today">What Can Web Do Today?</a> website:</p>
<blockquote>
<p>bluetooth, geolocation, speech recognition and even local notifications and push messages work well in a lot of major and modern browsers...
— <a href="http://progressivewebapps.net/">Progressivewebapps.net</a></p>
</blockquote>
<p><img src="https://tech.people-doc.com/images/progressive-web-app-primer/pwa_5.png" alt="Screenshot of the website 'What can web do today?'" width="50%" style="position:relative;left:25%"></p>
<h3>Conclusion - Going even further</h3>
<p>If you are looking for performance on the web, you should be looking at <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts">Web Assembly</a>. It’s coming pretty fast and it’s back by… well, <a href="https://arstechnica.com/information-technology/2015/06/the-web-is-getting-its-bytecode-webassembly/">every major actor of web technologies</a>: Mozilla Foundation, Google, Microsoft, Apple and W3C.</p>
<p>We hope this introduction to Progressive Web Applications made you want to
implement it on your own projects. And at least we certainly think you should :)</p>
<p>Last but not least: <a href="https://boards.greenhouse.io/peopledoc/jobs/613268#.WoL7SFPOV0s">we're hiring Frontend developers</a> to join the team to work on PWAs and more.</p>
<p>— Édouard</p>