Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Progressive Web Apps (PWA) - The Complete Guide
Getting Started
About this Course (2:06)
What are Progressive Web Apps? (3:24)
PWAs vs Native Mobile Apps (6:07)
Join our Online Learning Community
A Demo PWA & What We'll Build in this Course (6:24)
Our First Progressive Web App (6:27)
PWA Core Building Blocks (3:19)
Comparing PWAs and SPAs (3:17)
What is "Progressive Enhancement"? (3:23)
Course Outline (4:24)
Course Project Setup (6:09)
How to get the Most out of this Course (2:11)
The Academind Pro Referral Program
Understanding the App Manifest
Module Introduction (1:01)
Using an App Manifest to Make your App Installable (1:36)
Adding the Manifest (3:40)
Understanding App Manifest Properties (9:43)
Adding Properties to the App Manifest (9:44)
PWAs and Browser Support (2:16)
Using the Chrome Developer Tools (1:35)
Simulating the Web App on an Emulator (4:36)
Installing the Web App - Prerequisites (2:30)
Quiz: Understanding manifest.json
Adding Properties for Safari (5:50)
Adding Properties for the Internet Explorer (2:30)
Wrap Up (0:28)
Useful Resources & Links
The Service Workers
Module Introduction (0:40)
Why Service Workers Are Amazing! (4:40)
Understanding Service Worker Events (6:18)
The Service Worker Lifecycle (5:19)
Service Worker Browser Support (1:24)
Registering a Service Worker (9:26)
Reacting to Incoming Events (in SW) (5:39)
Updating & Activating Service Workers (3:00)
Non-Lifecycle Events (4:49)
Getting that "App Install Banner" (2:40)
Testing the App on Real Device (and Installing the App!) (3:42)
Deferring the App Install Banner (6:43)
Wrap Up (1:20)
Service Worker - FAQ
Useful Resources & Links
Promise and Fetch
Module Introduction (0:49)
Async Code in JavaScript (3:54)
Promises - Basics (4:40)
Rejecting Promises (4:05)
Where we Use Promises in our Project (2:25)
Fetch - Basics (6:11)
Sending Post Requests via Fetch (4:22)
Fetch and CORS (3:12)
Comparing Fetch and Ajax (3:04)
Adding Polyfills (for Legacy Browser Support) (3:29)
Fetch & Service Workers (2:05)
Assignment: Fetch & Promises (Problem) (4:44)
Assignment: Fetch & Promises (Solution) (8:03)
Wrap Up (0:56)
Useful Resources & Links
Service Workers - Caching
Module Introduction (0:43)
Why Caching? (3:06)
Understanding the Cache API (4:00)
Browser Support (1:49)
Adjusting the Course Project (2:53)
Identifying (Pre-)Cacheable Items (3:07)
Static Caching/ Precaching (11:04)
Retrieving Items from the Cache (4:55)
Adding & Retrieving Multiple Files (to/ from Cache) (3:05)
Cache Multiple Files with addAll (9:10)
Dynamic Caching - The Basics (1:54)
Implementing Dynamic Caching (7:19)
Handling Errors (2:13)
Adding Cache Versioning (6:56)
Different Cache Versions & Cleanup (6:37)
Optimizing Cache Management (2:42)
Assignment: Service Workers & Caching (Problem) (6:05)
Assignment: Service Workers & Caching (Solution) (21:51)
Wrap Up (0:35)
Useful Resources & Links
Service Workers - Advanced Caching
Module Introduction (1:12)
Module Preparation: Adding a Button (4:04)
Offering "Cache on Demand" (6:51)
Providing an Offline Fallback Page (6:21)
Strategy: Cache with Network Fallback (1:43)
Strategy: Cache Only (3:06)
Strategy: Network Only (1:57)
Strategy: Network with Cache Fallback (6:21)
Strategy: Cache then Network (9:04)
Cache then Network & Dynamic Caching (5:11)
Cache then Network with Offline Support (5:59)
Cache Strategies & "Routing" (3:09)
Applying Cache Only (5:45)
Assignment: Advanced Caching (Problem) (3:54)
Assignment: Advanced Caching (Solution) (25:52)
A Better Way Of Parsing Static Cache URLs (2:40)
Making Route Matching More Precise
A Better Way Of Serving Fallback Files (2:57)
Post Request and Cache API (3:18)
Cleaning/ Trimming the Cache (6:06)
Getting Rid of a Service Worker (3:49)
Preparing the Project for the Next Steps (0:28)
Wrap Up (0:57)
Useful Resources & Links
IndexedDB and Dynamic Data
Module Introduction (1:01)
Understanding the Basics (1:12)
Setting Up Firebase (7:19)
Connecting Frontend to Backend (8:31)
Dynamic Caching vs. Caching Dynamic Content (4:51)
Introducing IndexedDB (3:34)
IndexedDB Browser Support (0:38)
Adding the IDB File (2:31)
Storing Fetched Posts in IndexedDB (13:11)
Using IndexedDB in the Service Worker (3:56)
Reading Data from IDB (6:40)
Clearing IDB & Handling Server-Client Mismatch (3:40)
Implementing the Clear Database Method (3:58)
Deleting Single Items from the Database (4:05)
IndexedDB and Caching Strategies (1:33)
Wrap Up (0:45)
Useful Resources & Links
Creating a Responsive User Interface (UI)
Module Introduction (1:18)
Responsive Design in this Course (2:51)
Understanding Responsive Design in our Project (3:30)
CSS and Media Queries (9:46)
Want to see more of your Images?
Using Images in a Responsive Way (8:52)
Adding Animations (8:29)
The Viewport & Scaling (1:46)
Wrap Up (0:46)
Useful Resources & Links
Background Sync
Module Introduction (1:04)
How does Background Sync Work? (3:33)
Adding the Basic Setup to our Project (4:04)
Registering a Synchronization Task (4:37)
Storing our Post in IndexedDB (6:00)
Adding a Fallback (4:12)
Syncing Data in the Service Worker (15:52)
Understanding Periodic Sync (2:16)
Adding Server Side Code (15:11)
Fixing Errors (5:20)
Wrap Up (0:49)
Useful Resources & Links
Web Push Notifications
Module Introduction (1:04)
Why we need Web Push Notifications (1:56)
How Push & Notifications Work (9:04)
Displaying Notifications - Some Theory First (1:52)
Browser Support (2:02)
Requesting Permissions (8:07)
Displaying Notifications (3:38)
Notifications from Within the Service Worker (3:33)
Understanding Notifications' Options (8:49)
Advanced Options (2:58)
Adding Actions to Notifications (2:23)
Reacting to Notification Interaction - Clicks (5:21)
Reacting to Notification Interaction - Closing (2:36)
From Notifications to Push Messages (6:36)
Creating a Push Subscription (4:32)
Storing Subscriptions (10:50)
Connecting Server & Client (PWA) (1:45)
Sending Push Messages from the Server (9:55)
Listening to Push Messages (7:39)
Displaying Push Notifications on a Real Device (2:03)
Opening a Page upon User Interaction (5:45)
Improving our Code (4:28)
Wrap Up (1:16)
Useful Resources & Links
Native Device Features
Module Introduction (0:55)
Preparing the Project (7:28)
Getting DOM Access (4:35)
Creating our own Polyfills (8:04)
Getting the Video Image (7:25)
Hooking Up the Capture Button (6:24)
Storing the Image on a Server (8:40)
MUST READ: Firebase Cloud Functions & Billing
Accepting File Upload Example with Firebase (14:36)
Testing the Camera & Upload (4:51)
Implementing a Fallback (2:30)
Getting the User Position (16:38)
Fixing Bugs (8:46)
Testing the App on a Real Device (1:43)
Wrap Up (0:47)
Useful Resources & Links
Service Worker Management with Workbox
Module Introduction (1:01)
Understanding the Basics (0:55)
The Workbox Version Used In This Course
Installing Workbox & Using It (6:56)
Configuring Workbox Precaching (5:02)
Customizing the Service Worker (4:45)
Implementing Routing with the Workbox Router (6:41)
Expanding Dynamic Caching (3:31)
Options and Setting Up Strategies (6:09)
Custom Handlers (Example: For IndexedDB) (3:45)
Providing an Offline HTML Fallback (6:47)
Handling Background Synchronisation and Push Notifications (3:26)
Understanding the Workbox Documentation (5:17)
Enhancing the Build Workflow (6:30)
Running our App on a Real Server (3:56)
Auditing our Webpage with Lighthouse (4:24)
Wrap Up (1:11)
Useful Resources & Links
SPAs and PWAs
Module Introduction (1:18)
React with create-react-app (9:29)
A General Note about SPAs and PWAs (1:28)
Angular with the CLI (16:34)
Vue with Vue CLI (6:49)
Wrap Up (1:00)
Useful Resources & Links
Course Roundup
Roundup (3:21)
Our First Progressive Web App
Download
Download
first-pwa-start.zip
Complete and Continue