Table of Contents
Progressive Web Applications and Offline
Introduction
00:00:00 - 00:01:13
Introduction
Mike North introduces Progressive Web Apps (PWA) and Offline course. -
https://github.com/mike-north/pwa-fundamentalsDefining PWA
00:01:14 - 00:09:50
Defining PWA
After defining a PWA, Mike reviews their characteristics by comparing and contrasting them to traditional web applications.
Project: Frontend Grocer
00:09:51 - 00:13:32
Project: Frontend Grocer
Mike 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.
Measuring Apps
Quantifying Web App Success
00:13:33 - 00:15:40
Quantifying Web App Success
Reviewing essential testing metrics such as First Paint, Time to Interactive, and Time for Dynamic Data for measuring modern web applications.
Chrome DevTools
00:15:41 - 00:23:28
Chrome DevTools
Mike reviews how to use Devtools specifically for testing for PWA metrics. -
https://developers.google.com/web/tools/chrome-devtools/Lighthouse & WebPageTest
00:23:29 - 00:27:31
Lighthouse & WebPageTest
Introducing Lighthouse and WebPageTest, Mike reviews tools runs several tests related to an application's performance, metadata, security, and much more. -
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=enChallenge 0: Baseline
00:27:32 - 00:30:47
Challenge 0: Baseline
In this challenge, students set up the course's example site and then measure the baseline readings.
Challenge 0: Solution
00:30:48 - 00:44:06
Challenge 0: Solution
Mike walks through the solution to Challenge 0.
Mobile Simulation
DevTools Devices Mode
00:44:07 - 00:47:25
DevTools Devices Mode
After giving a tip on Challenge 0 for Windows development, Mike introduces testing applications on mobile simulators through Chrome DevTools.
iOS Simulator
00:47:26 - 00:50:46
iOS Simulator
Since Mobile Safari is different from Desktop Safari, Mike reviews how to test web applications for iOS devices.
Android Simulator
00:50:47 - 00:54:12
Android Simulator
Since the set up is more involved than other emulators, Mike walks through the steps on how to install the Android Emulator.
Progressive Metadata
Viewport Metatag
00:54:13 - 00:57:28
Viewport Metatag
Through adding meta tags to web applications, Mike shows how to define web applications to appear more like a native app.
Fullscreen Metatags
00:57:29 - 00:59:20
Fullscreen Metatags
Mike 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.json
00:59:21 - 01:03:15
manifest.json
Mike 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 Icons
01:03:16 - 01:05:27
Home Screen Icons
Instead 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.org
01:05:28 - 01:07:01
schema.org
Mike reviews schema.org metadata, which is a standard set of schemas for structured data markup that is understood by search engine spiders.
Challenge 1: Metadata
01:07:02 - 01:10:17
Challenge 1: Metadata
In this challenge, students add progressive metadata in the course application.
Challenge 1: Solution
01:10:18 - 01:28:50
Challenge 1: Solution
Mike walks through the solution to Challenge 1 and tests the improvements through the Lighthouse Chrome extension
Enhanced Server-side Rendering
Performance Timeline
01:28:51 - 01:32:41
Performance Timeline
By using the performance timeline, Mike reviews the factors that go into loading an application with client-side rendering
Enhanced Client-side Rendering
01:32:42 - 01:37:31
Enhanced Client-side Rendering
Seeking 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 Rendering
01:37:32 - 01:40:43
Server-side Rendering
Mike reviews server-side rendering for a single-page application.
Challenge 2: Enhanced Client-side Rendering
01:40:44 - 01:43:19
Challenge 2: Enhanced Client-side Rendering
In this challenge, students integrate an enhanced client-side techniques in the course demo application.
Challenge 2: Solution
01:43:20 - 01:50:07
Challenge 2: Solution
Mike walks through the solution to Challenge 2.
Promises
Reviewing Promises
01:50:08 - 01:57:53
Reviewing Promises
Since 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 & Creation
01:57:54 - 02:08:04
Chaining & Creation
Continuing to review promises, Steve explores the chaining and creating of promises.
JavaScript Workers
Introducing Web Workers
02:08:05 - 02:14:52
Introducing Web Workers
Mike 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 Workers
02:14:53 - 02:16:29
Dedicated vs. Shared Workers
Mike illustrates the differences between dedicated and shared workers.
Limitations & Features
02:16:30 - 02:20:01
Limitations & Features
To avoid potential problems coding workers such as deadlocks, Mike reviews the limitations of web workers.
Terminating a Worker
02:20:02 - 02:25:55
Terminating a Worker
Mike illustrates how and when to terminate a worker.
Challenge 3: Web Workers
02:25:56 - 02:30:55
Challenge 3: Web Workers
In this challenge, students create a call for a QR code reader into a web worker.
Challenge 3: Solution
02:30:56 - 02:47:41
Challenge 3: Solution
Mike walks through the solution to Challenge 3 with Steve's help.
Async Data
Reviewing Async Methods
02:47:42 - 02:51:35
Reviewing Async Methods
After reviews web technologies on the client side to create asynchronous web applications.
Fetch API
02:51:36 - 02:57:30
Fetch API
Steve introduces Fetch API, a modern interface for accessing and manipulating resources that has a more flexible feature set than XMLHttpRequest.
Fetch Requests
02:57:31 - 03:00:33
Fetch Requests
Steve and Mike review how to create a basic Fetch request.
Fetch & CORS
03:00:34 - 03:11:49
Fetch & CORS
After 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 1
03:11:50 - 03:16:06
Challenge 4: Using Fetch, Part 1
In this challenge, students fix the store cart, so it persists to course's example API.
Challenge 5: Using Fetch, Part 2
03:16:07 - 03:16:54
Challenge 5: Using Fetch, Part 2
In 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: Solutions
03:16:55 - 03:30:59
Challenges 4 & 5: Solutions
Steve walks through the solution to Challenges 4 and 5 with Steve's help.
Service Worker
Introducing Service Worker
03:31:00 - 03:38:07
Introducing Service Worker
Steve introduces Service Worker, which is a crucial technology in constructing WPAs.
Service Worker Features
03:38:08 - 03:54:01
Service Worker Features
Steve 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 Worker
03:54:02 - 03:57:57
Challenge 6: Simple Service Worker
In this challenge, students implement a service worker.
Challenge 6: Solution
03:57:58 - 04:22:02
Challenge 6: Solution
Steve walks through the solution to Challenge 6 and answers student questions with Mike's help.
Service Worker Review
04:22:03 - 04:29:52
Service Worker Review
Steve reviews features and coding structures of Service Workers.
Intercepting Network Requests
04:29:53 - 04:35:28
Intercepting Network Requests
Steve 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 Demo
04:35:29 - 04:39:41
Service Worker Demo
Steve demonstrates using conditional logic with a Service Worker that can intercept network request. -
http://intercepting-fetch.glitch.me/Cache API
Introducing Cache API
04:39:42 - 04:53:56
Introducing Cache API
Steve introduces Cache API, a utility for fine-grain control over caching assets from inside of a service worker.
Challenge 7: Fallback Image
04:53:57 - 04:57:32
Challenge 7: Fallback Image
In this challenge, students implement a fallback image in the event the application encounters a response status for image requests.
Challenge 7: Solution
04:57:33 - 05:20:19
Challenge 7: Solution
Steve walks through the solution to Challenge 7.
Introducing Caching Strategies
05:20:20 - 05:26:16
Introducing Caching Strategies
Mike reviews Cache API strategies including Cache-Only, Network-Only, and Cache with Network Backup.
Precache Caching
05:26:17 - 05:35:16
Precache Caching
Mike breaks down precaching strategy and reviews a demo of how precaching works.
Network with Cache Backup
05:35:17 - 05:42:37
Network with Cache Backup
Mike demonstrates a caching strategy that first tries to use the network before falling back to the cache.
Cache, Update, and Refresh
05:42:38 - 05:48:05
Cache, Update, and Refresh
After 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 Precache
05:48:06 - 05:52:33
Challenge 8: Integrating Precache
In this challenge, students implement precaching in the course project application.
Challenge 8: Solution
05:52:34 - 06:34:39
Challenge 8: Solution
After 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 Data
06:34:40 - 06:49:54
Challenge 9: Caching Dynamic Data
In 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: Solution
06:49:55 - 07:17:02
Challenge 9: Solution
Mike walks through the solution to Challenge 9.
Challenge 10: SPA Treatment of index.html
07:17:03 - 07:23:33
Challenge 10: SPA Treatment of index.html
In this challenge, students incoporate preacaching approaches to an index.html of a SPA.
Challenge 10: Solution
07:23:34 - 07:35:31
Challenge 10: Solution
Mike walks through the solution to Challenge 10.
IndexedDB
Introducing IndexedDB
07:35:32 - 07:40:57
Introducing IndexedDB
Mike introduces indexedDB (Indexed Database API), which is a low-level API for client-side storage of structured data, including files and blobs.
IndexedDB API
07:40:58 - 07:50:06
IndexedDB API
After reviewing the IndexedDB API including opening or creating the database, migrating, transactions, and more, Mike examines current browser support for IndexedDB.
IndexedDB & Promises
07:50:07 - 07:52:02
IndexedDB & Promises
Mike reviews IDB, an open source library that replaces the IDBRequest objects with promises. -
https://github.com/jakearchibald/idbChallenge 11: IndexedDB
07:52:03 - 07:57:28
Challenge 11: IndexedDB
In 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: Solution
07:57:29 - 08:20:48
Challenge 11: Solution
Mike walks through the solution to Challenge 11.
Web Push
Push API and Notification API
08:20:49 - 08:28:10
Push API and Notification API
Mike reviews Web Push, which uses the Push API and Notification APIs to send timely updates to site visitors.
VAPID for Web Push
08:28:11 - 08:30:40
VAPID for Web Push
After 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 PushSubscription
08:30:41 - 08:35:30
Structure of PushSubscription
Mikes shows showing PushSubscription code and underscores the importance of using a library for sending notifications. Mike takes questions from students. -
https://github.com/web-push-libsChallenge 12: Web Push
08:35:31 - 08:39:44
Challenge 12: Web Push
In this challenge, students generate a web push subscription.
Challenge 12: Solution
08:39:45 - 08:55:02
Challenge 12: Solution
Mike walks through the solution to Challenge 12 and takes questions from students.
Notifications
Introducing Notifications
08:55:03 - 09:04:24
Introducing Notifications
Steve reviews Notifications including how to approach implementing notifications including options for the user's visual and behavioral interactions.
Challenge 13: Notifications
09:04:25 - 09:05:08
Challenge 13: Notifications
In this challenge, students implement notifications in course example application.
Challenge 13: Solution
09:05:09 - 09:12:07
Challenge 13: Solution
Steve walks through the solution to Challenge 13.
Background Sync
Introducing Background Sync
09:12:08 - 09:20:25
Introducing Background Sync
Steve introduces background sync, which is a web API that defers actions until the application has access to a stable Internet connection.
Background Sync Strategies
09:20:26 - 09:23:20
Background Sync Strategies
Steve reviews best practices and techniques for working with background sync.
Background Sync Demo
09:23:21 - 09:30:05
Background Sync Demo
Using a simple To Do list application, Steve demonstrates how a service worker is used to implement background sync.
Problems with App Cache
09:30:06 - 09:34:52
Problems with App Cache
To 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.
HTTP/2
Introducing HTTP/2
09:34:53 - 09:49:11
Introducing HTTP/2
Mike reviews the features and browser support of HTTP/2, a revision of the HTTP network protocol.
Patterns for PWAs
Application Shell Pattern
09:49:12 - 09:52:57
Application Shell Pattern
Mike 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 Pattern
09:52:58 - 09:55:22
PRPL Pattern
Mike 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.
Wrapping Up
Reviewing PWA Technologies
09:55:23 - 09:58:32
Reviewing PWA Technologies
Mike reviews PWA technologies and how they work on a user's first and return visit to an application.
Final Measurements
09:58:33 - 10:03:01
Final Measurements
Now updated for PWA support, Mike re-evaluates the metrics of the course demo application with the Lighthouse Chrome extension.
