FREE Ep1 - Progressive Web App? Why you should care?

Offline-First became a new trend in modern web development. Let's take a look at the high level overview on what it takes to build a PWA.

FREE Ep2 - Service Worker Overview

Service worker is one of the core elements in building a PWA

PREMIUM Ep3 - Dedicated Web Worker

Web workers are able to the main browser thread to run tasks in the background.

PREMIUM Ep4 - Shared Web worker

Shared workers are shared across multiple tabs.It is now possible for browser tabs / windows to communicate with each other.

PREMIUM Ep5 - Indexed DB Overview

Indexed DB is a powerful database located right in the browser.We will find out more about it in this lesson. https://github.com/jakearchibald/idb

PREMIUM Ep6 - Service Worker Basics

Let's look at the fundamentals of the service worker.

PREMIUM Ep7 - Setting up SW in Vite

Since Vite is our chosen bundler, we will take a look at setting up service worker in Vite.

PREMIUM Ep8 - Cache assets

The cache storage is a built-in storage in the browser that helps us to store HTTP resources easily.

PREMIUM Ep9 - Workbox Intro

Workbox is a SW library that aims speed up our service worker development. Note: I made a mistake in this lesson.We should use the "writeBundle" hook instead of "generateBundle".A more detailed explanation is in ep10.

PREMIUM Ep10 - Inject manifest

Let's learn how we could write our own customised sw script by using the inject manifest option.

PREMIUM Ep11 - Vite PWA plugin Configs

The Vite PWA plugin offers us plenty of config options to customise our SW.

PREMIUM Ep12 - Installable PWA

Let's learn how to make our web app installable just like any other native apps.

PREMIUM Ep13 - Routing and Caching Strategies

There are a variety ways to cache assets. Let's talk about them here.

PREMIUM Ep14 - Removing buggy sw -- No-op Service worker

Here's what to do if we accidentally deployed a buggy sw to production.

PREMIUM Ep15 - Real world PWA Demo Intro

Let's build a real world PWA. We will be creating a note taking app that works fully offline.

PREMIUM Ep16 - SW design and engineering overview

Let's talk about the technical challenges and design to create an offline PWA.

PREMIUM Ep17 - Setup Project: Frontend

We will initialise our project's folder structure and scaffold the base layout.

PREMIUM Ep18 - Mantine layout and Sidebar

Let's learn the basics of Mantine layout system and build our project's sidebar.

PREMIUM Ep19 - Api server and database

We need a backend API server, let's build one with express.

PREMIUM Ep20 - Proxy HTTP request to Api Server in Vite

By default, our client wont just send the API request to our server. Let's fix this.

PREMIUM Ep21 - Note list and Single Note Pages

Let's build the remaining pages in our app.

PREMIUM Ep22 - Setting up Service Worker

Now that we have setup the foundation of our frontend, let's start building our service worker.

PREMIUM Ep23 - Offline Database and handling offline GET

We need an offline IDB database to store our models.

PREMIUM Ep24 - Offline Get by ID, Request queue and Create

We'll talk about creating an offline record and getting a single record.

PREMIUM Ep25 - Offline Update

Let's see how do we update an offline note.

PREMIUM Ep26 - Offline Delete

We will learn how to delete a note while we are offline.

PREMIUM Ep27 - Syncing Offline Data to Server

When we are back online, we need to sync all the changes we made offline to the API server.

PREMIUM Ep28 - Sync notification

Let's see how we could manage sync notification.

PREMIUM Ep29 - Update prompt

We need to prompt the user to update our PWA when we deploy a new version of our service worker.