Progressive Web Application Development by Example
Chris Love更新时间:2021-08-05 10:34:05
最新章节:Leave a review - let other readers know what you think封面
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
更新时间:2021-08-05 10:34:05