Learning Progressive Web Apps

Description

Use Service Workers to Turbocharge Your Web Apps “You have made an excellent decision in picking up this book. If I was just starting on my learning path to mastery of Progressive Web Apps, there are not many folks I would trust more to get me there than John.” ―Simon MacDonald, Developer Advocate, Adobe Software developers have two options for the apps they build: native apps targeting a specific device or web apps that run on any device. Building native apps is challenging, especially when your app targets multiple system types―i.e., desktop computers, smartphones, televisions―because user experience varies dramatically across devices. Service Workers―a relatively new technology―make it easier for web apps to bridge the gap between native and web capabilities. In Learning Progressive Web Apps, author John M. Wargo demonstrates how to use Service Workers to enhance the capabilities of a web app to create Progressive Web Apps (PWA). He focuses on the technologies that enable PWAs and how to use those technologies to enhance your web apps to deliver a more native-like experience. • Build web apps a user can easily install on their local system and that work offline or on low-quality networks • Utilize caching strategies that give you control over which app resources are cached and when • Deliver background processing in a web application • Implement push notifications that enable an app to easily engage with users or trigger action from a remote server Throughout the book, Wargo introduces each core concept and illustrates the implementation of each capability through several complete, operational examples. You’ll start with simple web apps, then incrementally expand and extend them with state-of-the-art features. All example source code is available on GitHub, and additional resources are available on the author’s companion site, learningpwa.com. Cover Half Title Title Page Copyright Page Dedication Contents Foreword Preface Acknowledgments About the Author 1 Introducing Progressive Web Apps First, a Little Bit of History PWAs Are Making a Progressive Web App PWA Market Impact PWAs and App Stores Wrap-Up 2 Web App Manifest Files Save to Home Screen Making a Web App Installable Anatomy of a Web App Manifest Setting the App Name Setting App Icons Configuring Display Mode Setting the Installed App’s Start URL Setting App Options Additional Options Controlling the Installation Experience Preparing to Code Node.JS Git Client Visual Studio Code App Installation in Action Adding a Service Worker Adding a Web Manifest File Running the App Enhancing the Installation Process Troubleshooting Manifest Generation and More Wrap-Up 3 Service Workers PWA News Introducing Service Workers Preparing to Code Prerequisites Navigating the App Source Configuring the Server API Starting the Server Registering a Service Worker Service Worker Scope The Service Worker Lifecycle Forcing Activation Claiming Additional Browser Tabs Observing a Service Worker Change Forcing a Service Worker Update Service Worker ready Promise Wrap-Up 4 Resource Caching Service Worker Cache Interface Preparing to Code Caching Application Resources Cache Management Return a Data Object on Error Adding an Offline Page Implementing Additional Caching Strategies Cache-Only Network First, Then Cache Network First, Update Cache Wrap-Up 5 Going the Rest of the Way Offline with Background Sync Introducing Background Sync Offline Data Sync Choosing a Sync Database Create Database Create Store Add Data Delete Objects Iterating through Data Using Cursors Preparing to Code Enhancing the PWA News Application Preparing the Service Worker for Background Sync Updating the Web App to Use Background Sync Finishing the Service Worker Dealing with Last Chances Wrap-Up 6 Push Notifications Introducing Push Notifications Remote Notification Architecture Preparing to Code Generating Encryption Keys Validating Notification Support Checking Notification Permission Getting Permission for Notifications Local Notifications Notification Options Subscribing to Notifications Unsubscribing from Notifications Remote Notifications Dealing with Subscription Expiration Sending Notifications to Push Services Wrap-Up 7 Passing Data between Service Workers and Web Applications Preparing to Code Send Data from a Web App to a Service Worker Send Data from a Service Worker to a Web App Two-Way Communication Using MessageChannel Wrap-Up 8 Assessment, Automation, and Deployment Assessing PWA Quality Using Lighthouse Preparing to Code Using the Lighthouse Plugin Using the Lighthouse Tools in the Browser Using the Lighthouse Node Module PWABuilder Using the PWABuilder UI Creating Deployable Apps Using the PWABuilder CLI PWABuilder and Visual Studio PWAs and the Microsoft Store Wrap-Up 9 Automating Service Workers with Google Workbox Introducing Workbox Generating a Precaching Service Worker Add Precaching to an Existing Service Worker Controlling Cache Strategies Wrap-Up Index A B C D E F G H I J K L M N O P Q R S T U V W X Y Z