Progressive Web Application Development by Example

Progressive Web Application Development by Example

by Chris Love
Released July 2018
Publisher(s): Packt Publishing
ISBN: 9781787125421

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.

Start your free trial

Book description

Leverage the full potential of the web to make your web sites better than native applications for every platform.

Key Features

  • Explore different models and patterns required to develop progressive web applications
  • Create applications requiring shorter runtime for attracting more users
  • Study different projects to understand the fundamentals of progressive web applications

Book Description

Are you a developer that wants to create truly cross-platform user experiences with a minimal footprint, free of store restrictions and features customers want? Then you need to get to grips with Progressive Web Applications (PWAs), a perfect amalgamation of web and mobile applications with a blazing-fast response time.

Progressive Web Application Development by Example helps you explore concepts of the PWA development by enabling you to develop three projects, starting with a 2048 game. In this game, you will review parts of a web manifest file and understand how a browser uses properties to define the home screen experience. You will then move on to learning how to develop and use a podcast client and be introduced to service workers. The application will demonstrate how service workers are registered and updated. In addition to this, you will review a caching API so that you have a firm understanding of how to use the cache within a service worker, and you'll discover core caching strategies and how to code them within a service worker.

Finally, you will study how to build a tickets application, wherein you'll apply advanced service worker techniques, such as cache invalidation. Also, you'll learn about tools you can use to validate your applications and scaffold them for quality and consistency. By the end of the book, you will have walked through browser developer tools, node modules, and online tools for creating high-quality PWAs.

What you will learn

  • Explore the core principles of PWAs
  • Study the three main technical requirements of PWAs
  • Discover enhancing requirements to make PWAs transcend native apps and traditional websites
  • Create and install PWAs on common websites with a given HTTPS as the core requirement
  • Get acquainted with the service worker life cycle
  • Define service worker caching patterns
  • Apply caching strategies to three different website scenarios
  • Implement best practices for web performance

Who this book is for

Progressive Web Application Development by Example is for you if you're a web developer or front-end designer who wants to ensure improved user experiences. If you are an application developer with knowledge of HTML, CSS, and JavaScript, this book will help you enhance your skills in order to develop progressive web applications, the future of app development.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Progressive Web Application Development by Example
  3. Dedication
  4. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  5. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  7. Introduction to Progressive Web Apps
    1. Why we needed a new way to build websites
    2. Real-world PWA examples
    3. What are PWAs?
      1. Peak app
      2. PWA features
    4. PWA advantages
    5. PWA technical requirements
      1. The application shell
    6. 2048
      1. The source code
      2. The application's code structure
      3. Adding node modules to the project
      4. Adding a manifest
      5. Adding a service worker
    7. Summary 
  8. Creating a Home Screen Experience with a Web Manifest
    1. Why add to homescreen is important
    2. Making your PWA iOS web app capable
      1. The application title is set with another META tag
    3. The web manifest specification
      1. Referencing the web manifest file
      2. Web manifest properties
      3. Controlling the launch style
      4. Apple Safari web manifest support
    4. Validating web manifest files
    5. The Chrome improved add to homescreen experience
    6. The add to homescreen experience
      1. The Chrome add to homescreen experience
    7. Your add to homescreen responsibilities
      1. Disabling the homescreen prompt
    8. Tracking homescreen installs
    9. Polyfiling the homescreen experience on iOS and other legacy browsers
      1. Should you polyfil response caching?
    10. Microsoft Edge and Internet Explorer
    11. Benefits await without Polyfils
    12. Testing the add to homescreen experience in Chrome
    13. Summary
  9. Making Your Website Secure
    1. SSL history
    2. How does TLS work?
    3. What is HTTPS?
      1. HTTPS advantages
        1. Identity
        2. Confidentiality
        3. Integrity
      2. Browsers are going out of their way to indicate HTTPS to the customer
      3. Search engine optimization
      4. No longer cost-prohibitive
      5. Modern APIs require HTTPS
      6. HTTPS can be significantly faster than HTTP
      7. HTTPS adoption
    4. Different types of SSL certificate
      1. Domain-validated certificates
      2. Organization-validated certificates
      3. Extended-validation SSL certificates
    5. How to obtain and install an SSL certificate
    6. Migrating a website to HTTPS
    7. Auditing the site for any HTTP:// link references
      1. Auditing content and data
      2. Updating social media links
    8. Configure server auto-redirect of HTTP to HTTPS
      1. Add and verify all domain protocol combinations in webmaster tools
      2. Defining a canonical HTTPS link
      3. Updating Google analytics to default to HTTPS
      4. Updating the sitemap and RSS feed to HTTPS
      5. Updating your robots.txt file
    9. Summary
  10. Service Workers – Notification, Synchronization, and Our Podcast App
    1. The service worker thread
    2. Service worker browser support
      1. Microsoft Edge service worker support
      2. Safari service worker support
      3. Is the service worker ready?
        1. Polyfilling older browsers
    3. The podcast application
    4. The Fetch API
      1. Introducing Fetch
      2. Using the Fetch API
      3. The response object
      4. Service worker fetch
      5. Polyfilling fetch in legacy browsers
    5. Creating a service worker shell
    6. The service worker life cycle
    7. Caching
    8. Using push notifications
      1. Implementing push notifications
      2. Setting up push notifications
      3. Managing the user's subscription
      4. Handling push notifications
      5. Unsubscribing from push notifications
      6. Handling a push subscription change
    9. Background sync
    10. Summary
  11. The Service Worker Life Cycle
    1. Registering a service worker
    2. Service worker clients
      1. The service worker registration object
    3. Updating a service worker
    4. Service worker scope
    5. Service worker updates
    6. Service worker events
    7. Summary
  12. Mastering the Cache API - Managing Web Assets in a Podcast Application
    1. Using the Fetch API
      1. Request object
        1. Handling cross-origin requests
        2. Managing request credentials
        3. Controlling how a response is cached
      2. Headers object
        1. Adding Headers
        2. Accessing Header values
        3. Protected Headers
      3. Body mixin
      4. Response object
        1. Response properties
        2. Verifying a successful response
    2. Caching responses
    3. Caches object
      1. caches.open
      2. caches.match
      3. caches.has()
      4. caches.delete()
      5. caches.keys()
    4. The Cache object
      1. cache.match()
      2. cache.matchAll
      3. Cache add and addAll
      4. cache.put
      5. Deleting Cached items
      6. cache.keys
    5. Summary
  13. Service Worker Caching Patterns
    1. How the service worker cache works
    2. Service worker events
    3. Caching patterns and strategies
      1. Precaching
        1. Installing as a dependency
        2. Installing not as a dependency
      2. On activate
      3. Real-time caching
      4. On user interaction
      5. On network response
      6. Stale while revalidating
      7. On push notification
      8. On background sync
      9. Cache only
      10. Network only
      11. Cache falling back to network
      12. Cache and network race
      13. Network falling back to cache
      14. Generic fallback
    4. Service worker templating
    5. Summary
  14. Applying Advanced Service Worker Cache Strategies
    1. What is PWA tickets?
      1. Reviewing the PWA ticket application
    2. Using the JSON server for an API
      1. Making a database and the API
      2. Using faker
      3. Generating QR codes
      4. Rendering the website
      5. The PWA ticket rendering architecture and logic
    3. The PWA ticket JavaScript architecture
    4. The PWA ticket service worker architecture
      1. The ResponseManager
    5. Using the request method to determine the caching strategy
    6. Matching routes with caching strategies
    7. Cache invalidation strategies
      1. Unique hash names and long time-to-live values
      2. Maximum items in a cache
      3. Purging stale responses using time to live
      4. Executing ResponseManager
      5. The Invalidation Manager
        1. maxItems strategy
        2. The time-to-live invalidation strategy
      6. Using a real-time asset manifest
      7. How much should you cache?
    8. Summary
  15. Optimizing for Performance
    1. The importance of WPO
    2. Reducing image payload size
    3. The cost of CSS and JavaScript
      1. Proper test devices and emulation
      2. Testing poor conditions using developer tools
      3. Performing performance and PWA testing with Lighthouse
      4. Using WebPageTest to benchmark performance
    4. Key performance indicators
      1. Time to first byte
    5. The PRPL pattern
      1. Implementing push with browser hints and the service worker cache
      2. Using the app shell model and service worker to render the initial route
      3. Service worker pre-caching important routes
      4. Lazy-loading non-critical and dynamic routes
    6. The RAIL pattern
      1. How JavaScript clogs the pipeline
      2. Why 14 KB is the magic number
    7. Inline critical CSS
    8. Minifying scripts with uglify
    9. Using feature detection to conditionally load JavaScript polyfils
    10. Lazy loading images
    11. Summary
  16. Service Worker Tools
    1. Using PWABuilder to scaffold your PWA
      1. Generating a valid web manifest file
      2. Building a service worker
      3. Downloading your site's PWA assets
      4. Scaffolded PWA images
      5. Running PWABuilder locally
    2. Auditing web pages using Lighthouse
      1. Running Lighthouse from the Chrome Developer Tools
      2. Running Lighthouse as a command-line utility
      3. Lighthouse and headless testing
      4. Running Lighthouse in a Node script
      5. Continuous build with Lighthouse
    3. Auditing web pages with Sonar
      1. Using the Sonar CLI
      2. Sonar components
        1. Configurations
        2. Connectors
        3. Formatters
        4. Parsers
        5. Rules
      3. Automating site audits with the Sonar node module
    4. Making complex service workers with workbox
      1. Installing workbox
      2. Workbox structure
      3. Service worker setup
      4. Pre-caching with Workbox
      5. Dynamic routes with Workbox
      6. Caching strategies
      7. Workbox cache invalidation
      8. Adding background sync functionality
      9. Using Google Analytics, even when the user is offline
    5. Summary
  17. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Progressive Web Application Development by Example
  • Author(s): Chris Love
  • Release date: July 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781787125421