Complete Progressive Web App Bootcamp

Learn to build discoverable, engaging Progressive Webs Apps (PWAs) from scratch,
Instructor:
Kim Chen
2,276 students enrolled
English [Auto]
What a Progressive Web App is
Use Service Workers to enable your application to work offline
Create a progressive web app that is installable to the home screen

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.

Introduction

1
Introduction

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.

2
Create pages

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

3
Create input modal and edit modal

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

4
Add the floating action button

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

5
Create icons for the progressive web app

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

6
Create manifest file

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.

7
Open the web on Android Simulator
8
iOS Simulator icon problems
9
What is service worker

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

10
Service worker lifecycle introduction

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

11
Service worker registration

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.

12
Service worker installation

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.

13
Service worker activation

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

14
Using lighthouse to audit the progressive web app

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.

15
Service worker listen fetch event

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.

16
Open the localhost of the mobile phone

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

17
Cache the core asset of the app

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

18
Return the cached assets to the app
19
Dynamic Cache

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

20
Add a fallback page
21
Limit the number of cache
22
Create Firebase project

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.

23
Add document in cloud firestore

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

24
Get realtime update with cloud firestore
25
Create the template for the contacts

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

26
Updating the UI

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

27
Configure Firestore offline persistence

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.

28
Delete document in cloud firestore

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.

29
Edit document in cloud firestore

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.

30
Toggle favorite

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

31
Render favorite pages

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

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!

Be the first to add a review.

Please, login to leave a review
a62233df13d34d53f4e4305b3c50b6eb
30-Day Money-Back Guarantee

Includes

2 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion
Don't Miss Any Course Join Our Telegram Channel Join Channel
+ +