W3docs
en
Log in

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 course

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!

Course content

Section 1Getting 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
    1:00
  • 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

Section 2Understanding the App Manifest

  • Module IntroductionPremium
    1:01
  • Using an App Manifest to Make your App InstallablePremium
    1:36
  • Adding the ManifestPremium
    3:40
  • Understanding App Manifest PropertiesPremium
    9:43
  • Adding Properties to the App ManifestPremium
    9:44
  • PWAs and Browser SupportPremium
    2:16
  • Using the Chrome Developer ToolsPremium
    1:35
  • Simulating the Web App on an EmulatorPremium
    4:36
  • Installing the Web App - PrerequisitesPremium
    2:30
  • Quiz: Understanding manifest.jsonPremium
    1:00
  • Adding Properties for SafariPremium
    5:50
  • Adding Properties for the Internet ExplorerPremium
    2:30
  • Wrap UpPremium
    0:28
  • Useful Resources & LinksPremium
    1:00

Section 3The Service Workers

  • Module IntroductionPremium
    0:40
  • Why Service Workers Are Amazing!Premium
    4:40
  • Understanding Service Worker EventsPremium
    6:18
  • The Service Worker LifecyclePremium
    5:19
  • Service Worker Browser SupportPremium
    1:24
  • Registering a Service WorkerPremium
    9:26
  • Reacting to Incoming Events (in SW)Premium
    5:39
  • Updating & Activating Service WorkersPremium
    3:00
  • Non-Lifecycle EventsPremium
    4:49
  • Getting that "App Install Banner"Premium
    2:40
  • Testing the App on Real Device (and Installing the App!)Premium
    3:42
  • Deferring the App Install BannerPremium
    6:43
  • Wrap UpPremium
    1:20
  • Service Worker - FAQPremium
    1:00
  • Useful Resources & LinksPremium
    1:00

Section 4Promise and Fetch

  • Module IntroductionPremium
    0:49
  • Async Code in JavaScriptPremium
    3:54
  • Promises - BasicsPremium
    4:40
  • Rejecting PromisesPremium
    4:05
  • Where we Use Promises in our ProjectPremium
    2:25
  • Fetch - BasicsPremium
    6:11
  • Sending Post Requests via FetchPremium
    4:22
  • Fetch and CORSPremium
    3:12
  • Comparing Fetch and AjaxPremium
    3:04
  • Adding Polyfills (for Legacy Browser Support)Premium
    3:29
  • Fetch & Service WorkersPremium
    2:05
  • Assignment: Fetch & Promises (Problem)Premium
    4:44
  • Assignment: Fetch & Promises (Solution)Premium
    8:03
  • Wrap UpPremium
    0:56
  • Useful Resources & LinksPremium
    1:00

Section 5Service Workers - Caching

  • Module IntroductionPremium
    0:43
  • Why Caching?Premium
    3:06
  • Understanding the Cache APIPremium
    4:00
  • Browser SupportPremium
    1:49
  • Adjusting the Course ProjectPremium
    2:53
  • Identifying (Pre-)Cacheable ItemsPremium
    3:07
  • Static Caching/ PrecachingPremium
    11:04
  • Retrieving Items from the CachePremium
    4:55
  • Adding & Retrieving Multiple Files (to/ from Cache)Premium
    3:05
  • Cache Multiple Files with addAllPremium
    9:10
  • Dynamic Caching - The BasicsPremium
    1:54
  • Implementing Dynamic CachingPremium
    7:19
  • Handling ErrorsPremium
    2:13
  • Adding Cache VersioningPremium
    6:56
  • Different Cache Versions & CleanupPremium
    6:37
  • Optimizing Cache ManagementPremium
    2:42
  • Assignment: Service Workers & Caching (Problem)Premium
    6:05
  • Assignment: Service Workers & Caching (Solution)Premium
    21:51
  • Wrap UpPremium
    0:35
  • Useful Resources & LinksPremium
    1:00

Section 6Service Workers - Advanced Caching

  • Module IntroductionPremium
    1:12
  • Module Preparation: Adding a ButtonPremium
    4:04
  • Offering "Cache on Demand"Premium
    6:51
  • Providing an Offline Fallback PagePremium
    6:21
  • Strategy: Cache with Network FallbackPremium
    1:43
  • Strategy: Cache OnlyPremium
    3:06
  • Strategy: Network OnlyPremium
    1:57
  • Strategy: Network with Cache FallbackPremium
    6:21
  • Strategy: Cache then NetworkPremium
    9:04
  • Cache then Network & Dynamic CachingPremium
    5:11
  • Cache then Network with Offline SupportPremium
    5:59
  • Cache Strategies & "Routing"Premium
    3:09
  • Applying Cache OnlyPremium
    5:45
  • Assignment: Advanced Caching (Problem)Premium
    25:52
  • Assignment: Advanced Caching (Solution)Premium
    3:54
  • A Better Way Of Parsing Static Cache URLsPremium
    2:40
  • Making Route Matching More PrecisePremium
    1:00
  • A Better Way Of Serving Fallback FilesPremium
    2:57
  • Post Request and Cache APIPremium
    3:18
  • Cleaning/ Trimming the CachePremium
    6:06
  • Getting Rid of a Service WorkerPremium
    3:49
  • Preparing the Project for the Next StepsPremium
    0:28
  • Wrap UpPremium
    0:57
  • Useful Resources & LinksPremium
    1:00

Section 7IndexedDB and Dynamic Data

  • Module IntroductionPremium
    1:01
  • Understanding the BasicsPremium
    1:12
  • Setting Up FirebasePremium
    7:19
  • Connecting Frontend to BackendPremium
    8:31
  • Dynamic Caching vs. Caching Dynamic ContentPremium
    4:51
  • Introducing IndexedDBPremium
    3:34
  • IndexedDB Browser SupportPremium
    0:38
  • Adding the IDB FilePremium
    2:31
  • Storing Fetched Posts in IndexedDBPremium
    13:11
  • Using IndexedDB in the Service WorkerPremium
    3:56
  • Reading Data from IDBPremium
    6:40
  • Clearing IDB & Handling Server-Client MismatchPremium
    3:40
  • Implementing the Clear Database MethodPremium
    3:58
  • Deleting Single Items from the DatabasePremium
    4:05
  • IndexedDB and Caching StrategiesPremium
    1:33
  • Wrap UpPremium
    0:45
  • Useful Resources & LinksPremium
    1:00

Section 8Creating a Responsive User Interface (UI)

  • Module IntroductionPremium
    1:18
  • Responsive Design in this CoursePremium
    2:51
  • Understanding Responsive Design in our ProjectPremium
    3:30
  • CSS and Media QueriesPremium
    9:46
  • Want to see more of your Images?Premium
    1:00
  • Using Images in a Responsive WayPremium
    8:52
  • Adding AnimationsPremium
    8:29
  • The Viewport & ScalingPremium
    1:46
  • Wrap UpPremium
    0:46
  • Useful Resources & LinksPremium
    1:00

Section 9Background Sync

  • Module IntroductionPremium
    1:04
  • How does Background Sync Work?Premium
    3:33
  • Adding the Basic Setup to our ProjectPremium
    4:04
  • Registering a Synchronization TaskPremium
    4:37
  • Storing our Post in IndexedDBPremium
    6:00
  • Adding a FallbackPremium
    4:12
  • Syncing Data in the Service WorkerPremium
    15:52
  • Understanding Periodic SyncPremium
    2:16
  • Adding Server Side CodePremium
    15:11
  • Fixing ErrorsPremium
    5:20
  • Wrap UpPremium
    0:49
  • Useful Resources & LinksPremium
    1:00

Section 10Web Push Notifications

  • Module IntroductionPremium
    1:04
  • Why we need Web Push NotificationsPremium
    1:56
  • How Push & Notifications WorkPremium
    9:04
  • Displaying Notifications - Some Theory FirstPremium
    1:52
  • Browser SupportPremium
    2:02
  • Requesting PermissionsPremium
    8:07
  • Displaying NotificationsPremium
    3:38
  • Notifications from Within the Service WorkerPremium
    3:33
  • Understanding Notifications' OptionsPremium
    8:49
  • Advanced OptionsPremium
    2:58
  • Adding Actions to NotificationsPremium
    2:23
  • Reacting to Notification Interaction - ClicksPremium
    5:21
  • Reacting to Notification Interaction - ClosingPremium
    2:36
  • From Notifications to Push MessagesPremium
    6:36
  • Creating a Push SubscriptionPremium
    4:32
  • Storing SubscriptionsPremium
    10:50
  • Connecting Server & Client (PWA)Premium
    1:45
  • Sending Push Messages from the ServerPremium
    9:55
  • Listening to Push MessagesPremium
    7:39
  • Displaying Push Notifications on a Real DevicePremium
    2:03
  • Opening a Page upon User InteractionPremium
    5:45
  • Improving our CodePremium
    4:28
  • Wrap UpPremium
    1:16
  • Useful Resources & LinksPremium
    1:00

Section 11Native Device Features

  • Module IntroductionPremium
    0:55
  • Preparing the ProjectPremium
    7:28
  • Getting DOM AccessPremium
    4:35
  • Creating our own PolyfillsPremium
    8:04
  • Getting the Video ImagePremium
    7:25
  • Hooking Up the Capture ButtonPremium
    6:24
  • Storing the Image on a ServerPremium
    8:40
  • MUST READ: Firebase Cloud Functions & BillingPremium
    1:00
  • Accepting File Upload Example with FirebasePremium
    14:36
  • Testing the Camera & UploadPremium
    4:51
  • Implementing a FallbackPremium
    2:30
  • Getting the User PositionPremium
    16:38
  • Fixing BugsPremium
    8:46
  • Testing the App on a Real DevicePremium
    1:43
  • Wrap UpPremium
    0:47
  • Useful Resources & LinksPremium
    1:00

Section 12Service Worker Management with Workbox

  • Module IntroductionPremium
    1:01
  • Understanding the BasicsPremium
    0:55
  • The Workbox Version Used In This CoursePremium
    1:00
  • Installing Workbox & Using ItPremium
    6:56
  • Configuring Workbox PrecachingPremium
    5:02
  • Customizing the Service WorkerPremium
    4:45
  • Implementing Routing with the Workbox RouterPremium
    6:41
  • Expanding Dynamic CachingPremium
    3:31
  • Options and Setting Up StrategiesPremium
    6:09
  • Custom Handlers (Example: For IndexedDB)Premium
    3:45
  • Providing an Offline HTML FallbackPremium
    6:47
  • Handling Background Synchronisation and Push NotificationsPremium
    3:26
  • Understanding the Workbox DocumentationPremium
    5:17
  • Enhancing the Build WorkflowPremium
    6:30
  • Running our App on a Real ServerPremium
    3:56
  • Auditing our Webpage with LighthousePremium
    4:24
  • Wrap UpPremium
    1:11
  • Useful Resources & LinksPremium
    1:00

Section 13SPAs and PWAs

  • Module IntroductionPremium
    1:18
  • React with create-react-appPremium
    9:29
  • A General Note about SPAs and PWAsPremium
    1:28
  • Angular with the CLIPremium
    16:34
  • Vue with Vue CLIPremium
    6:49
  • Wrap UpPremium
    1:00
  • Useful Resources & LinksPremium
    1:00

Section 14Course Roundup

  • RoundupPremium
    3:21

Course instructor

Photo of Maximilian Schwarzmüller

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.