Complete Progressive Web App Bootcamp
What is Progessive Web App (PWA)?
PWAs are web applications created utilizing various explicit advances and standard examples to permit them to exploit both web and local application highlights. For instance, web applications are more discoverable than local applications; it’s much simpler and quicker to visit a site than to introduce an application, and you can likewise share web applications by essentially sending a connection.
Then again, local applications are better incorporated with the working framework and along these lines offer a more consistent encounter for the clients. You can introduce a local application so it works disconnected, and clients love tapping their symbols to handily get to their most loved applications, instead of exploring to it utilizing a program.
PWAs enable us to make web applications that can appreciate these equivalent favorable circumstances.
It is anything but a shiny new idea—such thoughts have been returned to commonly on the web stage with different methodologies before. Reformist Enhancement and responsive plan as of now permit us to fabricate versatile neighborly sites.
What will you learn in this course?
In this course you’ll begin dealing with your absolute first Progressive Web App (PWA) – a web application that can exploit a considerable lot of the highlights local applications have appreciated. You’ll likewise get more involvement with making a web application that works disconnected utilizing Service Workers. At last, you’ll make your application installable to the client’s home screen with the Web App Manifest file.
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.
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.
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.
Promise, async await and fetch
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
In this part, we are going to modify the project into a simpler version such that just focus on cache management. You can also download the project directly from the resources.
No network to fall back to, nothing. It serves the response from the cache ONLY. This strategy is used on assets that will never change once it is cached the first time.
With this strategy, instead of using cache only, it use network only. Let's see how to implement it in service worker
In previous lecture, we see the network first cannot handle those pages that not precached before. In this lecture, we will implement dynamic cache to handle this problem