w3docs logo
Connexion

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

Start
  1. Courses
  3. Progressive Web Apps (PWA) - The Complete Guide

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!

Section: Getting Started

1. About this Course (2:06) Preview
2. What are Progressive Web Apps? (3:24) Preview
3. PWAs vs Native Mobile Apps (6:07) Preview
4. Join our Online Learning Community (1:00) Preview
5. A Demo PWA & What We'll Build in this Course (6:24) Preview
6. Our First Progressive Web App (6:27) Preview
7. PWA Core Building Blocks (3:19) Preview
8. Comparing PWAs and SPAs (3:17) Preview
9. What is "Progressive Enhancement"? (3:23) Preview
10. Course Outline (4:24) Preview
11. Course Project Setup (6:09) Preview
12. How to get the Most out of this Course (2:11) Preview

Section: Understanding the App Manifest

13. Module Introduction (1:01)
14. Using an App Manifest to Make your App Installable (1:36)
15. Adding the Manifest (3:40)
16. Understanding App Manifest Properties (9:43)
17. Adding Properties to the App Manifest (9:44)
18. PWAs and Browser Support (2:16)
19. Using the Chrome Developer Tools (1:35)
20. Simulating the Web App on an Emulator (4:36)
21. Installing the Web App - Prerequisites (2:30)
22. Quiz: Understanding manifest.json (1:00)
23. Adding Properties for Safari (5:50)
24. Adding Properties for the Internet Explorer (2:30)
25. Wrap Up (0:28)
26. Useful Resources & Links (1:00)

Section: The Service Workers

27. Module Introduction (0:40)
28. Why Service Workers Are Amazing! (4:40)
29. Understanding Service Worker Events (6:18)
30. The Service Worker Lifecycle (5:19)
31. Service Worker Browser Support (1:24)
32. Registering a Service Worker (9:26)
33. Reacting to Incoming Events (in SW) (5:39)
34. Updating & Activating Service Workers (3:00)
35. Non-Lifecycle Events (4:49)
36. Getting that "App Install Banner" (2:40)
37. Testing the App on Real Device (and Installing the App!) (3:42)
38. Deferring the App Install Banner (6:43)
39. Wrap Up (1:20)
40. Service Worker - FAQ (1:00)
41. Useful Resources & Links (1:00)

Section: Promise and Fetch

42. Module Introduction (0:49)
43. Async Code in JavaScript (3:54)
44. Promises - Basics (4:40)
45. Rejecting Promises (4:05)
46. Where we Use Promises in our Project (2:25)
47. Fetch - Basics (6:11)
48. Sending Post Requests via Fetch (4:22)
49. Fetch and CORS (3:12)
50. Comparing Fetch and Ajax (3:04)
51. Adding Polyfills (for Legacy Browser Support) (3:29)
52. Fetch & Service Workers (2:05)
53. Assignment: Fetch & Promises (Problem) (4:44)
54. Assignment: Fetch & Promises (Solution) (8:03)
55. Wrap Up (0:56)
56. Useful Resources & Links (1:00)

Section: Service Workers - Caching

57. Module Introduction (0:43)
58. Why Caching? (3:06)
59. Understanding the Cache API (4:00)
60. Browser Support (1:49)
61. Adjusting the Course Project (2:53)
62. Identifying (Pre-)Cacheable Items (3:07)
63. Static Caching/ Precaching (11:04)
64. Retrieving Items from the Cache (4:55)
65. Adding & Retrieving Multiple Files (to/ from Cache) (3:05)
66. Cache Multiple Files with addAll (9:10)
67. Dynamic Caching - The Basics (1:54)
68. Implementing Dynamic Caching (7:19)
69. Handling Errors (2:13)
70. Adding Cache Versioning (6:56)
71. Different Cache Versions & Cleanup (6:37)
72. Optimizing Cache Management (2:42)
73. Assignment: Service Workers & Caching (Problem) (6:05)
74. Assignment: Service Workers & Caching (Solution) (21:51)
75. Wrap Up (0:35)
76. Useful Resources & Links (1:00)

Section: Service Workers - Advanced Caching

77. Module Introduction (1:12)
78. Module Preparation: Adding a Button (4:04)
79. Offering "Cache on Demand" (6:51)
80. Providing an Offline Fallback Page (6:21)
81. Strategy: Cache with Network Fallback (1:43)
82. Strategy: Cache Only (3:06)
83. Strategy: Network Only (1:57)
84. Strategy: Network with Cache Fallback (6:21)
85. Strategy: Cache then Network (9:04)
86. Cache then Network & Dynamic Caching (5:11)
87. Cache then Network with Offline Support (5:59)
88. Cache Strategies & "Routing" (3:09)
89. Applying Cache Only (5:45)
90. Assignment: Advanced Caching (Problem) (25:52)
91. Assignment: Advanced Caching (Solution) (3:54)
92. A Better Way Of Parsing Static Cache URLs (2:40)
93. Making Route Matching More Precise (1:00)
94. A Better Way Of Serving Fallback Files (2:57)
95. Post Request and Cache API (3:18)
96. Cleaning/ Trimming the Cache (6:06)
97. Getting Rid of a Service Worker (3:49)
98. Preparing the Project for the Next Steps (0:28)
99. Wrap Up (0:57)
100. Useful Resources & Links (1:00)

Section: IndexedDB and Dynamic Data

101. Module Introduction (1:01)
102. Understanding the Basics (1:12)
103. Setting Up Firebase (7:19)
104. Connecting Frontend to Backend (8:31)
105. Dynamic Caching vs. Caching Dynamic Content (4:51)
106. Introducing IndexedDB (3:34)
107. IndexedDB Browser Support (0:38)
108. Adding the IDB File (2:31)
109. Storing Fetched Posts in IndexedDB (13:11)
110. Using IndexedDB in the Service Worker (3:56)
111. Reading Data from IDB (6:40)
112. Clearing IDB & Handling Server-Client Mismatch (3:40)
113. Implementing the Clear Database Method (3:58)
114. Deleting Single Items from the Database (4:05)
115. IndexedDB and Caching Strategies (1:33)
116. Wrap Up (0:45)
117. Useful Resources & Links (1:00)

Section: Creating a Responsive User Interface (UI)

118. Module Introduction (1:18)
119. Responsive Design in this Course (2:51)
120. Understanding Responsive Design in our Project (3:30)
121. CSS and Media Queries (9:46)
122. Want to see more of your Images? (1:00)
123. Using Images in a Responsive Way (8:52)
124. Adding Animations (8:29)
125. The Viewport & Scaling (1:46)
126. Wrap Up (0:46)
127. Useful Resources & Links (1:00)

Section: Background Sync

128. Module Introduction (1:04)
129. How does Background Sync Work? (3:33)
130. Adding the Basic Setup to our Project (4:04)
131. Registering a Synchronization Task (4:37)
132. Storing our Post in IndexedDB (6:00)
133. Adding a Fallback (4:12)
134. Syncing Data in the Service Worker (15:52)
135. Understanding Periodic Sync (2:16)
136. Adding Server Side Code (15:11)
137. Fixing Errors (5:20)
138. Wrap Up (0:49)
139. Useful Resources & Links (1:00)

Section: Web Push Notifications

140. Module Introduction (1:04)
141. Why we need Web Push Notifications (1:56)
142. How Push & Notifications Work (9:04)
143. Displaying Notifications - Some Theory First (1:52)
144. Browser Support (2:02)
145. Requesting Permissions (8:07)
146. Displaying Notifications (3:38)
147. Notifications from Within the Service Worker (3:33)
148. Understanding Notifications' Options (8:49)
149. Advanced Options (2:58)
150. Adding Actions to Notifications (2:23)
151. Reacting to Notification Interaction - Clicks (5:21)
152. Reacting to Notification Interaction - Closing (2:36)
153. From Notifications to Push Messages (6:36)
154. Creating a Push Subscription (4:32)
155. Storing Subscriptions (10:50)
156. Connecting Server & Client (PWA) (1:45)
157. Sending Push Messages from the Server (9:55)
158. Listening to Push Messages (7:39)
159. Displaying Push Notifications on a Real Device (2:03)
160. Opening a Page upon User Interaction (5:45)
161. Improving our Code (4:28)
162. Wrap Up (1:16)
163. Useful Resources & Links (1:00)

Section: Native Device Features

164. Module Introduction (0:55)
165. Preparing the Project (7:28)
166. Getting DOM Access (4:35)
167. Creating our own Polyfills (8:04)
168. Getting the Video Image (7:25)
169. Hooking Up the Capture Button (6:24)
170. Storing the Image on a Server (8:40)
171. MUST READ: Firebase Cloud Functions & Billing (1:00)
172. Accepting File Upload Example with Firebase (14:36)
173. Testing the Camera & Upload (4:51)
174. Implementing a Fallback (2:30)
175. Getting the User Position (16:38)
176. Fixing Bugs (8:46)
177. Testing the App on a Real Device (1:43)
178. Wrap Up (0:47)
179. Useful Resources & Links (1:00)

Section: Service Worker Management with Workbox

180. Module Introduction (1:01)
181. Understanding the Basics (0:55)
182. The Workbox Version Used In This Course (1:00)
183. Installing Workbox & Using It (6:56)
184. Configuring Workbox Precaching (5:02)
185. Customizing the Service Worker (4:45)
186. Implementing Routing with the Workbox Router (6:41)
187. Expanding Dynamic Caching (3:31)
188. Options and Setting Up Strategies (6:09)
189. Custom Handlers (Example: For IndexedDB) (3:45)
190. Providing an Offline HTML Fallback (6:47)
191. Handling Background Synchronisation and Push Notifications (3:26)
192. Understanding the Workbox Documentation (5:17)
193. Enhancing the Build Workflow (6:30)
194. Running our App on a Real Server (3:56)
195. Auditing our Webpage with Lighthouse (4:24)
196. Wrap Up (1:11)
197. Useful Resources & Links (1:00)

Section: SPAs and PWAs

198. Module Introduction (1:18)
199. React with create-react-app (9:29)
200. A General Note about SPAs and PWAs (1:28)
201. Angular with the CLI (16:34)
202. Vue with Vue CLI (6:49)
203. Wrap Up (1:00)
204. Useful Resources & Links (1:00)

Section: Course Roundup

205. Roundup (3:21)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.