Progressive Web Applications and Offline
This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Table of Contents
Progressive Web Applications and Offline
IntroductionMike North introduces Progressive Web Apps (PWA) and Offline course.
Defining PWAAfter defining a PWA, Mike reviews their characteristics by comparing and contrasting them to traditional web applications.
Project: Frontend GrocerMike introduces the example project, Frontend Grocer, which is a traditional one-page application. Throughout the course, students will add features to convert the application to a PWA.
Quantifying Web App SuccessReviewing essential testing metrics such as First Paint, Time to Interactive, and Time for Dynamic Data for measuring modern web applications.
Chrome DevToolsMike reviews how to use Devtools specifically for testing for PWA metrics.
Lighthouse & WebPageTestIntroducing Lighthouse and WebPageTest, Mike reviews tools runs several tests related to an application's performance, metadata, security, and much more.
Challenge 0: BaselineIn this challenge, students set up the course's example site and then measure the baseline readings.
Challenge 0: SolutionMike walks through the solution to Challenge 0.
DevTools Devices ModeAfter giving a tip on Challenge 0 for Windows development, Mike introduces testing applications on mobile simulators through Chrome DevTools.
iOS SimulatorSince Mobile Safari is different from Desktop Safari, Mike reviews how to test web applications for iOS devices.
Android SimulatorSince the set up is more involved than other emulators, Mike walks through the steps on how to install the Android Emulator.
Viewport MetatagThrough adding meta tags to web applications, Mike shows how to define web applications to appear more like a native app.
Fullscreen MetatagsMike reviews Apple metatags to set browser chrome settings such as launching a bookmarked application to fullscreen, setting the color of the status bar, and set a unique title for
manifest.jsonMike introduces the manifest.json file, which is a JSON file that resides in the root directory of your web app and provides information about an application such as name, author, icon or icons, description, and more.
Home Screen IconsInstead of having a minified screenshot of an application as a home screen icon, Mike shows how to set custom images as smart device tablet.
schema.orgMike reviews schema.org metadata, which is a standard set of schemas for structured data markup that is understood by search engine spiders.
Challenge 1: MetadataIn this challenge, students add progressive metadata in the course application.
Challenge 1: SolutionMike walks through the solution to Challenge 1 and tests the improvements through the Lighthouse Chrome extension
Enhanced Server-side Rendering
Performance TimelineBy using the performance timeline, Mike reviews the factors that go into loading an application with client-side rendering
Enhanced Client-side RenderingSeeking the middle ground between server-side and client-side rendering, Mike demonstrates a method called "enhanced client-side rendering" which radically speeds up page rendering.
Server-side RenderingMike reviews server-side rendering for a single-page application.
Challenge 2: Enhanced Client-side RenderingIn this challenge, students integrate an enhanced client-side techniques in the course demo application.
Challenge 2: SolutionMike walks through the solution to Challenge 2.
Reviewing PromisesSince promises are used heavily throughout PWAs, Steve Kinney reviews and defines a promise, which is an object representing the eventual completion or failure of an asynchronous operation.
Chaining & CreationContinuing to review promises, Steve explores the chaining and creating of promises.
Introducing Web WorkersMike introduces web workers, which is a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the UI.
Dedicated vs. Shared WorkersMike illustrates the differences between dedicated and shared workers.
Limitations & FeaturesTo avoid potential problems coding workers such as deadlocks, Mike reviews the limitations of web workers.
Terminating a WorkerMike illustrates how and when to terminate a worker.
Challenge 3: Web WorkersIn this challenge, students create a call for a QR code reader into a web worker.
Challenge 3: SolutionMike walks through the solution to Challenge 3 with Steve's help.
Reviewing Async MethodsAfter reviews web technologies on the client side to create asynchronous web applications.
Fetch APISteve introduces Fetch API, a modern interface for accessing and manipulating resources that has a more flexible feature set than XMLHttpRequest.
Fetch RequestsSteve and Mike review how to create a basic Fetch request.
Fetch & CORSAfter reviewing Cross-Origin Resource Sharing (CORS), a system for restricted resources on a web page to be requested from another domain outside, Steve demonstrates how to handle external resources through Fetch.
Challenge 4: Using Fetch, Part 1In this challenge, students fix the store cart, so it persists to course's example API.
Challenge 5: Using Fetch, Part 2In this challenge, students code the cart so that when a user checks out the contents of their cart are persisted so than an order is created.
Challenges 4 & 5: SolutionsSteve walks through the solution to Challenges 4 and 5 with Steve's help.
Introducing Service WorkerSteve introduces Service Worker, which is a crucial technology in constructing WPAs.
Service Worker FeaturesSteve illustrates the features of Service Workers, which can run in the background, allow for checking network availability, updating assets, access to push notifications, and more.
Challenge 6: Simple Service WorkerIn this challenge, students implement a service worker.
Challenge 6: SolutionSteve walks through the solution to Challenge 6 and answers student questions with Mike's help.
Service Worker ReviewSteve reviews features and coding structures of Service Workers.
Intercepting Network RequestsSteve discusses Service Worker's ability for an application to intercept any network requests and respond back with custom responses. Steve also takes questions from students.
Service Worker DemoSteve demonstrates using conditional logic with a Service Worker that can intercept network request.
Introducing Cache APISteve introduces Cache API, a utility for fine-grain control over caching assets from inside of a service worker.
Challenge 7: Fallback ImageIn this challenge, students implement a fallback image in the event the application encounters a response status for image requests.
Challenge 7: SolutionSteve walks through the solution to Challenge 7.
Introducing Caching StrategiesMike reviews Cache API strategies including Cache-Only, Network-Only, and Cache with Network Backup.
Precache CachingMike breaks down precaching strategy and reviews a demo of how precaching works.
Network with Cache BackupMike demonstrates a caching strategy that first tries to use the network before falling back to the cache.
Cache, Update, and RefreshAfter reviewing Cache, Update, and Refresh Caching Strategy, which is when an app updates an asset when it detects a new version on the network, Mike discusses best practices for approaching caching strategies.
Challenge 8: Integrating PrecacheIn this challenge, students implement precaching in the course project application.
Challenge 8: SolutionAfter reviewing CORS related to credentialed requests and wildcard requests, Mike walks through the solution to Challenge 8 with Steve's help.
Challenge 9: Caching Dynamic DataIn this challenge, students implement a fetech event handler that uses a cache fallback strategy for all GET requests that are not precached in advanced.
Challenge 9: SolutionMike walks through the solution to Challenge 9.
Challenge 10: SPA Treatment of index.htmlIn this challenge, students incoporate preacaching approaches to an index.html of a SPA.
Challenge 10: SolutionMike walks through the solution to Challenge 10.
Introducing IndexedDBMike introduces indexedDB (Indexed Database API), which is a low-level API for client-side storage of structured data, including files and blobs.
IndexedDB APIAfter reviewing the IndexedDB API including opening or creating the database, migrating, transactions, and more, Mike examines current browser support for IndexedDB.
IndexedDB & PromisesMike reviews IDB, an open source library that replaces the IDBRequest objects with promises.
Challenge 11: IndexedDBIn this challenge, students populate an IndexedDB store with grocery store items in the install handler and then utilize IndedexedDB to provide better contextual fallback images.
Challenge 11: SolutionMike walks through the solution to Challenge 11.
Push API and Notification APIMike reviews Web Push, which uses the Push API and Notification APIs to send timely updates to site visitors.
VAPID for Web PushAfter introducing Voluntary Application Server Identification (VAPID) for Web Push, which helps distinguish legitimate traffic from bad, Mike demonstrates how to generate VAPID keys.
Structure of PushSubscriptionMikes shows showing PushSubscription code and underscores the importance of using a library for sending notifications. Mike takes questions from students.
Challenge 12: Web PushIn this challenge, students generate a web push subscription.
Challenge 12: SolutionMike walks through the solution to Challenge 12 and takes questions from students.
Introducing NotificationsSteve reviews Notifications including how to approach implementing notifications including options for the user's visual and behavioral interactions.
Challenge 13: NotificationsIn this challenge, students implement notifications in course example application.
Challenge 13: SolutionSteve walks through the solution to Challenge 13.
Introducing Background SyncSteve introduces background sync, which is a web API that defers actions until the application has access to a stable Internet connection.
Background Sync StrategiesSteve reviews best practices and techniques for working with background sync.
Background Sync DemoUsing a simple To Do list application, Steve demonstrates how a service worker is used to implement background sync.
Problems with App CacheTo work around Safari's lack of support of Service Worker reviews how an alternative with App Cache might be used and the problems associated with this approach.
Introducing HTTP/2Mike reviews the features and browser support of HTTP/2, a revision of the HTTP network protocol.
Patterns for PWAs
Application Shell PatternMike starts reviewing common PWA patterns by first examining the Application Shell Pattern, which focuses on the core components necessary for an app rather than data.
PRPL PatternMike introduces the Push Render Pre-Cache Lazy-load (PRPL) pattern for PWAs. In this pattern, a developer would Push critical resources for the initial URL route, Render initial route, Pre-cache remaining routes, and Lazy-load and then create remaining routes on demand.