Progressive Web Application Development
4.8 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
91 students enrolled

Progressive Web Application Development

Learn the skills to build blazingly fast applications which look just like your native mobile app.
4.8 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
91 students enrolled
Created by Packt Publishing
Last updated 4/2018
English
English [Auto]
Current price: $86.99 Original price: $124.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build web apps that look and feel like native mobile apps
  • Leverage new web technologies such as the Fetch API and promises.
  • Audit and improve a PWA with different tools
  • Convert an existing app to a PWA
  • Boost your web app speed with the help of progressive enhancements and approaches.
  • Increase user engagement by using push notifications
  • In-depth details about service workers
  • Offline storage and different caching APIs.
Course content
Expand all 56 lectures 07:02:54
+ Introduction to PWA
7 lectures 23:01
This video will give you an overview about the course.
Preview 04:16

This video aim to show what really is PWA terms and what are the capabilities and why it’s important now.

What Really is a PWA?
03:38

The goal of the video is to show the core concepts behinds PWA.

PWA Core Concepts
02:39
In this video we will dive into theory behind PRPL pattern.
What is PRPL Pattern?
02:24

This video aims to show what will achieve as our final project by the end of the course.

Demo of Final Course Project
02:42

In this video we aim to show leaner that how many options we have to create responsive app.

Responsive UI
02:31

In this video we will learn how to use and setup all required tools and sources.

Tools Overview and Setup
04:51
+ Understanding Web App Manifest
6 lectures 32:42
This video aims to show what is manifest. json and will review all properties.
Preview 08:55

This video aims to show how we can add manifest.json to the app and how we can add properties to it.

Add Properties to manifest.json
08:10
This video aims to show the requirements for the install-banner prompt.
Prerequisites for Installing Web App
02:22
This video aims to show how to debug a manifest.json file and what its effects on an emulator.
Run Android Emulator and Leverage Chrome Dev Tools for Debugging
05:23

This video aims to show more meta tags in order to bring better user experience on safari.

Add Properties for Safari
03:34

In this video we will learn how to improve the user experience for IE users.

Add Properties for Internet Explorer
04:18
+ Service Worker
11 lectures 01:28:47
This video aims to ensure that the learner understands callbacks and promise inside-out.
Preview 16:06

This video, aims to explain fetch api and ensure learner knows how to use it.

Fetch API
13:15

This video, will deep dive into service worker concepts and the way that it works.

What Is a Service Worker and How it Works?
03:49
The video aims to show all possible events in service worker.
Events in Service Worker
02:55

This video aims to ensure that the user has a good and deep understanding of service worker life cycle.

Service Worker Lifecycle
04:02

This video will emphasize on how scope is defined and why is so important.

Scope Working for a Service Worker
01:07

This video aims to show how user can create, install and listen to different event in service worker.

Register, Update, and Activate SW
11:57
In this video, we will learn how an install service worker can be debugged and how skip Waiting works, as well as understand the best practices and tips.
Debug Our Service Worker
07:49
The aim of this video is to add service worker to a project with manifest. json and show how it will appear and how we can defer it.
Install App Banner and Control Over it
11:17
In this video, we will learn how to connect a real device and an emulator to chrome dev tools and how to inspect on them.
Debug and Test on Android Emulated Device
08:24
In this video we will practice with our project whatever we learnt about service worker.
Practice with Our Final App Project
08:06
+ Cache and Offline Support
11 lectures 01:28:52

This video aims to show how many options we have for storage in client side.

Preview 03:37

In this video we will go through cache api.

Cache API
03:43
In this video, we will learn about pre-caching and how to store static assets in cache.
Pre-Caching/Static Caching
04:11

This is very short video to motivate you to write ES6 syntax.

ES6 Overview
02:46
This video aims to show you to add assets and data into cache.
Add, Update Cache
09:41
The goal of this video is to learn how to intercept request and responded from cache
Respond with Cache
06:03
In this video we will learn how to catch request which are not available in cache and add them to cache
Dynamic Caching Upon Fetch
10:50

This video aims to explain how to respond to offline placeholders.

Offline Respond Placeholders
07:21

In this video, we will clean up our caches which are not in use any more in order to keep our storage clean and as useful as possible.

Remove/Cleanup Caches
13:06
In this video we will learn about the different strategies for purposes.
Caching Strategies
14:47
This video aims to implement everything in final project and wrap up the section
Practice with Our Final App Project
12:47
+ Dynamic Content Cache
4 lectures 39:34

In this video we will dive into IndexedDB and will write and store our data to it.

Preview 12:03

This Video helps to learn how to get access to data which has been stored in indexedDB and how to delete them.

IndexedDB/Retrieve and Delete
06:16
This video aims to show 3rd party libraries which can help to create easier service worker for caching and implementing different strategy.
Tools to Help Create Cache and Service Worker
09:19
In this video we will implement whatever we have learnt into our final application.
Practice with Our Final App Project
11:56
+ Deployment to Firebase
3 lectures 12:34

In this video, we will learn about Firebase and will setup our CLI.

Preview 04:45

In this video we will learn to clean up and install all dependencies in order to make our app ready to deploy.

Make Our App Ready to Deploy
04:06

The goal of this video is deploy our app to Firebase and get access to host/database and functions on Firebase.

Deploy to Firebase
03:43
+ Background Sync
5 lectures 42:44

The video aim is to help students understand how background sync works.

Preview 02:36

This video aims to show how we can register a tag/task for synchronization.

Register a Synchronization Task
09:31
The goal of the video is to show one strategy to store data in client side when user is offline and sync them back when user has internet again.
Storing Our Data in IndexedDB and Firebase
11:51

In this video, we will lean how to listen to our registered tag and send data to server.

Syncing Data in Server Worker with Server
14:38
The goal of the video is to show another type of sync which has not been implemented in any of the browsers yet.
Periodic Sync
04:08
+ Push Notification
5 lectures 43:47

The video aims to help students understand how push notification works.

Preview 02:13

The goal of this video is to show notification prompt and after allowing, show a notification.

Request Permission, Subscription, and Display Notification
07:00
In this video we will secure our user subscription keys and store in our backend database.
Store Client Subscription and Secure It in Backend
14:36
In this video we will send our push notification to our subscriptions endpoint.
Send Notification from Server and Listen from Service Worker
13:25

The video aims to show how we can delete those endpoints that are not valid anymore.

Clean Up Subscriptions
06:33
+ PWA with SPA
4 lectures 50:53

The goal of this video is to show how to setup service worker module in angular and convert an angular app to an offline angular app.

Preview 14:26
This video will show how you can easily leverage using create-react-app to build a progressive web app out of the web and how to do more by ejecting Webpack configuration.
PWA in a React App
08:28
In this video, we will learn how to use Vue-cli and PWA template to make a Vue project which convers PWA principle out of the box.
PWA in a Vue App
08:55

In this video we are going to talk about Ember.js and use Ember cli to make a fully offline single page application.

PWA in an Ember App
19:04
Requirements
  • A basic knowledge of HTML and CSS will be useful, but is not mandatory
Description

This course teaches you how to build discoverable and engaging progressive web applications (PWAs) using the Cache API to make it offline-ready and blazingly fast service workers to intercept network requests and web app manifests, thus leveraging native-like features.

We begin by introducing the core concepts of progressive web apps, explaining each of them in detail and finishing up by implementing them into a production-ready app.

A service worker is the main PWA tool. In this course, you will master the power of new APIs including the Fetch API, promises, and more. Don't lose your users when their internet connection is lost; get hands-on with powerful caching and network request strategies to provide synchronization of data while your app is offline. Learn how to improve user engagement with your apps by adding push notifications.

We also cover app manifests in depth to let your users add your application to their mobile home screen and reopen the app as easily as tabbing on the web app icon, just as with other native mobile apps. They'll also surf while there is no address bar; the user experience feels like a native mobile app due to the addition of a splash screen, application shell, native default color, and more.

Tools are always helpful while developing software; therefore, this course teaches you how to boost your productivity by using Workbox, to make service worker management a lot easier, and Lighthouse, to show your PWA score demonstrate and how you can achieve 100/100.

All of the topics in this course feed into a practical project which, by the end of the course, is ready to deploy to production. To ensure that the app is useful for any kind of project later and also that you can learn everything in depth, the course project is created in pure JS/CSS/HTML.

Last but not least, SPAs (Single Page Applications) are super-critical as these days they perform such a leading role in web development and building hybrid and native mobile apps. Therefore, this course dedicates a section to show you how you can use Angular, React, Ember, and Vue.js to build a progressive web application.

About the Author

Majid Hajian is a software engineer with a passion for frontend technologies who has been worked over 9 years in this field.

He is very involved in open source projects; he also helps to organize meetups and conferences around the world such as Vue.js, Angular and is a mobile meetup co-organizer in Oslo.

Majid is also a public technical speaker, a trainer, and a blogger.

If you want to get in touch with him feel free to contact him on Twitter (@mhadaily).

Who this course is for:
  • This course is aimed at developers and engineers who want to build blazingly fast web applications.