book

Building Progressive Web Apps

by Tal Ater

September 2017

Intermediate to advanced

285 pages

7h 11m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who This Book Is ForWhat This Book CoversConventions Used in This BookUsing Code ExamplesO’Reilly SafariHow to Contact UsAcknowledgments
The Web Strikes BackThe Current Mobile LandscapeThe Progressive Web App AdvantageThe Tab, the Web, and the Service Worker
Setting Up Our Sample ProjectWelcome to the Gotham Imperial HotelGetting to Know the CodeThe Current Offline ExperienceCreating Your First Service WorkerWhat Is Progressive Enhancement?HTTPS and Service WorkersFetching Content from the WebCapturing Offline RequestsCreating HTML ResponsesUnderstanding Service Worker ScopeSummary
What CacheStorage Is and, More Importantly, What It Is NotDeciding When to CacheStoring Requests in CacheStorageRetrieving Requests from CacheStorageCaching in Our Sample AppMatching the Right Response to Each RequestHTTP Caching and HTTP HeadersSummary
The Service Worker LifecycleThe Service Worker Lifetime and the Importance of waitUntilUpdating a Service WorkerWhy We Need to Manage the CacheCache Management and Clearing Old CachesReusing Cached ResponsesConfiguring the Server to Serve the Right Caching HeadersDeveloper ToolsThe ConsoleHave You Tried Turning It Off and On Again?Inspect CacheStorage and IndexedDBNetwork Throttling and Simulating Offline ConditionsLighthouseSummary
What Is Offline-First?Common Caching PatternsMix and Match: Creating New PatternsPlanning Our Caching StrategyImplementing Our Caching StrategyApplication Shell ArchitectureIncluding Content in the Initial RenderImplementing App ShellAchievement UnlockedSummary
What Is IndexedDBUsing IndexedDBOpening a Database ConnectionDatabase Versioning/Modifying an Object StoreAdding Data to an Object StoreReading Data from an Object StoreIndexedDB Version ManagementReading Objects With a CursorCreating IndicesReading Data Using an IndexLimiting a Cursor’s RangeSetting a Cursor’s DirectionUpdating Objects in an Object StoreDeleting Objects from an Object StoreDeleting All Objects from an Object StoreHandling Bubbling IndexedDB ErrorsIndexedDB for SQL NinjasIndexedDB in PracticeThe Database That Was PromisedIndexedDB HousekeepingUsing IndexedDB in the Service WorkerThe IndexedDB EcosystemPouchDBlocalForageDexie.jsIndexedDB PromisedSummary
How Background Sync WorksThe SyncManagerAccessing SyncManagerRegistering EventsSync EventsEvent TagsGetting a List of Registered Sync EventsLast ChancesPassing Data to the Sync EventMaintaining an Action Queue in IndexedDBMaintaining a Queue of Requests in IndexedDBPassing Data in the Sync Event TagAdding Background Sync to Our AppSummary
Window to Service Worker MessagingService Worker to All Open Windows MessagingService Worker to Specific Window MessagingKeeping the Line of Communication Open with a MessageChannelCommunicating Between WindowsPosting Messages from a Sync Event to the PageSummary
Installable Web AppsHow Browsers Decide When to Show an App Install BannerAnatomy of a Web App ManifestBackwards, Sideways, and Future CompatibilitySummary

Life of a Pushed NotificationThe Notification APIThe Push APIPush + NotificationCreating NotificationsRequesting Permission for NotificationsShowing NotificationsAdding Notification Support to Gotham Imperial HotelSubscribing a User to Push EventsGenerating Public and Private VAPID KeysGenerating a GCM keyCreating a New SubscriptionSubscribing Gotham Imperial Hotel Users to Push MessagesSending Push Events from the ServerListening for Push Events and Showing NotificationsInterrogating NotificationsSummary
Grace and TrustCommunicating State from the Service WorkerCommunicating with Progressive UI KITTCommon Messages in Progressive Web AppsCaching CompletePage CachedAction Failed But Will Complete When User Regains ConnectivityNotifications EnabledChoosing the Right WordsAlways Be ClosingProgressive Web App DesignYour Design Should Reflect Changing ConditionsYour Design Should Fit Its EnvironmentYour Design Should Adapt to the Particularities of Each MediumYour Design Should Instill Confidence and Inform the UserYour Design Should Help the User and Your Business Achieve Their GoalsTaking Charge of the Install PromptMeasuring and Aiming for Performance with RAILSummary
Accepting Payments with the Payment Request APIUser Management with the Credential Management APIReal-Time Graphics with WebGLFuturistic APIs with Speech RecognitionVirtual Reality in the Browser with WebVREasy Sharing to and from Your AppSlick Media Playing UIsThe Next Great Era
Template LiteralsArrow FunctionsObject DestructuringMore ES2015

Overview

Move over native apps. New progressive web apps have capabilities that will soon make you obsolete. With this hands-on guide, web developers and business execs will learn how—and why—to develop web apps that take advantage of features that have so far been exclusive to native apps. Features that include fast load times, push notifications, offline access, homescreen shortcuts, and an entirely app-like experience.

By leveraging the latest browser APIs, progressive web apps combine all of the benefits of native apps, while avoiding their issues. Throughout the book, author Tal Ater shows you how to improve a simple website for the fictional Gotham Imperial Hotel into a modern progressive web app. Plus:

Understand how service workers work, and use them to create sites that launch in an instant, regardless of the user’s internet connection
Create full-screen web apps that launch from the phone's homescreen just like native apps
Re-engage users with push notifications, even days after they have left your site
Embrace offline-first and build web apps that gracefully handle loss of connectivity
Explore new UX opportunities and challenges presented by progressive web apps