Building Progressive Web Apps

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 [e-mail].

O’Reilly Safari

Note

Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals.

Members have access to thousands of books, training videos, Learning Paths, interactive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and Course Technology, among others.

For more information, please visit http://oreilly.com/safari.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

• O’Reilly Media, Inc.
• 1005 Gravenstein Highway North
• Sebastopol, CA 95472
• 800-998-9938 (in the United States or Canada)
• 707-829-0515 (international or local)
• 707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/building-progressive-web-apps.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

First I would like to thank Alex Russell and Jake Archibald. When I stumbled onto their talk at Google I/O 2014, I had no idea what any of the things covered in this book even meant. Their talk, and writing this book, helped me learn a bit more.

I would also like to thank the amazing people building progressive web apps in the real world, especially those who shared their experiences in this book. Thank you Joey Marburger, Ritesh Kumar, Rahul Yadav, Nicolas Gallagher, Chris Nguyen, and Jeremy Toeman.

Thanks to the team at O’Reilly that has helped make this book possible, including Ally MacDonald, Jeff Bleiel, Sonia Saruba, Colleen Cole, David Futato, Rebecca Demarest, Heather Scherer, Ellen Troutman, Amanda Kersey, and Karen Montgomery and her hoopoe.

Thanks also goes out to the teams at Google, Opera, Mozilla, and Microsoft that have helped make the book and the tech it covers a reality, and the talented developers who have helped me make sense of it. Thank you Jeffrey Posnick, Addy Osmani, Matt Gaunt, and Paul Kinlan.

Thanks to Alex Feyerke and the Hoodie team for their pioneering work and writing about offline-first which has inspired much of what you will read about in this book.

The hardest part about writing a book like this is the uncertainty that comes from working on something for over a year with almost no external feedback. I would like to thank all the people who have taken the time to send me their feedback on the book while I was writing it. Thank you James Stanley, Patrick Conant, Fabio Rotondo, Neville Franks, and Florian Semrau.

Finally, I would like to thank the people who have helped make sure what I wrote actually made sense by doing a full technical review of this book. Thank you Andreas Bovens, Kenneth Rohde Christiansen, Patrick Kettner, and Thomas Steiner.