Building Progressive Web Apps

453 Pages·2013·9.73 MB·English

by  Tal Ater

Building Progressive Web Apps
Bringing the Power of Native to the Browser
Tal Ater
Building Progressive Web Apps
by Tal Ater Copyright © 2017 Tal Ater. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North,
Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional
use. Online editions are also available for most titles (http://oreilly.com/safari).
For more information, contact our corporate/institutional sales department: 800-
998-9938 or [email protected].
Editors: Allyson MacDonald and Jeff Bleiel
Production Editor: Colleen Cole
Copyeditor: Sonia Saruba
Proofreader: Amanda Kersey
Indexer: Ellen Troutman
Interior Designer: David Futato
Cover Designer: Karen Montgomery
Illustrator: Rebecca Demarest
September 2017: First Edition
Revision History for the First Edition
2017-08-31: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781491961650 for release
details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Building
Progressive Web Apps, the cover image, and related trade dress are trademarks
of O’Reilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the
information and instructions contained in this work are accurate, the publisher
and the author disclaim all responsibility for errors or omissions, including
without limitation responsibility for damages resulting from the use of or
reliance on this work. Use of the information and instructions contained in this
work is at your own risk. If any code samples or other technology this work
contains or describes is subject to open source licenses or the intellectual
property rights of others, it is your responsibility to ensure that your use thereof
complies with such licenses and/or rights.
978-1-49196165-0
[LSI]
Dedication
To my two favorite ladies and their vacation hats.
Preface
Progressive web apps are an exciting new form of modern web apps. These apps
leverage the latest web capabilities to deliver an experience that combines the
unique features of native mobile apps with the advantages of the web.
This book will help you gain a thorough, practical understanding of modern
progressive web app development through hands-on experience.
You will learn how to build web apps that take advantage of features that have
so far been the exclusive domain of native apps. You will be able to reach out to
your users with push notifications, grab prime real estate on the user’s
homescreen, speed up your site significantly, and provide your users with a fully
functional app, regardless of their connection.
The book incorporates a real-world, hands-on approach to learning by taking an
existing website and chapter by chapter transforming it into a modern
progressive web app.
Who This Book Is For
This book is first and foremost intended for developers. If you are looking to
leverage your existing web development skills and learn how to build modern
progressive web apps, this is the book for you.
The book assumes you have at least a basic understanding of web development
using HTML and JavaScript. It does not assume any familiarity with relatively
newer additions to JavaScript such as ECMAScript 2015, promises, or
ECMAScript 2017’s async functions. If you are already familiar with these
modern language constructs, you should be able to skip (or quickly skim) the
notes that explain them.
For people in non-technical roles, this book can help provide a familiarity and a
general understanding of the capabilities of modern progressive web apps. Many
chapters include case studies collected through interviews conducted with teams
behind some of the world’s most influential sites, including Twitter, The
Washington Post, Housing.com, and Lyft. Whether you are in a managerial
position, a designer, a product manager, or any other position that involves
making decisions about native or web apps, an understanding of what is possible
today will help you be more effective at your job.
What This Book Covers
As you read through this book, you will take a simple website for the fictional
Gotham Imperial Hotel and enhance it with service workers so that it loads
almost instantaneously (even on the slowest connections), making sure all of its
features are available even when your users are completely offline (including
seeing their reservations and even making new ones). You will learn how to let
users add an icon to launch your progressive web app from their phone’s
homescreen. Finally, to complete the native app-like experience, you will add
push notifications allowing you to reach out and reengage your users even after
they have left your site.
This book also explores some of the important considerations when developing
progressive web apps. We will focus on gaining a practical understanding of
these concepts in a way that will help you be a more effective developer. Among
other things, we will look at helpful developer tools, security considerations, and
understanding the service worker lifecycle.
While most of the book focuses on hands-on learning, two chapters in particular
(Chapters 5 and 11) will get you thinking about the new capabilities offered by
progressive web apps as more than just a new set of tricks to apply to your apps.
Chapter 5 explores the philosophy of offline-first web apps, an approach to
building modern web apps that treat a loss of connectivity not as an error, but as
an eventuality we can plan for and handle with grace.
Chapter 11 explores some of the new UI challenges and opportunities presented
by progressive web apps. As such a game changer, progressive web apps defy
the expectations users have from the web. Some of these challenges include
reinforcing the user’s trust that her data won’t be lost when she is offline,
informing her that the content she is seeing may be a few hours old if she is
offline, and letting her know she can trust the app to send her a notification
whenever anything important changes. When handled properly, these can offer
great opportunities to increase users’ trust in your app, improve conversions, and
gain a permanent place on their phones.
We end the book with a look at some of the upcoming technologies and browser
APIs that will allow us to take our progressive web apps even further.
Conventions Used in This Book
The following typographical conventions are used in this book: Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program
elements such as variable or function names, databases, data types,
environment variables, statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
Constant width italic
Shows text that should be replaced with user-supplied values or by values
determined by context.
TIP
This element signifies a case study of progressive web apps in the wild.
NOTE
This element signifies a general note.
Important
This element indicates a note looking at the same issue from another perspective.
WARNING
This element indicates a warning or caution.
Using Code Examples
Supplemental material (code examples, exercises, etc.) is available for download
at https://github.com/TalAter/gotham_imperial_hotel.
This book is here to help you get your job done. In general, if example code is
offered with this book, you may use it in your programs and documentation. You
do not need to contact us for permission unless you’re reproducing a significant
portion of the code. For example, writing a program that uses several chunks of
code from this book does not require permission. Selling or distributing a CD-
ROM of examples from O’Reilly books does require permission. Answering a
question by citing this book and quoting example code does not require
permission. Incorporating a significant amount of example code from this book
into your product’s documentation does require permission.
We appreciate, but do not require, attribution. An attribution usually includes the
title, author, publisher, and ISBN. For example: “Building Progressive Web
Apps by Tal Ater (O’Reilly). Copyright 2017 Tal Ater, 978-149-196165-0.”
If you feel your use of code examples falls outside fair use or the permission
given above, feel free to contact the author at [email protected].