Progressive web application development by example : develop fast, reliable, and engaging user experiences for the web

Description

Title Page Copyright and Credits Dedication Packt Upsell Contributors Table of Contents Preface Chapter 1: 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  Chapter 2: 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 Chapter 3: 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 Chapter 4: 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 Chapter 5: 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 Chapter 6: 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 Chapter 7: 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 Chapter 8: 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 Chapter 9: 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 Chapter 10: 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 Index