CF

Progressive Web Apps (PWA) - The Complete Guide

14h 37m 3s
English
Paid

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!)

Requirements:
  • Basic HTML, CSS and JavaScript knowledge is required
  • NO experience with JavaScript frameworks is required
Who this course is for:
  • Students who want to build web apps that look and behave like native mobile apps
  • Students who want to build offline-ready web apps (yes, that works!)
  • Anyone who wants to build web apps that offer access to the device camera, geolocation, push notifications and provide offline support
  • Students who want to leverage latest browser features whilst still supporting older browsers

What you'll 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

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 183 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 183 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: About this Course
All Course Lessons (183)
#Lesson TitleDurationAccess
1
About this Course Demo
02:07
2
What are Progressive Web Apps?
03:25
3
PWAs vs Native Mobile Apps
06:08
4
A Demo PWA & What We'll Build in this Course
06:25
5
Our First Progressive Web App
06:28
6
PWA Core Building Blocks
03:20
7
Comparing PWAs and SPAs
03:18
8
What is "Progressive Enhancement"?
03:24
9
Course Outline
04:25
10
Course Project Setup
06:11
11
How to get the Most out of this Course
02:12
12
Module Introduction
01:02
13
Using an App Manifest to Make your App Installable
01:37
14
Adding the Manifest
03:41
15
Understanding App Manifest Properties
09:44
16
Adding Properties to the App Manifest
09:45
17
PWAs and Browser Support
02:17
18
Using the Chrome Developer Tools
01:36
19
Simulating the Web App on an Emulator
04:37
20
Installing the Web App - Prerequisites
02:31
21
Adding Properties for Safari
05:51
22
Adding Properties for the Internet Explorer
02:31
23
Wrap Up
00:29
24
Module Introduction
00:41
25
Why Service Workers Are Amazing!
04:41
26
Understanding Service Worker Events
06:19
27
The Service Worker Lifecycle
05:20
28
Service Worker Browser Support
01:25
29
Registering a Service Worker
09:27
30
Reacting to Incoming Events (in SW)
05:40
31
Updating & Activating Service Workers
03:01
32
Non-Lifecycle Events
04:50
33
Getting that "App Install Banner"
02:41
34
Testing the App on Real Device (and Installing the App!)
03:43
35
Deferring the App Install Banner
06:44
36
Wrap Up
01:21
37
Module Introduction
00:50
38
Async Code in JavaScript
03:55
39
Promises - Basics
04:41
40
Rejecting Promises
04:06
41
Where we Use Promises in our Project
02:26
42
Fetch - Basics
06:12
43
Sending Post Requests via Fetch
04:23
44
Fetch and CORS
03:13
45
Comparing Fetch and Ajax
03:05
46
Adding Polyfills (for Legacy Browser Support)
03:30
47
Fetch & Service Workers
02:06
48
[OPTIONAL] Assignment Solution
08:04
49
Wrap Up
00:57
50
Module Introduction
00:44
51
Why Caching?
03:07
52
Understanding the Cache API
04:01
53
Browser Support
01:50
54
Adjusting the Course Project
02:54
55
Identifying (Pre-)Cacheable Items
03:08
56
Static Caching/ Precaching
11:05
57
Retrieving Items from the Cache
04:56
58
Adding & Retrieving Multiple Files (to/ from Cache)
03:06
59
Cache Multiple Files with addAll
09:11
60
Dynamic Caching - The Basics
01:55
61
Implementing Dynamic Caching
07:20
62
Handling Errors
02:14
63
Adding Cache Versioning
06:57
64
Different Cache Versions & Cleanup
06:38
65
Optimizing Cache Management
02:43
66
[OPTIONAL] Assignment Solution
21:52
67
Wrap Up
00:36
68
Module Introduction
01:13
69
Module Preparation: Adding a Button
04:05
70
Offering "Cache on Demand"
06:52
71
Providing an Offline Fallback Page
06:22
72
Strategy: Cache with Network Fallback
01:44
73
Strategy: Cache Only
03:07
74
Strategy: Network Only
01:58
75
Strategy: Network with Cache Fallback
06:22
76
Strategy: Cache then Network
09:05
77
Cache then Network & Dynamic Caching
05:12
78
Cache then Network with Offline Support
06:00
79
Cache Strategies & "Routing"
03:10
80
Applying Cache Only
05:46
81
[OPTIONAL] Assignment Solution
25:53
82
A Better Way Of Parsing Static Cache URLs
02:41
83
A Better Way Of Serving Fallback Files
02:58
84
Post Request and Cache API
03:19
85
Cleaning/ Trimming the Cache
06:07
86
Getting Rid of a Service Worker
03:50
87
Preparing the Project for the Next Steps
00:29
88
Wrap Up
00:58
89
Module Introduction
01:02
90
Understanding the Basics
01:13
91
Setting Up Firebase
07:20
92
Connecting Frontend to Backend
08:32
93
Dynamic Caching vs. Caching Dynamic Content
04:52
94
Introducing IndexedDB
03:35
95
IndexedDB Browser Support
00:39
96
Adding the IDB File
02:32
97
Storing Fetched Posts in IndexedDB
13:12
98
Using IndexedDB in the Service Worker
03:57
99
Reading Data from IDB
06:41
100
Clearing IDB & Handling Server-Client Mismatch
03:41
101
Implementing the Clear Database Method
03:59
102
Deleting Single Items from the Database
04:06
103
IndexedDB and Caching Strategies
01:34
104
Wrap Up
00:46
105
Module Introduction
01:19
106
Responsive Design in this Course
02:52
107
Understanding Responsive Design in our Project
03:31
108
CSS and Media Queries
09:47
109
Using Images in a Responsive Way
08:53
110
Adding Animations
08:30
111
The Viewport & Scaling
01:47
112
Wrap Up
00:47
113
Module Introduction
01:05
114
How does Background Sync Work?
03:34
115
Adding the Basic Setup to our Project
04:05
116
Registering a Synchronization Task
04:38
117
Storing our Post in IndexedDB
06:01
118
Adding a Fallback
04:13
119
Syncing Data in the Service Worker
15:53
120
Understanding Periodic Sync
02:17
121
Adding Server Side Code
15:12
122
Fixing Errors
05:21
123
Wrap Up
00:50
124
Module Introduction
01:05
125
Why we need Web Push Notifications
01:57
126
How Push & Notifications Work
09:05
127
Displaying Notifications - Some Theory First
01:53
128
Browser Support
02:03
129
Requesting Permissions
08:08
130
Displaying Notifications
03:39
131
Notifications from Within the Service Worker
03:34
132
Understanding Notifications' Options
08:50
133
Advanced Options
02:59
134
Adding Actions to Notifications
02:24
135
Reacting to Notification Interaction - Clicks
05:22
136
Reacting to Notification Interaction - Closing
02:37
137
From Notifications to Push Messages
06:37
138
Creating a Push Subscription
04:33
139
Storing Subscriptions
10:51
140
Connecting Server & Client (PWA)
01:46
141
Sending Push Messages from the Server
09:56
142
Listening to Push Messages
07:40
143
Displaying Push Notifications on a Real Device
02:04
144
Opening a Page upon User Interaction
05:46
145
Improving our Code
04:29
146
Wrap Up
01:17
147
Module Introduction
00:56
148
Preparing the Project
07:29
149
Getting DOM Access
04:36
150
Creating our own Polyfills
08:05
151
Getting the Video Image
07:26
152
Hooking Up the Capture Button
06:25
153
Storing the Image on a Server
08:41
154
Accepting File Upload Example with Firebase
14:37
155
Testing the Camera & Upload
04:52
156
Implementing a Fallback
02:31
157
Getting the User Position
16:39
158
Fixing Bugs
08:47
159
Testing the App on a Real Device
01:44
160
Wrap Up
00:48
161
Module Introduction
01:02
162
Understanding the Basics
00:56
163
Installing Workbox & Using It
06:57
164
Configuring Workbox Precaching
05:03
165
Customizing the Service Worker
04:46
166
Implementing Routing with the Workbox Router
06:42
167
Expanding Dynamic Caching
03:32
168
Options and Setting Up Strategies
06:10
169
Custom Handlers (Example: For IndexedDB)
03:46
170
Providing an Offline HTML Fallback
06:48
171
Handling Background Synchronisation and Push Notifications
03:27
172
Understanding the Workbox Documentation
05:18
173
Enhancing the Build Workflow
06:31
174
Running our App on a Real Server
03:57
175
Auditing our Webpage with Lighthouse
04:25
176
Wrap Up
01:12
177
Module Introduction
01:19
178
React with create-react-app
09:30
179
A General Note about SPAs and PWAs
01:29
180
Angular with the CLI
14:40
181
Vue with Vue CLI
06:50
182
Wrap Up
01:01
183
Course Roundup
03:22
Unlock unlimited learning

Get instant access to all 182 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

183 lessons · 14h 37m 3s
Show all 183 lessons
  1. 1 About this Course 02:07
  2. 2 What are Progressive Web Apps? 03:25
  3. 3 PWAs vs Native Mobile Apps 06:08
  4. 4 A Demo PWA & What We'll Build in this Course 06:25
  5. 5 Our First Progressive Web App 06:28
  6. 6 PWA Core Building Blocks 03:20
  7. 7 Comparing PWAs and SPAs 03:18
  8. 8 What is "Progressive Enhancement"? 03:24
  9. 9 Course Outline 04:25
  10. 10 Course Project Setup 06:11
  11. 11 How to get the Most out of this Course 02:12
  12. 12 Module Introduction 01:02
  13. 13 Using an App Manifest to Make your App Installable 01:37
  14. 14 Adding the Manifest 03:41
  15. 15 Understanding App Manifest Properties 09:44
  16. 16 Adding Properties to the App Manifest 09:45
  17. 17 PWAs and Browser Support 02:17
  18. 18 Using the Chrome Developer Tools 01:36
  19. 19 Simulating the Web App on an Emulator 04:37
  20. 20 Installing the Web App - Prerequisites 02:31
  21. 21 Adding Properties for Safari 05:51
  22. 22 Adding Properties for the Internet Explorer 02:31
  23. 23 Wrap Up 00:29
  24. 24 Module Introduction 00:41
  25. 25 Why Service Workers Are Amazing! 04:41
  26. 26 Understanding Service Worker Events 06:19
  27. 27 The Service Worker Lifecycle 05:20
  28. 28 Service Worker Browser Support 01:25
  29. 29 Registering a Service Worker 09:27
  30. 30 Reacting to Incoming Events (in SW) 05:40
  31. 31 Updating & Activating Service Workers 03:01
  32. 32 Non-Lifecycle Events 04:50
  33. 33 Getting that "App Install Banner" 02:41
  34. 34 Testing the App on Real Device (and Installing the App!) 03:43
  35. 35 Deferring the App Install Banner 06:44
  36. 36 Wrap Up 01:21
  37. 37 Module Introduction 00:50
  38. 38 Async Code in JavaScript 03:55
  39. 39 Promises - Basics 04:41
  40. 40 Rejecting Promises 04:06
  41. 41 Where we Use Promises in our Project 02:26
  42. 42 Fetch - Basics 06:12
  43. 43 Sending Post Requests via Fetch 04:23
  44. 44 Fetch and CORS 03:13
  45. 45 Comparing Fetch and Ajax 03:05
  46. 46 Adding Polyfills (for Legacy Browser Support) 03:30
  47. 47 Fetch & Service Workers 02:06
  48. 48 [OPTIONAL] Assignment Solution 08:04
  49. 49 Wrap Up 00:57
  50. 50 Module Introduction 00:44
  51. 51 Why Caching? 03:07
  52. 52 Understanding the Cache API 04:01
  53. 53 Browser Support 01:50
  54. 54 Adjusting the Course Project 02:54
  55. 55 Identifying (Pre-)Cacheable Items 03:08
  56. 56 Static Caching/ Precaching 11:05
  57. 57 Retrieving Items from the Cache 04:56
  58. 58 Adding & Retrieving Multiple Files (to/ from Cache) 03:06
  59. 59 Cache Multiple Files with addAll 09:11
  60. 60 Dynamic Caching - The Basics 01:55
  61. 61 Implementing Dynamic Caching 07:20
  62. 62 Handling Errors 02:14
  63. 63 Adding Cache Versioning 06:57
  64. 64 Different Cache Versions & Cleanup 06:38
  65. 65 Optimizing Cache Management 02:43
  66. 66 [OPTIONAL] Assignment Solution 21:52
  67. 67 Wrap Up 00:36
  68. 68 Module Introduction 01:13
  69. 69 Module Preparation: Adding a Button 04:05
  70. 70 Offering "Cache on Demand" 06:52
  71. 71 Providing an Offline Fallback Page 06:22
  72. 72 Strategy: Cache with Network Fallback 01:44
  73. 73 Strategy: Cache Only 03:07
  74. 74 Strategy: Network Only 01:58
  75. 75 Strategy: Network with Cache Fallback 06:22
  76. 76 Strategy: Cache then Network 09:05
  77. 77 Cache then Network & Dynamic Caching 05:12
  78. 78 Cache then Network with Offline Support 06:00
  79. 79 Cache Strategies & "Routing" 03:10
  80. 80 Applying Cache Only 05:46
  81. 81 [OPTIONAL] Assignment Solution 25:53
  82. 82 A Better Way Of Parsing Static Cache URLs 02:41
  83. 83 A Better Way Of Serving Fallback Files 02:58
  84. 84 Post Request and Cache API 03:19
  85. 85 Cleaning/ Trimming the Cache 06:07
  86. 86 Getting Rid of a Service Worker 03:50
  87. 87 Preparing the Project for the Next Steps 00:29
  88. 88 Wrap Up 00:58
  89. 89 Module Introduction 01:02
  90. 90 Understanding the Basics 01:13
  91. 91 Setting Up Firebase 07:20
  92. 92 Connecting Frontend to Backend 08:32
  93. 93 Dynamic Caching vs. Caching Dynamic Content 04:52
  94. 94 Introducing IndexedDB 03:35
  95. 95 IndexedDB Browser Support 00:39
  96. 96 Adding the IDB File 02:32
  97. 97 Storing Fetched Posts in IndexedDB 13:12
  98. 98 Using IndexedDB in the Service Worker 03:57
  99. 99 Reading Data from IDB 06:41
  100. 100 Clearing IDB & Handling Server-Client Mismatch 03:41
  101. 101 Implementing the Clear Database Method 03:59
  102. 102 Deleting Single Items from the Database 04:06
  103. 103 IndexedDB and Caching Strategies 01:34
  104. 104 Wrap Up 00:46
  105. 105 Module Introduction 01:19
  106. 106 Responsive Design in this Course 02:52
  107. 107 Understanding Responsive Design in our Project 03:31
  108. 108 CSS and Media Queries 09:47
  109. 109 Using Images in a Responsive Way 08:53
  110. 110 Adding Animations 08:30
  111. 111 The Viewport & Scaling 01:47
  112. 112 Wrap Up 00:47
  113. 113 Module Introduction 01:05
  114. 114 How does Background Sync Work? 03:34
  115. 115 Adding the Basic Setup to our Project 04:05
  116. 116 Registering a Synchronization Task 04:38
  117. 117 Storing our Post in IndexedDB 06:01
  118. 118 Adding a Fallback 04:13
  119. 119 Syncing Data in the Service Worker 15:53
  120. 120 Understanding Periodic Sync 02:17
  121. 121 Adding Server Side Code 15:12
  122. 122 Fixing Errors 05:21
  123. 123 Wrap Up 00:50
  124. 124 Module Introduction 01:05
  125. 125 Why we need Web Push Notifications 01:57
  126. 126 How Push & Notifications Work 09:05
  127. 127 Displaying Notifications - Some Theory First 01:53
  128. 128 Browser Support 02:03
  129. 129 Requesting Permissions 08:08
  130. 130 Displaying Notifications 03:39
  131. 131 Notifications from Within the Service Worker 03:34
  132. 132 Understanding Notifications' Options 08:50
  133. 133 Advanced Options 02:59
  134. 134 Adding Actions to Notifications 02:24
  135. 135 Reacting to Notification Interaction - Clicks 05:22
  136. 136 Reacting to Notification Interaction - Closing 02:37
  137. 137 From Notifications to Push Messages 06:37
  138. 138 Creating a Push Subscription 04:33
  139. 139 Storing Subscriptions 10:51
  140. 140 Connecting Server & Client (PWA) 01:46
  141. 141 Sending Push Messages from the Server 09:56
  142. 142 Listening to Push Messages 07:40
  143. 143 Displaying Push Notifications on a Real Device 02:04
  144. 144 Opening a Page upon User Interaction 05:46
  145. 145 Improving our Code 04:29
  146. 146 Wrap Up 01:17
  147. 147 Module Introduction 00:56
  148. 148 Preparing the Project 07:29
  149. 149 Getting DOM Access 04:36
  150. 150 Creating our own Polyfills 08:05
  151. 151 Getting the Video Image 07:26
  152. 152 Hooking Up the Capture Button 06:25
  153. 153 Storing the Image on a Server 08:41
  154. 154 Accepting File Upload Example with Firebase 14:37
  155. 155 Testing the Camera & Upload 04:52
  156. 156 Implementing a Fallback 02:31
  157. 157 Getting the User Position 16:39
  158. 158 Fixing Bugs 08:47
  159. 159 Testing the App on a Real Device 01:44
  160. 160 Wrap Up 00:48
  161. 161 Module Introduction 01:02
  162. 162 Understanding the Basics 00:56
  163. 163 Installing Workbox & Using It 06:57
  164. 164 Configuring Workbox Precaching 05:03
  165. 165 Customizing the Service Worker 04:46
  166. 166 Implementing Routing with the Workbox Router 06:42
  167. 167 Expanding Dynamic Caching 03:32
  168. 168 Options and Setting Up Strategies 06:10
  169. 169 Custom Handlers (Example: For IndexedDB) 03:46
  170. 170 Providing an Offline HTML Fallback 06:48
  171. 171 Handling Background Synchronisation and Push Notifications 03:27
  172. 172 Understanding the Workbox Documentation 05:18
  173. 173 Enhancing the Build Workflow 06:31
  174. 174 Running our App on a Real Server 03:57
  175. 175 Auditing our Webpage with Lighthouse 04:25
  176. 176 Wrap Up 01:12
  177. 177 Module Introduction 01:19
  178. 178 React with create-react-app 09:30
  179. 179 A General Note about SPAs and PWAs 01:29
  180. 180 Angular with the CLI 14:40
  181. 181 Vue with Vue CLI 06:50
  182. 182 Wrap Up 01:01
  183. 183 Course Roundup 03:22

Related courses

Frequently asked questions

What is Progressive Web Apps (PWA) - The Complete Guide about?
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…
Who teaches Progressive Web Apps (PWA) - The Complete Guide?
Progressive Web Apps (PWA) - The Complete Guide is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Progressive Web Apps (PWA) - The Complete Guide?
Progressive Web Apps (PWA) - The Complete Guide contains 183 lessons with a total runtime of 14 hours 37 minutes. All lessons are available to watch online at your own pace.
Is Progressive Web Apps (PWA) - The Complete Guide free to watch?
Progressive Web Apps (PWA) - The Complete Guide is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Progressive Web Apps (PWA) - The Complete Guide online?
Progressive Web Apps (PWA) - The Complete Guide is available to watch online on CourseFlix at https://courseflix.net/course/progressive-web-apps-pwa-the-complete-guide. The page hosts every lesson with the integrated video player; no download is required.