Progressive Web Apps (PWA) - The Complete Guide 

About this Course Preview

What are Progressive Web Apps?

PWAs vs Native Mobile Apps

Our First Progressive Web App

PWA Core Building Blocks

Comparing PWAs and SPAs Preview

What is Progressive Enhancement?

Course Outline

Course Project Setup

How to get the Most out of this Course Preview

Module Introduction

Using an App Manifest to Make your App Installable

Adding the Manifest Preview

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

Installing the Web App - Prerequisites

Adding Properties for Safari

Adding Properties for the Internet Explorer Preview

Wrap Up

Module Introduction

Why Service Workers Are Amazing!

Understanding Service Worker Events

The Service Worker Lifecycle

Service Worker Browser Support Preview

Registering a Service Worker

Reacting to Incoming Events (in SW)

Updating & Activating Service Workers

Non-Lifecycle Events

Getting that App Install Banner

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

Deferring the App Install Banner Preview

Wrap Up

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

Wrap Up

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

Wrap Up

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

A Better Way Of Parsing Static Cache URLs

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

Module Introduction

Understanding the Basics

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

Module Introduction

Responsive Design in this Course

Understanding Responsive Design in our Project

CSS and Media Queries

Using Images in a Responsive Way

Adding Animations

The Viewport & Scaling

Wrap Up

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

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

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

Testing the Camera & Upload

Implementing a Fallback

Getting the User Position

Fixing Bugs

Testing the App on a Real Device

Wrap Up

Module Introduction

Understanding the Basics

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

Module Introduction

React with create-react-app

A General Note about SPAs and PWAs

Angular with the CLI

Vue with Vue CLI

Wrap Up

Course Roundup