Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embodied in
critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the
information herein. However, the information contained in this book is sold
without warranty, either express or implied. Neither the authors and SitePoint
Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be
caused either directly or indirectly by the instructions contained in this book, or
by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this
book uses the names only in an editorial fashion and to the benefit of the
trademark owner with no intention of infringement of the trademark.
A Deep Dive into Progressive Web Apps iii
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content
for web professionals. Visit sitepoint.com to access our blogs, books,
newsletters, articles, and community forums. You’ll find a stack of information on
JavaScript, PHP, Ruby, mobile development, design, and more.
iv A Deep Dive into Progressive Web Apps
Table of Contents
Preface .......................................................................................................................... vi
Apps .................................................................................................................................. 7
Case Studies........................................................................................................................ 10
Chapter 8: HTTPS......................................................................................... 21
Distribution ..............................................................................................................33
vi A Deep Dive into Progressive Web Apps
Preface
Progressive Web Apps (PWAs) try to overlap the worlds of the mobile web apps
and native mobile apps by offering the best features of each to mobile users.
They offer an app-like user experience (splash screens and home screen icons),
they’re served from HTTPS-secured servers, they can load quickly (thanks to
page load performance best practices) even in low quality or slow network
conditions, and they have offline support, instant loading and push notifications.
The concept of PWAs was first introduced by Google, and is still supported by
many Chrome features and great tools, such as Lighthouse, an open-source tool
for accessibility, performance and progressiveness auditing.
This little ebook began its life as an email course published by SitePoint. It
provides a beginner-friendly introduction to PWAs, presenting lists of tools and
resources for delving into this cutting-edge field.
An Introduction to Progressive Web Apps 7
Chapter
An Introduction
to Progressive
Web Apps 1
8 A Deep Dive into Progressive Web Apps
Progressive Web Apps are web apps that provide a user experience previously
only associated with native apps. They’re fast, engaging, and they work even
when they’re offline. They also have the advantages of web apps: they’re
linkable, they require no install process, and they’re not subject to the whims of
the App Store Approval process.
Everything I’d heard suggested they were the best of both worlds, so I was keen
to learn more and figured there were a few of you in the same frame of mind. So
in this Deep Dive we’re going to progress through the world of PWAs, see what’s
what and what is possible.
To start with, I thought I’d throw a few introductory articles your way:
A very thorough post covering the past and future of PWAs [infrequently].
Chapter
PWAs in the
Real World
2
10 A Deep Dive into Progressive Web Apps
It’s one thing to talk about the power and potential of PWAs in the abstract; it’s
another to see cool examples of this technology. So let’s do that now.
Examples
NASA’s open source software site is a PWA [code.nasa].
Then there’s a PWA Pokedex [pokedex], and an Air Horner [airhorner]. Both
are incredibly useful in my day-to-day life.
There are now more than 22 Hacker News Readers as PWAs. Addy Osmani
outlines the project.
Here are some progressive web apps running as native macOS apps.
Case Studies
Flipkart tripled time-on-site with a transition to a PWA [sites.google].
Trivago has also seen success, with more than half a million people adding
their PWA to their homescreen, leading to increased engagement
[thinkwithgoogle].
A PWA from Scratch: Starting Points 11
Chapter
A PWA from
Scratch: Starting
Points 3
12 A Deep Dive into Progressive Web Apps
In this chapter, we’ll make inroads into getting our hands dirty and making a PWA
ourselves, starting from scratch.
A repo with the bare minimum you need to create a PWA [github/madnessxd].
That’s a good little selection of starting points for you. But what if you already
have a site or web app you love, and you just want to transform it into a PWA?
We’ll take a look at your options in this case next up.
Migrating to a PWA 13
Chapter
Migrating to a
PWA
4
14 A Deep Dive into Progressive Web Apps
Even a simple Jekyll blog can become a PWA. Here’s how [ jonpitcherella].
Speaking of blogs, here’s a case-study from a dev who transformed their blog
to a PWA [alexjover].
Or just let PWABuilder [pwabuilder] do all the hard work for you. This app
takes data from your site and uses it to create a PWA so you don’t have to.
(But you really should do it yourself. You’ll enjoy it!)
OK, either from scratch, or by retrofitting an existing property, you now have a
toehold in the PWA world. We’re now going to spend some time going over the
four main pillars of a PWA: Service Workers, a Web Manifest, an App Shell, and
HTTPS. Next up: service workers.
Introducing Service Workers 15
Chapter
Introducing
Service Workers
5
16 A Deep Dive into Progressive Web Apps
Now we’ll take a look at how service workers enable some of the most “appy”
parts of a Progressive Web App. They’re scripts that your browser runs in the
background, thereby making it possible for you to enable things like offline
experiences, periodic background sync and push notifications. Let’s take a look!
Not directly related, but another example of the power of service workers:
build dynamic responsive images with service workers and WebP [deanhume].
How to set up push notifications for your PWA (and also just your web app of
any sort) [sitepoint].
Next up, we’ll look at Web Manifest—the thing that’ll help us make our dreams of
PWAs manifest.
Web App Manifest 17
Chapter
Web App
Manifest
6
18 A Deep Dive into Progressive Web Apps
Chapter
Now we’ll take a look at the app shell model. This model, paired with service
workers, offers a way to cut down on loading times using a minimal HTML, CSS
and JavaScript “shell” to power your PWA’s interface. Since this is cached offline,
your users are only loading content-related code when they visit and move
around your app. Warning: a lot of Google-produced content here!
Mozilla takes a look at the structure of PWAs, mostly focusing on the app shell
model [developer.mozilla].
And another demo, this time using the iFixit API to display hardware guides
[github/googlechromelabs].
Chapter
HTTPS
8
22 A Deep Dive into Progressive Web Apps
This will be a quick one: PWAs should be on SSL, as should every site you
develop. In this chapter, we’ll outline a few helpful links to get you there. HTTPS
will also come up when we circle back to look at PWA performance later.
One dev does the work you’re about to do, offering a real-world take on
moving to HTTPS [medium/progressive-web-apps].
Chapter
PWAs with
React
9
24 A Deep Dive into Progressive Web Apps
React devs: this one’s for you, with content covering how to build a React PWA,
and the tools to make it a little easier for you.
Addy Osmani shares lessons from his experience turning React apps into
PWAs [medium/@addyosmani].
React PWA [reactpwa] offers an easy way to get started with your first PWA.
Chapter
PWAs with
Angular
10
26 A Deep Dive into Progressive Web Apps
Now we turn to Angular, another popular front-end framework that can build
SPAs and, therefore, PWAs. You’d expect Angular to do pretty well when it
comes to PWAs, given Angular is a Google-led framework, and the PWA concept
is similarly led by the company. Here are some starting points.
This talk from Google I/O 2016 [youtube/firebase] may feel a little old-hat at
this point in the Deep Dive, but it might be nice to have the concept of PWAs
reintroduced from an Angular point of view.
Chapter
And now we turn to the last of the big three front-end frameworks: Vue.
If you want to build a PWA and you also like Vue, this tutorial is for you [telerik].
Build a PWA with Vue, webpack and Material Design [blog.sicara]. I think that
probably covers all the decent, popular web tech, right?
And another guide to doing so, with a comics app built using Firebase
[blog.bitsrc].
Vue CLI, the official CLI for quickly scaffolding SPAs, actually has a pwa plugin
[github/vuejs], so here’s a guide to using it to add PWA support to a Vue app
[naturaily].
Progressive Web App Performance 29
Chapter
Progressive Web
App
Performance 12
30 A Deep Dive into Progressive Web Apps
Now we have a PWA, our attention turns to making it perform well. Let’s take a
dive into the options.
Tools to optimize your PWA’s CSS and boost its performance [sitepoint].
How Pinterest got their PWA performance working very nicely indeed
[medium/dev-channel].
Chapter
UX and Design
for PWAs
13
32 A Deep Dive into Progressive Web Apps
Now, let’s look at the methods and tools for making sure your PWA looks and
feels good to the user. We’re making apps, so we need to hold the UX to that
standard. Let’s dive in!
Some easy ways to ensure your progressive web app has good UX
[techbeacon].
The process of, and lessons learned in, designing a PWA [medium/dev-
channel].
Advice for creating amazing user experiences on the Web with PWAs
[sitepoint].
Getting It Out: Deployment and Distribution 33
Chapter
Getting It Out:
Deployment and
Distribution 14
34 A Deep Dive into Progressive Web Apps
And for the final chapter of our PWA Deep Dive, we’ll look at getting your PWA
out into the world, something that is as easy or as complicated as you like, given
your options for publishing the thing into app stores and the like. In some cases,
devs have decided to put their PWA onto an app store, arguing that that’s where
the users are. This obviously also comes with some drawbacks.
What one dev learned building a PWA and publishing it in three app stores
[debuggerdotbreak]. Primarily: the app store part is hard and expensive.
Or you could leverage the power of Chromium and Electron and bring your
PWA to the desktop [medium/dailyjs].