Progressive Web Application Development by Example电子书

Title Page

Copyright and Credits

Progressive Web Application Development by Example

Dedication

Packt Upsell

Why subscribe?

PacktPub.com

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Get in touch

Reviews

Introduction to Progressive Web Apps

Why we needed a new way to build websites

Real-world PWA examples

What are PWAs?

Peak app

PWA features

PWA advantages

PWA technical requirements

The application shell

2048

The source code

The application's code structure

Adding node modules to the project

Adding a manifest

Adding a service worker

Summary

Creating a Home Screen Experience with a Web Manifest

Why add to homescreen is important

Making your PWA iOS web app capable

The application title is set with another META tag

The web manifest specification

Referencing the web manifest file

Web manifest properties

Controlling the launch style

Apple Safari web manifest support

Validating web manifest files

The Chrome improved add to homescreen experience

The add to homescreen experience

The Chrome add to homescreen experience

Your add to homescreen responsibilities

Disabling the homescreen prompt

Tracking homescreen installs

Polyfiling the homescreen experience on iOS and other legacy browsers

Should you polyfil response caching?

Microsoft Edge and Internet Explorer

Benefits await without Polyfils

Testing the add to homescreen experience in Chrome

Summary

Making Your Website Secure

SSL history

How does TLS work?

What is HTTPS?

HTTPS advantages

Identity

Confidentiality

Integrity

Browsers are going out of their way to indicate HTTPS to the customer

Search engine optimization

No longer cost-prohibitive

Modern APIs require HTTPS

HTTPS can be significantly faster than HTTP

HTTPS adoption

Different types of SSL certificate

Domain-validated certificates

Organization-validated certificates

Extended-validation SSL certificates

How to obtain and install an SSL certificate

Migrating a website to HTTPS

Auditing the site for any HTTP:// link references

Auditing content and data

Updating social media links

Configure server auto-redirect of HTTP to HTTPS

Add and verify all domain protocol combinations in webmaster tools

Defining a canonical HTTPS link

Updating Google analytics to default to HTTPS

Updating the sitemap and RSS feed to HTTPS

Updating your robots.txt file

Summary

Service Workers – Notification, Synchronization, and Our Podcast App

The service worker thread

Service worker browser support

Microsoft Edge service worker support

Safari service worker support

Is the service worker ready?

Polyfilling older browsers

The podcast application

The Fetch API

Introducing Fetch

Using the Fetch API

The response object

Service worker fetch

Polyfilling fetch in legacy browsers

Creating a service worker shell

The service worker life cycle

Caching

Using push notifications

Implementing push notifications

Setting up push notifications

Managing the user's subscription

Handling push notifications

Unsubscribing from push notifications

Handling a push subscription change

Background sync

Summary

The Service Worker Life Cycle

Registering a service worker

Service worker clients

The service worker registration object

Updating a service worker

Service worker scope

Service worker updates

Service worker events

Summary

Mastering the Cache API - Managing Web Assets in a Podcast Application

Using the Fetch API

Request object

Handling cross-origin requests

Managing request credentials

Controlling how a response is cached

Headers object

Adding Headers

Accessing Header values

Protected Headers

Body mixin

Response object

Response properties

Verifying a successful response

Caching responses

Caches object

caches.open

caches.match

caches.has()

caches.delete()

caches.keys()

The Cache object

cache.match()

cache.matchAll

Cache add and addAll

cache.put

Deleting Cached items

cache.keys

Summary

Service Worker Caching Patterns

How the service worker cache works

Service worker events

Caching patterns and strategies

Precaching

Installing as a dependency

Installing not as a dependency

On activate

Real-time caching

On user interaction

On network response

Stale while revalidating

On push notification

On background sync

Cache only

Network only

Cache falling back to network

Cache and network race

Network falling back to cache

Generic fallback

Service worker templating

Summary

Applying Advanced Service Worker Cache Strategies

What is PWA tickets?

Reviewing the PWA ticket application

Using the JSON server for an API

Making a database and the API

Using faker

Generating QR codes

Rendering the website

The PWA ticket rendering architecture and logic

The PWA ticket JavaScript architecture

The PWA ticket service worker architecture

The ResponseManager

Using the request method to determine the caching strategy

Matching routes with caching strategies

Cache invalidation strategies

Unique hash names and long time-to-live values

Maximum items in a cache

Purging stale responses using time to live

Executing ResponseManager

The Invalidation Manager

maxItems strategy

The time-to-live invalidation strategy

Using a real-time asset manifest

How much should you cache?

Summary

Optimizing for Performance

The importance of WPO

Reducing image payload size

The cost of CSS and JavaScript

Proper test devices and emulation

Testing poor conditions using developer tools

Performing performance and PWA testing with Lighthouse

Using WebPageTest to benchmark performance

Key performance indicators

Time to first byte

The PRPL pattern

Implementing push with browser hints and the service worker cache

Using the app shell model and service worker to render the initial route

Service worker pre-caching important routes

Lazy-loading non-critical and dynamic routes

The RAIL pattern

How JavaScript clogs the pipeline

Why 14 KB is the magic number

Inline critical CSS

Minifying scripts with uglify

Using feature detection to conditionally load JavaScript polyfils

Lazy loading images

Summary

Service Worker Tools

Using PWABuilder to scaffold your PWA

Generating a valid web manifest file

Building a service worker

Downloading your site's PWA assets

Scaffolded PWA images

Running PWABuilder locally

Auditing web pages using Lighthouse

Running Lighthouse from the Chrome Developer Tools

Running Lighthouse as a command-line utility

Lighthouse and headless testing

Running Lighthouse in a Node script

Continuous build with Lighthouse

Auditing web pages with Sonar

Using the Sonar CLI

Sonar components

Configurations

Connectors

Formatters

Parsers

Rules

Automating site audits with the Sonar node module

Making complex service workers with workbox

Installing workbox

Workbox structure

Service worker setup

Pre-caching with Workbox

Dynamic routes with Workbox

Caching strategies

Workbox cache invalidation

Adding background sync functionality

Using Google Analytics, even when the user is offline

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think