Building Progressive Web Apps

Building Progressive Web Apps

by Tal Ater
Released September 2017
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491961650

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

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

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. Who This Book Is For
    2. What This Book Covers
    3. Conventions Used in This Book
    4. Using Code Examples
    5. O’Reilly Safari
    6. How to Contact Us
    7. Acknowledgments
  2. 1. Introducing Progressive Web Apps
    1. The Web Strikes Back
    2. The Current Mobile Landscape
    3. The Progressive Web App Advantage
    4. The Tab, the Web, and the Service Worker
  3. 2. Your First Service Worker
    1. Setting Up Our Sample Project
    2. Welcome to the Gotham Imperial Hotel
    3. Getting to Know the Code
    4. The Current Offline Experience
    5. Creating Your First Service Worker
    6. What Is Progressive Enhancement?
    7. HTTPS and Service Workers
    8. Fetching Content from the Web
    9. Capturing Offline Requests
    10. Creating HTML Responses
    11. Understanding Service Worker Scope
    12. Summary
  4. 3. The CacheStorage API
    1. What CacheStorage Is and, More Importantly, What It Is Not
    2. Deciding When to Cache
    3. Storing Requests in CacheStorage
    4. Retrieving Requests from CacheStorage
    5. Caching in Our Sample App
    6. Matching the Right Response to Each Request
    7. HTTP Caching and HTTP Headers
    8. Summary
  5. 4. Service Worker Lifecycle and Cache Management
    1. The Service Worker Lifecycle
    2. The Service Worker Lifetime and the Importance of waitUntil
    3. Updating a Service Worker
    4. Why We Need to Manage the Cache
    5. Cache Management and Clearing Old Caches
    6. Reusing Cached Responses
    7. Configuring the Server to Serve the Right Caching Headers
    8. Developer Tools
      1. The Console
      2. Have You Tried Turning It Off and On Again?
      3. Inspect CacheStorage and IndexedDB
      4. Network Throttling and Simulating Offline Conditions
      5. Lighthouse
    9. Summary
  6. 5. Embracing Offline-First
    1. What Is Offline-First?
    2. Common Caching Patterns
    3. Mix and Match: Creating New Patterns
    4. Planning Our Caching Strategy
    5. Implementing Our Caching Strategy
    6. Application Shell Architecture
      1. Including Content in the Initial Render
    7. Implementing App Shell
    8. Achievement Unlocked
    9. Summary
  7. 6. Storing Data Locally with IndexedDB
    1. What Is IndexedDB
    2. Using IndexedDB
      1. Opening a Database Connection
      2. Database Versioning/Modifying an Object Store
      3. Adding Data to an Object Store
      4. Reading Data from an Object Store
      5. IndexedDB Version Management
      6. Reading Objects With a Cursor
      7. Creating Indices
      8. Reading Data Using an Index
      9. Limiting a Cursor’s Range
      10. Setting a Cursor’s Direction
      11. Updating Objects in an Object Store
      12. Deleting Objects from an Object Store
      13. Deleting All Objects from an Object Store
      14. Handling Bubbling IndexedDB Errors
    3. IndexedDB for SQL Ninjas
    4. IndexedDB in Practice
    5. The Database That Was Promised
    6. IndexedDB Housekeeping
    7. Using IndexedDB in the Service Worker
    8. The IndexedDB Ecosystem
      1. PouchDB
      2. localForage
      3. Dexie.js
      4. IndexedDB Promised
    9. Summary
  8. 7. Ensuring Offline Functionality with Background Sync
    1. How Background Sync Works
    2. The SyncManager
      1. Accessing SyncManager
      2. Registering Events
      3. Sync Events
      4. Event Tags
      5. Getting a List of Registered Sync Events
      6. Last Chances
    3. Passing Data to the Sync Event
      1. Maintaining an Action Queue in IndexedDB
      2. Maintaining a Queue of Requests in IndexedDB
      3. Passing Data in the Sync Event Tag
    4. Adding Background Sync to Our App
    5. Summary
  9. 8. Service Worker to Page Communication with Post Messages
    1. Window to Service Worker Messaging
    2. Service Worker to All Open Windows Messaging
    3. Service Worker to Specific Window Messaging
    4. Keeping the Line of Communication Open with a MessageChannel
    5. Communicating Between Windows
    6. Posting Messages from a Sync Event to the Page
    7. Summary
  10. 9. Grabbing Homescreen Real Estate with Installable Web Apps
    1. Installable Web Apps
    2. How Browsers Decide When to Show an App Install Banner
    3. Anatomy of a Web App Manifest
    4. Backwards, Sideways, and Future Compatibility
    5. Summary
  11. 10. Reach Out with Push Notifications
    1. Life of a Pushed Notification
      1. The Notification API
      2. The Push API
      3. Push + Notification
    2. Creating Notifications
      1. Requesting Permission for Notifications
      2. Showing Notifications
      3. Adding Notification Support to Gotham Imperial Hotel
    3. Subscribing a User to Push Events
      1. Generating Public and Private VAPID Keys
      2. Generating a GCM key
      3. Creating a New Subscription
      4. Subscribing Gotham Imperial Hotel Users to Push Messages
    4. Sending Push Events from the Server
    5. Listening for Push Events and Showing Notifications
      1. Interrogating Notifications
    6. Summary
  12. 11. Progressive Web App UX
    1. Grace and Trust
    2. Communicating State from the Service Worker
    3. Communicating with Progressive UI KITT
    4. Common Messages in Progressive Web Apps
      1. Caching Complete
      2. Page Cached
      3. Action Failed But Will Complete When User Regains Connectivity
      4. Notifications Enabled
    5. Choosing the Right Words
    6. Always Be Closing
    7. Progressive Web App Design
      1. Your Design Should Reflect Changing Conditions
      2. Your Design Should Fit Its Environment
      3. Your Design Should Adapt to the Particularities of Each Medium
      4. Your Design Should Instill Confidence and Inform the User
      5. Your Design Should Help the User and Your Business Achieve Their Goals
    8. Taking Charge of the Install Prompt
    9. Measuring and Aiming for Performance with RAIL
    10. Summary
  13. 12. What’s Next for PWAs
    1. Accepting Payments with the Payment Request API
    2. User Management with the Credential Management API
    3. Real-Time Graphics with WebGL
    4. Futuristic APIs with Speech Recognition
    5. Virtual Reality in the Browser with WebVR
    6. Easy Sharing to and from Your App
    7. Slick Media Playing UIs
    8. The Next Great Era
  14. A. Service Workers: A Great Opportunity to Adopt ES2015
    1. Template Literals
    2. Arrow Functions
    3. Object Destructuring
    4. More ES2015
  15. B. Full-Page Interstitials or: How I Learned to Hate the Door Slam
  16. C. CORS Versus NO-CORS
  17. Index

Product information

  • Title: Building Progressive Web Apps
  • Author(s): Tal Ater
  • Release date: September 2017
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491961650