Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Progressive Web Applications From Beginner to Expert
Course Introduction
About the Course (1:41)
Fast Furniture – The Reference PWA (5:50)
Using Visual Studio Code (13:47)
Installing Node (11:38)
The Fast Furniture Source Code (17:45)
A localhost Web Server Using Node http-server (9:11)
Links to Resources
Progressive Web App Basics
A New Level of Quality (4:25)
Fast Reliable Engaging (6:36)
Web vs App Smack Down (20:38)
PWA Expert Quotes (7:10)
Progressive Web App Success Stories (10:43)
Progressive Web App Success Stories (text)
Web Sites Must Work Offline (4:28)
Technical Upgrades and Requirements (9:52)
3 Progressive Web Application Requirements
Progressive Web Application Upgrade
Progressive Web Application Basics Quiz
what is a pwa (10:48)
what is a pwa 720 (35:55)
what is a pwa part 1 720 (3:18)
Who Supports Progressive Web Apps?
Who Supports Progressive Web Apps (0:16)
Browsers That Support Progressive Web Apps (3:09)
Progressive Web Apps Support Statistics (2:22)
Over 1 Billion Users Have Progressive Web Application Devices (2:12)
Apple, Safari and Progressive Web Apps (7:57)
HTTPS Facts You Need to Know
How HTTPS Works (12:32)
How TLS Works
History of SSL
Reasons Why to Use HTTPS (15:44)
5 Reasons You Should Implement HTTPS Today
HTTPS Browser Warnings (7:55)
3 Types of HTTPS Certificates (7:54)
Why HTTPS is Faster Than HTTP (9:03)
How to Properly Implement HTTPS (18:37)
HTTPS Migration Checklist
HTTP/2 Basics (18:58)
The Web Manifest
What is the Web Manifest (10:01)
Web Manifest Identity Properties - Names (2:23)
Web Manifest Properties - Description (0:35)
Web Manifest Properties - Icons (6:06)
What Icon SIzes Should Your PWA Have? (10:37)
How PWABuilder Can Automate PWA Image Creation (2:13)
Reviewing the Full PWA Iconset in the Developer Tools (3:31)
Web Manifest Properties - Theme Colors (2:05)
Web Manifest Properties - Display (3:19)
Web Manifest Properties - Start Url (3:28)
Web Manifest Properties - Scope (2:42)
Web Manifest Properties - Related Applications (2:43)
Web Manifest Properties - Mime/Content Type (1:29)
Reviewing the Fast Furniture Web Manifest File (4:40)
Testing the Add to Homescreen Prompt (2:16)
Before Add to Homescreen Prompt Code (4:20)
The App Shell
What is an App Shell (10:44)
App Shell Architecture (10:56)
App Shell Critical Path Assets (4:58)
Performance Impact (8:41)
When Should You Use An App Shell (5:30)
Advanced App Shell Concepts (3:26)
Fetch Primer
What is Fetch (6:16)
Compare XHR to Fetch Code (3:58)
Basic Fetch Example (7:43)
Response Object (2:06)
Headers Object (2:58)
Body Object (3:03)
Request Object (6:33)
Response Types (3:19)
Request Modes & CORS (3:34)
Simple Fetch Example Retrieving JSON (11:17)
Creating Custom Request Objects (0:51)
Verify A Successful Response (0:56)
Using Fetch to Retrieve JSON (11:17)
Using Fetch to Retrieve an Image (14:43)
Example Fetching an Image or Binary File (14:43)
Fetch Review (1:50)
Introduction to Service Workers
What is a Service Worker (12:10)
What is a Service Worker- Part 1
What is a Service Worker- Part 2
How Html5 Fell Short (15:06)
Service Worker Capabilities (13:15)
Service Workers Change The Game (39:59)
How Does a Service Worker Work?
Service Worker Browser Support (6:47)
Service Worker Browser Support
Progressive Web Application Checklist
intro to service workers 720 (32:03)
The Service Worker Life Cycle
Intro to Service Worker Life Cycle (1:45)
The Service Worker Life Cycle
Service Worker Life Cycle Concepts (9:37)
Service Worker Life Cycle Walk Through Register, Install and Activate (13:35)
Service Worker Life Cycle Update Walk Through (20:42)
Service Worker Installation Event (7:31)
Service Worker Life Cycle Activate (5:06)
Update and skipWaiting (10:20)
service worker life cycle 720 (18:50)
Service Worker Automatic Update Walk Through (7:13)
Service Worker Scope (5:28)
Service Worker Clients (3:32)
Unregister a Service Worker (3:03)
Replace Buggy Service Worker (4:21)
How to Uninstall a Service Worker
How to Uninstall a Service Worker
Service Worker Life Cycle Pro Tips (11:47)
intro to sw life cycle install and activate audio 720 (5:28)
intro to sw life cycle 720 (31:12)
service worker life cycle basic install and update demonstration 720 (19:50)
intro to sw life cycle code walk through 720 (12:39)
Learn the Service Worker Cache API
Network Connectivity Conditions (1:27)
Cache API Concepts (17:25)
Caches Object (13:46)
Cache Keys and Update (19:05)
Cache AddAll Method (7:10)
Cache Keys and Update (19:05)
Service Worker Fetch Event (16:01)
Intro to Service Worker Caching (10:34)
Advantages of Service Worker Caching
Intro to Service Worker Caching Code Walk Through (6:47)
Advantages of Service Worker Caching
Creating a Custom Response in the Service Worker Fetch Event Handler (6:17)
service worker install and activate events 720 (6:18)
Service Worker Caching Strategies
Cache Scenarios Setup (5:46)
Cache Scenarios On Install as Dependency (7:22)
Cache Scenarios On Install as Dependency Walk Through (10:15)
Cache Scenarios on Install Not as Dependency (2:57)
Cache Scenarios on Install Not as Dependency Walk Through (6:44)
On Activate (3:10)
On Activate Walk Through (3:58)
On User Interaction (2:17)
On User Interaction Walk Through (4:48)
On Network Response (4:02)
On Network Response Walk Tthrough (3:22)
On Push (4:04)
On Push Walk Through (5:03)
Cache Only (1:00)
Cache Only Walk Through (5:15)
Network Only (2:18)
Network Only Walk Through (7:57)
Cache Falling Back to the Network (1:45)
Cache Falling Back to the Network Walk Through (3:37)
Cache and Network Race (3:52)
Cache and Network Race Walk Through (3:33)
Network Falling Back to Cache (1:30)
Network Falling Back to Cache Walk Through (2:36)
Cache Then Network (3:43)
Cache then Network Walk Through (3:17)
Generic Fallback Concept (2:08)
Generic Fallback Code Demonstration (3:30)
Service Worker Templating Concept (8:02)
Service Worker Templating Code Demonstration (7:00)
On Background Sync (2:04)
On Background Sync Walk Through (2:47)
Applied Service Worker Caching
Practiacal Application Refactoring and Utility functions 720 (14:11)
Practical Application Fetch Caching Demo 720 (7:22)
Practical Application Fetch Event Should Cache Function 720 (4:32)
Practical Application Fetch Event Fetch Function 720 (9:59)
Practical Application Fetch Caching Demo trimCache 720 (4:04)
Practical Application Fetch Caching Demo part offline fallback 720 (6:42)
Service Worker Tools
Introduction to Workbox (8:12)
Workbox PreCache (13:11)
Workbox Dynamic Route Configuration
Push Notifications
Intro to Push Notifications (3:33)
Push Notification API Concepts (6:03)
Subscribe the User Code Walk Through (9:48)
Responding to a Push Event Code Walk Through (7:00)
push notification flow chart 720 (1:31)
push notifications experience 720 (2:42)
push server requirements 720 (3:25)
Microsoft Windows, Edge and Progressive Web Apps
Microsoft's Progressive Web Application Strategy (9:17)
Microsoft's Recommended Progressive Web App Features (4:06)
Windows Platform Integration for PWAs (5:35)
What is a Microsoft Hosted Web App? (2:25)
Hosted Web Application Examples (4:27)
PWABuilder GitHub Page (2:06)
PWABuilder Image Generation (2:48)
Microsoft Progressive Web Application Release Date (3:56)
Mozilla FireFox and Progressive Web Applications
FireFox on Android Add To Homescreen
Progressive Web Applications and Browser Developer Tools
Debugging a Service Worker Using Chrome Developer Tools (6:04)
Chrome Service Worker Developer Tools (10:34)
Debugging a Service Worker in FireFox (9:54)
Inspecting Your Cache Using the FireFox Developer Tools (5:13)
Using Lighthouse
What is Project Lighthouse? (4:44)
Using Project Lighthouse in the Chrome Developer Tools (9:30)
Using Sonar To Validate Your Web Site
Using Sonar to Audit Your Site (7:27)
Adding PWA Features to iOS Safari
Introduction to iOS Safari PWA Polyfils (7:52)
A Review of How appCache Works (11:14)
How Polyfil Caching Works (8:10)
Caching Options and How to Control Cache Size (5:02)
appCache Demonstration (8:21)
Reviewing Progressive Web Applications
Progressive Web App Summary (0:48)
Bonus Material (1:26)
What Icon SIzes Should Your PWA Have?
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock