Udemy

Platform

English

Language

Web Development

Category

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

4.70 (9142 reviews)

Students

16 hours

Content

Nov 2020

Last Update
Regular Price

EXCLUSIVE OFFER
Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will 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


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


Screenshots

Progressive Web Apps (PWA) - The Complete Guide
Progressive Web Apps (PWA) - The Complete Guide
Progressive Web Apps (PWA) - The Complete Guide
Progressive Web Apps (PWA) - The Complete Guide

Content

Getting Started

About this Course

What are Progressive Web Apps?

Join our Online Learning Community

PWAs vs Native Mobile Apps

A Demo PWA & What We'll Build in this Course

Our First Progressive Web App

PWA Core Building Blocks

Comparing PWAs and SPAs

What is "Progressive Enhancement"?

Course Outline

Course Project Setup

How to get the Most out of this Course

Understanding the App Manifest

Module Introduction

Using an App Manifest to Make your App Installable

Adding the Manifest

Understanding App Manifest Properties

Adding Properties to the App Manifest

PWAs and Browser Support

Using the Chrome Developer Tools

Simulating the Web App on an Emulator

Preparing the Emulated Device for ALL PWA Features

Installing the Web App - Prerequisites

Understanding manifest.json

Adding Properties for Safari

Adding Properties for the Internet Explorer

Wrap Up

Useful Resources & Links

The Service Workers

Module Introduction

Why Service Workers Are Amazing!

Understanding Service Worker Events

The Service Worker Lifecycle

Service Worker Browser Support

Registering a Service Worker

Reacting to Incoming Events (in SW)

Updating & Activating Service Workers

Non-Lifecycle Events

The App Install Banner & Chrome 68+

Getting that "App Install Banner"

Connecting Chrome Developer Tools to a Real/ Emulated Device

Testing the App on Real Device (and Installing the App!)

Deferring the App Install Banner

Wrap Up

Service Worker FAQ

Useful Resources & Links

Promise and Fetch

Module Introduction

Async Code in JavaScript

Promises - Basics

Rejecting Promises

Where we Use Promises in our Project

Fetch - Basics

Sending Post Requests via Fetch

Fetch and CORS

Comparing Fetch and Ajax

Adding Polyfills (for Legacy Browser Support)

Fetch & Service Workers

[OPTIONAL] Assignment Solution

Wrap Up

Useful Resources & Links

Service Workers - Caching

Module Introduction

Why Caching?

Understanding the Cache API

Browser Support

Adjusting the Course Project

Identifying (Pre-)Cacheable Items

Static Caching/ Precaching

Retrieving Items from the Cache

Adding & Retrieving Multiple Files (to/ from Cache)

Cache Multiple Files with addAll

Dynamic Caching - The Basics

Implementing Dynamic Caching

Handling Errors

Adding Cache Versioning

Different Cache Versions & Cleanup

Optimizing Cache Management

[OPTIONAL] Assignment Solution

Wrap Up

Useful Resources & Links

Service Workers - Advanced Caching

Module Introduction

Module Preparation: Adding a Button

Offering "Cache on Demand"

Providing an Offline Fallback Page

Strategy: Cache with Network Fallback

Strategy: Cache Only

Strategy: Network Only

Strategy: Network with Cache Fallback

Strategy: Cache then Network

Cache then Network & Dynamic Caching

Cache then Network with Offline Support

Cache Strategies & "Routing"

Applying Cache Only

[OPTIONAL] Assignment Solution

A Better Way Of Parsing Static Cache URLs

Making Route Matching More Precise

A Better Way Of Serving Fallback Files

Post Request and Cache API

Cleaning/ Trimming the Cache

Getting Rid of a Service Worker

Preparing the Project for the Next Steps

Wrap Up

Useful Resources & Links

IndexedDB and Dynamic Data

Module Introduction

Understanding the Basics

Changed Firebase Console Layout

Setting Up Firebase

Connecting Frontend to Backend

Dynamic Caching vs. Caching Dynamic Content

Introducing IndexedDB

IndexedDB Browser Support

Adding the IDB File

Storing Fetched Posts in IndexedDB

Using IndexedDB in the Service Worker

Reading Data from IDB

Clearing IDB & Handling Server-Client Mismatch

Implementing the Clear Database Method

Deleting Single Items from the Database

IndexedDB and Caching Strategies

Wrap Up

Useful Resources & Links

Creating a Responsive User Interface (UI)

Module Introduction

Responsive Design in this Course

Understanding Responsive Design in our Project

CSS and Media Queries

Want to see more of your Images?

Using Images in a Responsive Way

Adding Animations

The Viewport & Scaling

Wrap Up

Useful Resources & Links

Background Sync

Module Introduction

How does Background Sync Work?

Adding the Basic Setup to our Project

Registering a Synchronization Task

Storing our Post in IndexedDB

Adding a Fallback

Syncing Data in the Service Worker

Understanding Periodic Sync

Adding Server Side Code

Fixing Errors

Wrap Up

Useful Resources & Links

Web Push Notifications

Module Introduction

Why we need Web Push Notifications

How Push & Notifications Work

Displaying Notifications - Some Theory First

Browser Support

Requesting Permissions

Displaying Notifications

Notifications from Within the Service Worker

Understanding Notifications' Options

Advanced Options

Adding Actions to Notifications

Reacting to Notification Interaction - Clicks

Reacting to Notification Interaction - Closing

From Notifications to Push Messages

Creating a Push Subscription

Storing Subscriptions

Connecting Server & Client (PWA)

Sending Push Messages from the Server

Listening to Push Messages

Displaying Push Notifications on a Real Device

Opening a Page upon User Interaction

Improving our Code

Wrap Up

Useful Resources & Links

Native Device Features

Module Introduction

Preparing the Project

Getting DOM Access

Creating our own Polyfills

Getting the Video Image

Hooking Up the Capture Button

Storing the Image on a Server

Accepting File Upload Example with Firebase

MUST READ: Required Changes to Cloud Function Code

Testing the Camera & Upload

Implementing a Fallback

Getting the User Position

Fixing Bugs

Testing the App on a Real Device

Wrap Up

Useful Resources & Links

Service Worker Management with Workbox

Module Introduction

Understanding the Basics

The Workbox Version Used In This Course

Installing Workbox & Using It

Configuring Workbox Precaching

Customizing the Service Worker

Implementing Routing with the Workbox Router

Expanding Dynamic Caching

Options and Setting Up Strategies

Custom Handlers (Example: For IndexedDB)

Providing an Offline HTML Fallback

Handling Background Synchronisation and Push Notifications

Understanding the Workbox Documentation

Enhancing the Build Workflow

Running our App on a Real Server

Auditing our Webpage with Lighthouse

Wrap Up

Useful Resources & Links

SPAs and PWAs

Module Introduction

React with create-react-app

A General Note about SPAs and PWAs

Angular with the CLI

Vue with Vue CLI

Wrap Up

Useful Resources & Links

Course Roundup

Course Roundup

Bonus: More Content!


Reviews

D
Dhiren5 October 2020

Max focused very well on core foundation which is the heart of PWA. Definitely as mentioned by Max the next step is keep on practicing and practicing and practicing.

B
Brenton30 September 2020

The Workbox section is not updated (it's using v2) and so it's a mess to get through and pretty frustrating. I still give the course 5 stars because Max is a good teacher and you will learn a lot about PWAs going through this course. Great introduction and foundation on the subject.

T
Tubeta20 September 2020

I am enrolling in some courses offered taught by Max, and they are awesome, I enjoyed them and learned a lot. I can not wait to learn more about Webapp in this course.

M
Marc17 September 2020

Overall excellent course by Max, however only 3 stars because the last 2 sections utilizing Workbox need to be updated to work with latest libraries (including create-react-app).

D
Deepak13 September 2020

The basic knowledge is awesome but course should include the topic on using workbox with latest version on React without ejecting. It will be great help as there is no video available on net for this.

F
Franz23 February 2020

Max's courses are generally excellent, however this course did not exceed my expectations because it seemed a bit basic in the sense of a real application development where usually some type of framework is used. The development of a project using some current framework was going to be super valuable.

A
Ahmet13 February 2020

It is an excellent course. It gives what it promises. This course covers PWA, Caching, IndexDB and their implementation as well as Push Notification, Native device features. The course is not just a course to learn but a great guide to help you improve yourself with supplemental materials and reference resources for each topic. I strongly suggest this course. You will be enlightened!!!

B
Bill13 February 2020

the best course on PWA i learn a lot, the teacher is very well explain everything! 5 stars easy added!

Z
Zak9 February 2020

Max provides great instruction and demonstrations about all the progressive features that can be used to enhance web apps. The way it's built up step by step is useful for showing how things can be added, especially when only wanting to implement a smaller number of these features in outside projects.

I
Ian7 February 2020

Max is an exceptional lecturer. When I want to learn something new on Udemy I first look to see if he has a course available. I only wish Max did backend frameworks too!

R
Roberto21 January 2020

Very, good. Excelent didatic, energy, everything very clear and very interesting completeness of the content.

W
Walter18 January 2020

Um dos melhores professores de tech. Ja fiz varios cursos com ele. A sua organizacao e explicacao sao incriveis. Aconselho a qualquer que deseja aprender PWA a fazer este curso, pois nele os conceitos iniciais sao explicados de forma simples mas tecnica, que te oferece um conhecimento solido sobre a materia.

R
Richard18 January 2020

So far the course is great! Maximilian has a very good teaching style, making the tutorials fun and interesting. Keeps you excited and wanting to learn more.

T
Torah13 January 2020

This is a great intro to service workers and the general structure of a PWA. In some cases, I think the code could possibly be organized a bit better, but in general this course has been highly informative and clear in its explanations.

M
Malindu13 January 2020

So far, it has been amazing. I'll post another review later. If you buy a course from Maximilian Schwarzmüller, you really don't have to worry reading reviews anyway. He's the best!


1329100

Udemy ID

8/23/2017

Course created date

7/18/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram