Complete Progressive Web App Bootcamp

In this part, we will introduce what we are going to make. We are going to create a progressive web app with the use of the firestore, user can add contacts, favorite the contacts and of course edit and delete the contact even in the offline situation. Why? Since this is progressive web app.

First, we are going to create different pages with the use of the materializecss.

After we create the basic structure for this progressive web app. We are going to add the modals and also the necessary JavaScript.

In this part, we are going to add the materialize css button, which is for trigger the add contact modal.

In this part, we go to create app icon for this progressive web app. This is the icon for the desktop and mobile app.

The manifest file tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. Let's create the manifest file together.

In this part, we will briefly introduce what is service worker and how it enhance the web page.

Every service worker goes through three steps in its life cycle--registration, installation, and activation. In this part, we will briefly introduce these three steps

In this part, we will do the service worker registration process. We will first check whether the browser support service worker, after that we register the service worker.

The installation process of the service worker is to allow the pwa to cache all the necessary asset like icons, css and javascript. Let's take a look on how to add the installation process.

In this part, we will show when the service worker is activated.

In this part we will use the light house of google chrome developer tools to check the problems of the PWA. Then we will fix it one by one.

Before make the app installable, we have to meet the criteria, so we need to add the fetch event listener inside the service work. So let's learn how to do it.

Typing localhost inside android real device or emulator cannot access the website as localhost. This part will show you how to fix it and meet the installable criteria

In this part, we will go to cache all the core assets to the cache. So in case the app offline, the app still can be displayed rather than a chrome default no internet page

It is not make sense/ possible to cache all the pages of an app to the assests. Instead, we use the dynamic cache to cache the pages that we visited. Let's learn how to do it

Sometime the page we haven't visited before. Instead of showing the default error page, we want to show our own customized fallback. Here will show you how.

When we keep browsing more and more page, we will store a lot of cache at last. We want to limit the size so the cache will not get huge.

Since we need to use the firebase as a backend, we need to go to firebase to create a new project. And the we need to copy and paste the config file to our project.

After we create a new project, it's time to add the data to cloud firestore. Let's learn how to do it

In this part, we get realtime updates with cloud firestore

In this part, we will create a template for each contact, so in the next lecture, we can use this to render the contacts.

In the last lecture, we already created the template, now it's time to render it out.

We will not cache the firestore data in the service worker. Instead we will implement firebase firestore offline persistence. This can render the data even offline.

In this part, we will implement the delete document to this PWA, it will delete the document in firestore and also remove the data in the UI.

In this part, we will implement the edit document to this PWA, it will edit the document in firestore and also edit the data in the UI.

In this part, we will implement the toggle favorite function.

In this part, we will render the favorites in the favorites page.

Last lecture we already see the problem of random order of the data response. In this lecture, we will use callback to fix this problem