You are previewing Service Worker Development Cookbook.
O'Reilly logo
Service Worker Development Cookbook

Book Description

Build highly available and performant native web applications that seamlessly integrate with third-party APIs

About This Book

  • Get straight into the action with step-by-step recipes that show you how to put Service Workers to work

  • Find out what Service Workers can do for your app, then do it!

  • Get the first in-depth look at this important new feature for web developers

  • Who This Book Is For

    Web developers, mobile application developers, and software engineers with any level of knowledge can use this book. You should be familiar with JavaScript and HTML.

    What You Will Learn

  • Display a custom offline page

  • Cache critical resources for offline use

  • Implement offline Google Analytics

  • Get network responses offline

  • Implement push notifications

  • Improve performance of your app

  • In Detail

    It would be nice to have web apps that work offline and send push notifications. This is now possible with Service Workers, which can add native-like functionality to your web apps without requiring a download.

    This book will get your mobile and web apps functioning without Internet connectivity, improve performance and network interaction in order to increase the level of availability, and show you how to build performant applications that seamlessly integrate with third-party APIs.

    We’ll show you how to add Service Worker functionality to web apps and sites, access offline content through basic and advanced techniques, and build powerful interactive system notifications. We’ll also teach you about cache functionality and assets to provide immediate load even over narrow connections. We conclude by giving you various tips to improve app performance, including the background sync technique.

    By the end of this book, you’ll know build high performing and faster web and mobile applications with Service Workers.

    Style and approach

    This book provides lots of task-oriented, practical, and inspiring ways to put Service Workers to work. Step-by-step instructions will guide you through every task.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Service Worker Development Cookbook
      1. Table of Contents
      2. Service Worker Development Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewer
      6. www.PacktPub.com
        1. eBooks, discount offers, and more
          1. Why subscribe?
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Conventions
        4. Reader feedback
        5. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Learning Service Worker Basics
        1. Introduction
          1. Service workers
          2. Promises
            1. Promise.resolve(value)
            2. Promise.reject(reason)
        2. Setting up service workers
          1. Getting ready
          2. How to do it...
            1. Chrome
            2. Firefox
        3. Setting up SSL for Windows
          1. Getting ready
          2. How to do it...
        4. Setting up SSL for Mac
          1. Getting ready
          2. How to do it...
        5. Setting up GitHub pages for SSL
          1. Getting ready
          2. How to do it...
        6. Registering a service worker
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Known issues
              1. The ERR_FILE_EXISTS error message
              2. Stale console messages
        7. Registering a service worker in detail
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Install
            2. Activate
            3. Fetch
            4. Terminate
          5. See also
        8. Debugging
          1. Getting ready
          2. How to do it...
          3. There's more...
        9. Providing a stale version on error
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        10. Creating mock responses
          1. Getting ready
          2. How to do it...
          3. How it works...
        11. Handling request timeouts
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
      9. 2. Working with Resource Files
        1. Introduction
        2. Displaying a custom offline page
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Loading images offline
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Handling responsive images
              1. The srcset attribute
                1. Device-pixel ratio
              2. The sizes attribute
              3. The picture element
          5. See also
        4. Loading CSS offline
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Loading fonts offline
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        6. Implementing multiple fetch handlers
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        7. Fetching remote resources
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
            1. No credentials by default
            2. Non-CORS fail by default
          5. See also
      10. 3. Accessing Offline Content
        1. Introduction
        2. Caching critical resources for offline use
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Showing cached content first
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Implementing a cache and network race
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Using window.caches
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Implementing stale-while-revalidate
          1. Getting ready
          2. How to do it...
          3. How it works...
      11. 4. Accessing Offline Content with Advanced Techniques
        1. Introduction
        2. Templating
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Implementing read-through caching
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Allowing offline Google Analytics
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Allowing offline user interaction
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Implementing selective caching
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      12. 5. Reaching Beyond the Offline Cache
        1. Introduction
        2. Getting network responses offline
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Caching content from ZIP
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Selecting the best content provider (load balancer)
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Redirecting a request
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Setting request headers
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Making a service worker act like a remote server
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Making a service worker act as a dependency injector
          1. Getting ready
          2. How to do it...
          3. How it works...
        9. Forcing immediate control
          1. Getting ready
          2. How to do it...
          3. How it works...
        10. Implementing fallback responses
          1. Getting ready
          2. How to do it...
          3. How it works...
        11. Deferring offline requests
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      13. 6. Working with Advanced Libraries
        1. Introduction
        2. Working with global APIs
          1. Getting ready
          2. How to do it...
          3. How it works...
            1. Cache
            2. caches
            3. fetch
            4. getAll
        3. Implementing a circuit breaker
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Implementing a dead letter queue
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Logging API analytics
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Working with Google Analytics
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      14. 7. Fetching Resources
        1. Introduction
        2. Fetching remote resources
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Fetching with FetchEvent
          1. Getting ready
          2. How to do it...
          3. How it works...
            1. Cache.addAll()
            2. ExtendableEvent.waitUntil()
            3. FetchEvent.respondWith()
        4. Fetching a JSON file during service worker installation
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Proxying
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Prefetching
          1. Getting ready
          2. How to do it...
          3. How it works...
      15. 8. Experimenting with Web Push
        1. Introduction
        2. Implementing a simple push notification
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Showing rich notifications
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Using the notification tag
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Implementing push clients
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Subscribing to push notifications
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Managing push notification quotas
          1. Getting ready
          2. How to do it...
          3. How it works...
      16. 9. Looking at General Usage
        1. Introduction
        2. Taking immediate control of the page
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Working with slow responses
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Relaying messages
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Using a service worker as a proxy middleware
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Using a service worker with a live flowchart
          1. Getting ready
          2. How to do it...
          3. How it works...
      17. 10. Improving Performance
        1. Introduction
        2. Performing network requests from a cache
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Performing network requests from a network
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Testing waitUntil
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Implementing background sync
          1. Getting ready
          2. How to do it...
          3. How it works...
        6. Sending forward requests
          1. Getting ready
          2. How to do it...
          3. How it works...
        7. Avoiding model fetching and render times
          1. Getting ready
          2. How to do it...
          3. How it works...
      18. Index