Progressive Web Apps (PWA) - The Complete Guide

Build a Progressive Web App (PWA) that feels like an iOS & Android App, using Device Camera, Push Notifications and more

All Levels 4.6(6,632 Ratings) 37,198 Students enrolled
Created by Academind by Last updated 12/2019 English English
What will i learn?
  • Build web apps that look and feel like native mobile apps for iOS and Android
  • Use service workers to build web apps that work without internet connection (offline-first)
  • Leverage device features like the camera and geolocation in your web apps
  • Use web push notifications to increase user engagement with your web apps

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

Progressive Web Apps (PWAs) are the next big thing in web development as they bring mobile-app-like experiences to your users without requiring them to install an app from the app store/ play store.

You still create a web application (HTML, CSS, JavaScript) but this course will teach you how to add features such as camera access, service workers for offline support, push notifications and more. This combines the best of both worlds: You deliver fast, engaging and reliable experiences whilst still having the reach and accessibility of a web page.

"Progressive Web App" simply is a term summarizing all the features allowing you to deliver mobile-like experiences. The topic is highly trending and it also is a topic which is here to stay! Not only is it strongly promoted by Google (actually a lot of talks at Google I/O 2017, Google's developer conference, were devoted to PWAs), it's also quickly being adopted by big companies like Twitter or the Washington Post.

Having the skills to build and optimize these kind of web apps is already an important and highly demanded skill for modern web developers, a trend which is only going to accelerate! Therefore, learning how to build PWAs will give you a competitive edge!

In detail, this course will cover everything you need to build amazing PWAs - leading to a score of 100 (out of 100) in Google's PWA auditing tool "Lighthouse":

  • Detailed explanation about what a PWA exactly is

  • How to use an app manifest to make your web app installable on device homescreens

  • Using service workers to offer offline support by caching assets

  • Advanced service worker usage and caching strategies

  • A refresher on Promises and the Fetch API as both concepts are heavily used in PWAs

  • How to improve user engagement by adding push notifications

  • A way to synchronize data in the background, even if connection is lost

  • How to access native device features like the camera or geolocation

  • Using Workbox to make service worker management easier

  • Explanations on how to turn your next SPA project into a PWA

  • And more

All these things are of course put into practice by building a course project. To ensure that you can apply the knowledge to ANY of your projects, the course project doesn't assume any JavaScript framework but focuses on the core features mentioned above!

So this course has a lot to offer, how do you tell if it's for you though?

It definitely is the right choice if ...

  • ... you already are a web developer (no matter if experienced or still new to the business) and want to prepare for the future

  • ... you enjoy working with HTML, CSS and JavaScript and want to leverage the full power the web and browser technologies have to offer

  • ... you want to deliver the best possible experiences to your users, using technologies like web push notifications or offline support

What do you need to know to get the most out of the course?

  • You need to know at least the basics of HTML, CSS and JavaScript

  • No advanced knowledge of these technologies required though

  • You DON'T need to know any JavaScript framework like Angular or React - PWAs work with ANY JavaScript app, even if you don't use a framework at all (actually, that's what we'll build in the course!)

I'd be very happy to welcome you on board of this course and start this journey together with you!

Max

+ View more
Other related courses
02:38:43
3.8 66 $149.99 Free
08:53:47
3.8 50 Free
01:31:27
Updated Wed, 20-Nov-2019
4.1 38 $149.99 Free
01:45:50
4.1 25 $94.99 Free
04:45:08
4.1 24 Free
01:04:45
4.1 17 Free
03:48:48
4.4 12 $19.99 Free
05:25:07
4.4 22 Free
01:10:37
4.1 10 Free
03:52:13
Updated Mon, 02-Sep-2019
4.1 19 $99.99 Free
04:28:09
4.3 17 $19.99 Free
06:19:49
4.4 14 Free
01:52:35
4 22 $74.99 Free
01:39:41
3.7 14 $79.99 Free
02:09:40
4.2 15 Free
01:01:33
4.2 12 $199.99 Free
51:12:35
4.2 18 $199.99 Free
02:23:35
Updated Tue, 09-Jul-2019
3.7 11 $99.99 Free
01:13:12
4.3 19 $139.99 Free
01:31:26
4.3 18 $139.99 Free
00:58:35
4.1 13 $94.99 Free
12:15:26
4.6 15 $99.99 Free
03:15:34
4.2 16 $199.99 Free
01:15:31
4.2 5 Free
00:44:15
4.5 6 $199.99 Free
03:36:22
4.7 1 Free
16:47:11
3.6 13 Free
03:09:33
Updated Sun, 03-Sep-2017
3.8 16 Free
02:07:36
3.9 1 Free
04:37:27
3.8 2 Free
02:14:18
Updated Fri, 23-Mar-2018
3.7 8 Free
02:23:03
4.3 5 Free
06:22:46
Updated Wed, 23-Mar-2016
4.1 1 Free
04:17:53
4.4 13 Free
00:57:12
3.4 11 Free
02:13:31
4.1 7 Free
12:52:08
3.5 6 Free
01:00:01
Updated Sat, 21-Dec-2019
2.3 4 Free
04:32:16
3.7 2 Free
03:41:40
4.3 3 Free
04:23:54
3.8 1 Free
02:12:25
4.3 0 Free
01:03:10
Updated Fri, 06-Dec-2019
3.9 2 Free
03:33:25
4.1 9 Free
02:43:49
4.4 0 Free
02:00:25
4.5 0 Free
01:10:58
3.8 8 Free
02:55:06
4.2 4 Free
00:36:19
Updated Tue, 28-Mar-2017
3.5 1 Free
02:18:52
4.1 13 Free
00:31:06
Updated Mon, 13-Nov-2017
3.6 6 Free
00:50:23
4 2 Free
02:27:52
Updated Wed, 07-Aug-2019
4.2 6 Free
00:50:19
3.7 4 $129.99 Free
01:49:58
3.9 9 $139.99 Free
01:17:39
Updated Thu, 26-Dec-2019
0 3 Free
03:42:56
4 12 $199.99 Free
02:01:15
Updated Mon, 23-Dec-2019
3.9 2 $199.99 Free
01:40:29
Updated Mon, 23-Dec-2019
3.7 5 $199.99 Free
02:15:39
Updated Mon, 23-Dec-2019
3.1 8 $19.99 Free
02:18:14
4.2 5 $129.99 Free
01:31:32
Updated Mon, 23-Dec-2019
3.8 2 $19.99 Free
01:24:32
Updated Mon, 23-Dec-2019
3.8 2 $19.99 Free
01:30:20
Updated Mon, 23-Dec-2019
3.5 4 $19.99 Free
01:19:56
Updated Mon, 23-Dec-2019
3.5 5 $19.99 Free
00:59:13
Updated Mon, 23-Dec-2019
3.2 4 $19.99 Free
01:01:52
Updated Mon, 23-Dec-2019
3.4 5 $19.99 Free
01:53:25
Updated Mon, 23-Dec-2019
3.4 7 $19.99 Free
02:17:41
Updated Mon, 23-Dec-2019
3.5 7 $19.99 Free
00:47:39
Updated Mon, 23-Dec-2019
3.7 5 $19.99 Free
00:41:25
Updated Mon, 23-Dec-2019
3.5 4 $19.99 Free
01:00:48
Updated Mon, 23-Dec-2019
3.4 6 $19.99 Free
00:33:47
Updated Mon, 23-Dec-2019
3.6 3 $19.99 Free
01:09:52
Updated Mon, 23-Dec-2019
3.4 7 $199.99 Free
00:40:16
Updated Mon, 23-Dec-2019
3.2 7 $199.99 Free
00:49:55
Updated Mon, 23-Dec-2019
3.6 3 $199.99 Free
02:34:03
4 5 Free
24:16:36
4.2 36 $199.99 Free
00:37:00
3.6 2 $99.99 Free
07:52:29
0 14 $114.99 Free
05:38:23
Updated Sat, 17-Aug-2019
4.3 3 $34.99 Free
01:20:14
Updated Tue, 14-May-2013
4 0 Free
05:57:07
3.7 10 $159.99 Free
05:26:39
0 17 $39.99 Free
00:37:17
3.9 5 $99.99 Free
06:23:22
2.5 17 Free
08:33:58
3.9 12 $19.99 Free
27:55:46
4.5 7 $199.99 Free
47:29:47
Updated Tue, 31-Dec-2019
4.6 93 $179.99 Free
03:32:49
Updated Sat, 28-Sep-2019
4.6 18 $49.99 Free
14:59:04
4.7 8 $199.99 Free
13:30:15
Updated Thu, 26-Dec-2019
4.5 23 $149.99 Free
28:04:40
4.7 44 $199.99 Free
10:22:00
4.6 14 $119.99 Free
14:51:23
4.2 78 $194.99 Free
46:24:20
Updated Thu, 12-Dec-2019
4.6 161 $199.99 Free
05:30:27
4 15 $159.99 Free
04:17:37
4 2 Free
03:59:09
4.7 3 Free
03:41:47
3 11 Free
04:00:56
4.1 2 $149.99 Free
03:35:47
4.2 8 $199.99 Free
22:12:56
4 9 $199.99 Free
08:03:16
4.3 10 Free
10:51:38
3.3 3 $199.99 Free
14:41:03
4.2 9 Free
04:35:13
3.8 3 Free
39:30:00
4 14 Free
04:32:42
3.8 12 Free
05:32:51
4.4 1 Free
06:43:19
Updated Sun, 04-Aug-2019
4.1 2 Free
03:20:40
4.2 6 Free
05:51:57
Updated Sat, 16-Nov-2019
4.1 14 Free
18:45:45
Updated Tue, 24-Sep-2019
4.6 3 Free
04:47:30
4.1 12 Free
02:39:55
3.7 13 Free
13:17:19
3.8 14 $124.99 Free
01:18:41
Updated Mon, 23-Dec-2019
0 8 $19.99 Free
14:40:08
4.1 11 Free
01:18:30
Updated Sun, 12-Jan-2020
0 4 Free
03:09:37
3.9 11 Free
08:12:53
4.7 6 $39.99 Free
21:42:23
Updated Sun, 08-Dec-2019
4.6 13 $174.99 Free
02:18:00
4.3 6 $129.99 Free
17:04:39
Updated Thu, 26-Dec-2019
4.5 13 $109.99 Free
23:53:13
4.5 7 $94.99 Free
11:00:44
4.5 8 $149.99 Free
12:36:12
4.6 19 $149.99 Free
05:49:54
Updated Sun, 03-Nov-2019
4.6 11 $109.99 Free
10:11:39
4 9 $49.99 Free
02:52:39
Updated Fri, 10-Jan-2020
3 5 Free
01:06:37
Updated Sun, 19-Jan-2020
4.1 6 $19.99 Free
00:55:55
4.9 3 Free
01:57:08
4.3 7 $199.99 Free
05:05:38
Updated Sun, 10-Aug-2014
4 1 Free
00:58:40
Updated Wed, 20-Nov-2019
4.2 6 Free
06:20:09
4.2 5 Free
29:24:58
4.1 11 Free
01:19:25
3.2 5 Free
00:45:46
Updated Wed, 06-Nov-2019
2 2 $19.99 Free
09:10:22
4.4 11 Free
01:20:24
4 4 Free
03:51:23
3.8 2 Free
00:40:21
Updated Thu, 22-Aug-2019
3.2 3 Free
02:07:04
Updated Tue, 14-Aug-2018
0 5 Free
02:19:58
Updated Sun, 02-Jun-2019
3.2 3 Free
01:51:26
Updated Mon, 13-Jan-2020
0 9 $99.99 Free
03:04:46
Updated Wed, 22-Jan-2020
4.3 6 Free
01:57:15
Updated Fri, 29-Sep-2017
4.3 3 Free
08:16:39
4.3 10 $174.99 Free
06:41:57
4.1 8 $174.99 Free
07:58:41
4.4 3 $194.99 Free
01:08:54
4 2 Free
01:25:26
4 3 Free
00:31:50
Updated Tue, 07-Jan-2020
3.8 1 Free
02:21:42
0 2 $179.99 Free
02:51:06
3.5 2 Free
02:26:30
Updated Sat, 25-Jan-2020
3.6 2 $99.99 Free
00:36:04
3.4 1 Free
03:10:29
4 8 Free
42:10:51
4.7 19 $199.99 Free
01:55:44
4.3 7 $99.99 Free
01:15:58
3.3 11 $199.99 Free
05:50:21
4.4 80 Free
11:51:39
4.5 79 $199.99 Free
04:00:57
3.9 5 $199.99 Free
27:49:26
4.5 132 $199.99 Free
07:33:47
4.1 5 $19.99 Free
06:20:15
Updated Thu, 04-Oct-2018
3.8 5 $99.99 Free
02:21:45
4.2 4 $199.99 Free
14:28:07
3.9 5 $199.99 Free
02:41:06
4.2 4 $104.99 Free
02:05:43
Updated Sun, 29-Oct-2017
3.7 6 Free
02:34:40
Updated Tue, 05-Dec-2017
4 4 Free
35:24:16
4.5 120 $189.99 Free
About the instructor
  • 27 Students
  • 4 Courses
+ View more
Online Education
Student feedback
4.6
Average rating
  • 0%
  • 1%
  • 8%
  • 52%
  • 136%
Comments
Free $149.99
Includes:
  • 14:34:08 On demand videos
  • 210 Lessons
  • Full lifetime access
  • Access on mobile and tv