Progressive Web Apps (PWA) - From Beginner to Expert
3.3 (45 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.
570 students enrolled

Progressive Web Apps (PWA) - From Beginner to Expert

Learn How To Deliver the Best User Experiences using the Best Web Technology
3.3 (45 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.
570 students enrolled
Created by Chris Love
Last updated 6/2018
English
Current price: $10.00 Original price: $199.99 Discount: 95% off
30-Day Money-Back Guarantee
This course includes
  • 19.5 hours on-demand video
  • 24 articles
  • 45 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • How to build the best in class web applications
  • What Progresssive Web Apps Are and Why They Should Develop Them

  • How to craft the perfect Add To Homescreen Experience

  • Why all websites should be secure and how to secure them
  • What a Service Worker Is
  • How to develop Service Workers Using good JavaScript practices
  • The Service Worker Life Cycle
  • What Service Worker Caching is
  • Different Caching Strategies and How to Apply them in a real application
  • Progressive Web Application and Service Worker Tools
  • How to polyfil legacy browsers and platforms to provide many PWA features
  • How to add native push notifications to any website
Course content
Expand all 203 lectures 21:06:55
+ Course Introduction
7 lectures 59:57
Using Visual Studio Code
13:47
Installing Node
11:38
The Fast Furniture Source Code
17:45
A localhost Web Server Using Node http-server
09:11
Links to Resources
00:05
+ Progressive Web App Basics
10 lectures 01:14:14
PWA Expert Quotes
07:10
Progressive Web App Success Stories
10:43
Progressive Web App Success Stories
02:32
Web Sites Must Work Offline
04:28
Technical Upgrades and Requirements
09:52
3 Progressive Web Application Requirements
01:15
Progressive Web Application Upgrade
06:35

Review the Basic Progressive Web Application Concepts

3 Progressive Web Application Basics
3 questions
+ Who Supports Progressive Web Apps?
7 lectures 24:29
Who Supports Progressive Web Apps?
00:16
Progressive Web Apps Support Statistics
02:22
Over 1 Billion Users Have Progressive Web Application Devices
02:12
iOS Safari Limitations
06:44
iOS Safari Fallbacks
03:03

What PWA Strategy should you use for Internet Explorer?
Is Internet Explorer still a valid browser?

Internet Exporer and Progressive Web Apps
06:29
+ HTTPS Facts You Need to Know
11 lectures 01:50:32
How HTTPS Works
12:32
How TLS Works
02:58
The History of SSL
02:05
5 Reasons Why You Should Use HTTPS
15:44
5 Reasons You Should Implement HTTPS Today
10:24
HTTPS Browser Warnings
07:55
3 Types of HTTPS Certificates
07:54
Why HTTPS is Faster Than HTTP
09:03
How to Properly Implement HTTPS
18:37
HTTPS Migration Checklist
04:22
HTTP/2 Basics
18:58
+ The Web Manifest
17 lectures 01:03:40
What is the Web Manifest
10:01
Web Manifest Identity Properties - Names
02:23
Web Manifest Identity Properties - Description
00:35
Web Manifest Properties - Icons
06:06
What Icon SIzes Should Your PWA Have?
10:37
How PWABuilder.com Can Automate PWA Icon Creation
02:13
Reviewing the Full PWA Iconset in the Developer Tools
03:31
Web Manifest Identity Properties - Theme Colors
02:05
Web Manifest Identity Properties - Display
03:19
Web Manifest Identity Properties - Orientation
01:12
Web Manifest Identity Properties - Start URL
03:28
Web Manifest Identity Properties - Scope
02:42
Web Manifest Identity Properties - Related Applications
02:43
Web Manifest Mime/Content-Type
01:29
Reviewing the Fast Furniture Web Manifest File
04:40
Testing the Add to Homescreen Prompt
02:16
Before Add to Homescreen Prompt Code
04:20
+ The App Shell
6 lectures 44:16
What is An App Shell
10:45
App Shell Architecture
10:56
Critical Path Assets
04:58
Performance Impact
08:41
When Should You Use An App Shell
05:30
Advanced App Shell Concepts
03:26
+ HTML5 Forms
1 lecture 18:57

The form submission library is a small, simple library to abstract form serialization to POST JSON objects to an API endpoint.

Explaining the Form Submission Library
18:57
+ Fetch Primer
15 lectures 01:15:56
What is Fetch
06:16
Compare XHR to Fetch Code
03:58
Basic Fetch Example
07:43
Response Object
02:06
Headers Object
02:58
Body Object
03:03
Request Object
06:33
Response Types
03:19
Request Modes & CORS
03:34
Creating Custom Request Objects
00:51
Using Fetch to Retrieve JSON
11:17
Verify A Successful Response
00:56
Fetch Review
01:50
Using Fetch to Retrieve an Image
14:43
Demonstrating Posting a Form Using Fetch
06:49
+ Introduction to Service Workers
10 lectures 01:30:20
What is a Service Worker
12:10
What is a Service Worker?
13:15
What is a Service Worker?
02:03
How HTML5 Fell Short
15:06
Service Worker Capabilities
09:19
Service Workers Change the Game
03:56
How Does a Service Worker Work?
01:58
Service Worker Browser Support
06:47
Service Worker Browser Support
05:48
Progressive Web Application Checklist
19:57
+ The Service Worker Life Cycle
16 lectures 02:10:16
Introduction to Service Worker Life Cycle
01:45
The Service Worker Life Cycle
01:07
Service Worker Life Cycle Concepts
09:37
Service Worker Life Cycle Walk Through Register, Install and Activate
13:35
Service Worker Life Cycle Update Walk Through
20:42
Service Worker Installation Event
07:31
Service Worker Life Cycle Activate
05:06
Update and skipWaiting
10:20
Service Worker Automatic Update Wlk Through
07:13
Service Worker Scope
05:28
Service Worker Clients
03:32
Unregister a Service Worker
01:13
Replace Buggy Service Worker
04:21
How to Uninstall a Service Worker
13:11
How to Uninstall a Service Worker
13:48
Service Worker Life Cycle Pro Tips
11:47
Requirements
  • Students should have at least a fundamental understanding of HTML, CSS and JavaScript. It is recommended they also have a computure they can develop web sites and a preferred code editor. The example code is available via GitHub, so basic git source control knowledge is helpful. All code demonstrations are done using Visual Studio code, a free download.
Description

Progressive Web Applications are just web sites that progressively become apps. But how does this happen? It takes skilled developers that understand a new way to create web sites that are fast, reliable and engaging.

In this course you will learn what progressive web applications are, why you need to master them and why your stakeholders want progressive web applications over traditional web sites and native applications.

Businesses of all sizes are discovering the power progressive web applications bring to help them reach and engage their audiences. This means they can increase revenues while decreasing costs. Brands like Twitter, Lyft, The Washington Post, Forbes and Weather channel have all discovered the benefits upgrading to a progressive web application bring.

The success these companies are having is driving more demand for developers skilled in service workers, web manifest, push notifications and more.

You will learn how to craft an app shell so your experience can progressively load with an instant presence. I expose you to everything you need to know about progressive web applications and service workers.

This course starts each section addressing the beginner, assuming you have no prior knowledge of the topic. Each section progresses and covers more and more detail until there is just about no nook or cranny not exposed.

The course includes video modules that review a combination of slides and code demos. Slides and source code references are included so you can follow along outside the course. Quizzes are also included so you can identify topics you may need to review and sharpen. Finally, the course also includes some articles about selected topic as an additional reference.

You will master the web manifest file so you can tell the browser how to render your brand's desired experience.

HTTPS

Home Screen/Installation Experience

How each browser is and plans to implement PWA support

Service Workers

Service Worker Life Cycle

Service Worker Caching

Push Notifications

Background Synchronization

Basic Performance Best Practices and how to implement the PRPL and RAIL Patterns.

This course does not use any JavaScript frameworks. All examples, primarily a demo site called Fast Furniture, rely on vanilla JavaScript. 

The site does use Bootstrap 4 as a CSS library, but know prior Bootstrap knowledge is required.

This does not mean I wont add lectures demonstrating how to use some of the framework PWA CLI tools over time.

Who this course is for:
  • This course is designed for developers that want to create web applications using the latest web platform technology and reach the largest amount of consumers.