Udemy

Platform

English

Language

Web Development

Category

Progressive Web Apps (PWA) - From Beginner to Expert

Learn How To Deliver the Best User Experiences using the Best Web Technology

4.30 (78 reviews)

Students

21 hours

Content

Jun 2018

Last Update
Regular Price

EXCLUSIVE OFFER
Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will 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


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.


Screenshots

Progressive Web Apps (PWA) - From Beginner to Expert
Progressive Web Apps (PWA) - From Beginner to Expert
Progressive Web Apps (PWA) - From Beginner to Expert
Progressive Web Apps (PWA) - From Beginner to Expert

Content

Course Introduction

About the Course

Fast Furniture – The Reference PWA

Using Visual Studio Code

Installing Node

The Fast Furniture Source Code

A localhost Web Server Using Node http-server

Links to Resources

Progressive Web App Basics

A New Level of Quality

Fast Reliable Engaging

Web vs App Smack Down

PWA Expert Quotes

Progressive Web App Success Stories

Progressive Web App Success Stories

Web Sites Must Work Offline

Technical Upgrades and Requirements

3 Progressive Web Application Requirements

Progressive Web Application Upgrade

3 Progressive Web Application Basics

Who Supports Progressive Web Apps?

Who Supports Progressive Web Apps?

Browsers that Support Progressive Web Apps

Progressive Web Apps Support Statistics

Over 1 Billion Users Have Progressive Web Application Devices

iOS Safari Limitations

iOS Safari Fallbacks

Internet Exporer and Progressive Web Apps

HTTPS Facts You Need to Know

How HTTPS Works

How TLS Works

The History of SSL

5 Reasons Why You Should Use HTTPS

5 Reasons You Should Implement HTTPS Today

HTTPS Browser Warnings

3 Types of HTTPS Certificates

Why HTTPS is Faster Than HTTP

How to Properly Implement HTTPS

HTTPS Migration Checklist

HTTP/2 Basics

The Web Manifest

What is the Web Manifest

Web Manifest Identity Properties - Names

Web Manifest Identity Properties - Description

Web Manifest Properties - Icons

What Icon SIzes Should Your PWA Have?

How PWABuilder.com Can Automate PWA Icon Creation

Reviewing the Full PWA Iconset in the Developer Tools

Web Manifest Identity Properties - Theme Colors

Web Manifest Identity Properties - Display

Web Manifest Identity Properties - Orientation

Web Manifest Identity Properties - Start URL

Web Manifest Identity Properties - Scope

Web Manifest Identity Properties - Related Applications

Web Manifest Mime/Content-Type

Reviewing the Fast Furniture Web Manifest File

Testing the Add to Homescreen Prompt

Before Add to Homescreen Prompt Code

The App Shell

What is An App Shell

App Shell Architecture

Critical Path Assets

Performance Impact

When Should You Use An App Shell

Advanced App Shell Concepts

HTML5 Forms

Explaining the Form Submission Library

Fetch Primer

What is Fetch

Compare XHR to Fetch Code

Basic Fetch Example

Response Object

Headers Object

Body Object

Request Object

Response Types

Request Modes & CORS

Creating Custom Request Objects

Using Fetch to Retrieve JSON

Verify A Successful Response

Fetch Review

Using Fetch to Retrieve an Image

Demonstrating Posting a Form Using Fetch

Introduction to Service Workers

What is a Service Worker

What is a Service Worker?

What is a Service Worker?

How HTML5 Fell Short

Service Worker Capabilities

Service Workers Change the Game

How Does a Service Worker Work?

Service Worker Browser Support

Service Worker Browser Support

Progressive Web Application Checklist

The Service Worker Life Cycle

Introduction to Service Worker Life Cycle

The Service Worker Life Cycle

Service Worker Life Cycle Concepts

Service Worker Life Cycle Walk Through Register, Install and Activate

Service Worker Life Cycle Update Walk Through

Service Worker Installation Event

Service Worker Life Cycle Activate

Update and skipWaiting

Service Worker Automatic Update Wlk Through

Service Worker Scope

Service Worker Clients

Unregister a Service Worker

Replace Buggy Service Worker

How to Uninstall a Service Worker

How to Uninstall a Service Worker

Service Worker Life Cycle Pro Tips

Introduction to the Service Worker Cache API

Network Connectivity Conditions

Cache API Concepts

Caches Object

Cache AddAll Method

Cache Keys and Update

Service Worker Fetch Event

Intro to Service Worker Caching

Intro to Service Worker Caching Code Walk Through

Advantages of Service Worker Caching

Creating a Custom Response in the Service Worker Fetch Event Handler

Service Worker Caching Strategies

PreCache - On Install as a Dependency Concept

PreCache - On Install as a Dependency - Code Demonstration

On Install as Dependency - Concept

On Insntall Not As Dependency Concepts

On Install Not as Dependency - Code Demonstration

On Activate - Concept

On Activate - Code Demonstration

On User Interaction - Concept

On User Interaction - Code Demonstration

On Network Response Concept

On Network Response Code Demonstration

Stale-While-Revalidate Concept

Stale-While-Revalidate Code Demonstration

On Push Message Concept

On Push Message Code Demonstration

On Push Message Code Demonstration

On Background Sync Concept

Cache Only Concept

Cache Only Code Demonstration

Network Only Concept

Network Only Code Demonstration

Cache, Falling Back to Network Concept

Cache, Falling Back to Network Code Demonstration

Cache & Network Race Concept

Cache & Network Race Code Demonstration

Network Falling Back to Cache Concept

Network Falling Back to Cache Code Demonstration

Cache then Network Concept

Cache then Network Code Demonstration

Generic Fallback Concept

Generic Fallback Code Demonstration

Service Worker Templating Concept

Service Worker Templating Code Demonstration

Web Storage

What is Web Storage

Web Storage Types

Web Storage Feature Detection

Saving Values to Web Storage

Getting Values from Web Storage

Interating over Web Storage Values

Deleting Web Storage Values

The Storage Event

Web Storage Limitations

Review the Settings localStorage Abstraction Library

Persisting User Settings in localStorage

Debugging the Settings localStorage Module

Applied Service Worker Caching

Refactoring and Utility functions

Fetch Event Should Cache Function

Fetch Event Fetch Function

Caching Demo

Caching Demo trimCache

Caching Demo offline fallback

What is the Service Worker Cache Storage Limit?

Service Worker Tools

Introduction to Workbox

Install WorkBox CLI Globally and Library Locally

Configuring Workbox to Precache Assets

Managing Routes in WorkBox

Dynamic Caching with Workbox

Workbox Resources

Push Notifications

Intro to Push Notifications

Push Notification API Concepts

Push Code Concepts

Subscribe the User Code Walk Through

Responding to a Push Event Code Walk Through

Push Notification Quiz

Microsoft Windows, Edge and Progressive Web Apps

Microsoft's Progressive Web Application Strategy

Microsoft Windows and Progressive Web Applications

Microsoft's Recommended Progressive Web App Features

Windows Platform Integration

What is a Microsoft Hosted Web App?

Hosted Web Application Examples

What is PWABuilder?

Using PWABuilder to Scaffold a Progressive Web Application

PWABuilder GitHub Page

PWABuilder Image Generation

Microsoft Progressive Web Application Release Date

Internet Explorer Pinned Sites

Mozilla FireFox and Progressive Web Applications

FireFox on Android Add to Homescreen Experience

Progressive Web Applications and Browser Developer Tools

Debugging a Service Worker Using Chrome Developer Tools

Chrome Service Worker Developer Tools

Debugging a Service Worker in FireFox

Inspecting Your Cache Using the FireFox Developer Tools

Using Lighthouse

What is Project Lighthouse?

Using Project Lighthouse in the Chrome Developer Tools

Using Sonar To Validate Your Web Site

Using Sonar To Audit A Web Page

Adding PWA Features to iOS Safari

Introduction to iOS Safari PWA Polyfils

A Review of How appCache Works

How Polyfil Caching Works

Caching Options and How to Control Cache Size

Using appCache to Go Offline

Dynamically Load and Cache Data Using AJAX and Browser Storage

Configuring the iOS Add to Homescreen Experience

Creating a Mobile Web Application on the iPhone and iPad

Reviewing Progressive Web Applications

Course Summary

Bonus Material


Reviews

c
carlos25 May 2020

Not really understand the point of showing the IDE on second video, but I will see what’s next if there is a point of why the whole explanation on the IDE then make it at the beginning of the video

H
Herbert27 March 2020

The few rough spots in the course (slightly dated material, varying standards, e.g. e or event) are not an issue but could be cleaned up if time permits. This course clearly provides insight into the underpinnings of Progressive Web Apps. It is a lot to digest and the instructor knows that not every concept will be understood immediately by the learner so he edits his commentary very well. Final note: There are a few videos which have different titles but are in fact the same video. Usually back to back and are marked with the same duration in minutes.

J
Jon12 November 2019

A bit long and very thorough. You can skip to the parts which interest you, of course. Most of the course is good quality there are some random quality issues like videos cutting off, audio issues. But 24 hours of content there are going to be hick ups. I think it would have been nice if the author of the course would have organized the lectures a little more so there would be less repetition. But then again the repetition is kind of nice just so I can remember the concepts more. Of course, this is my first time through the course just to get a general over and then I will go back and rewatch/reread the parts that I need to.

M
Miguel28 February 2019

There are lots of vídeos, where the core concepts can be explain in 5 minutos but the author takes double o triple. I regret have not audited the course before, now I lost my chances of refund. The audio quality is awful most of the times. Very poor use of visuals, there are long vídeos with very few images and a lot of bla bla bla, without going to the point.

D
Deivid6 January 2019

I'm getting to know his way to teach. However, even understanding the most of things in english, i do miss the subtitles – that could be in english.

A
Andrew1 September 2018

There’s a lot of good material in here, but it’s very poorly organized. As a result, it becomes repetitive. Furthermore, the work on the individual chapters is sloppy at times. Duplicate videos. Videos that end mid sentence. Videos that go on well after the talking has stopped. You might want to skip to lecture 95ish to avoid a lot of repetitive hype about progressive web applications. And ignore anything about Safari because all of that information is outdated.

B
Brianne31 July 2018

I have very little knowledge, so it is a little over my head but I'd like to begin playing around so it becomes practical

M
Michael1 March 2018

The course is a good broad overview of PWAs. But it felt like the production was rushed. There were several basic quality issues: - Media problems. The mic scratches frequently, like there's a loose connection. One lecture was just a black screen for the first 2/3. The instructor never bothers to move his mouse pointer out of view, which gets to be a problem when you're following along and see two cursors on the screen. - Disjointed curriculum. Modules are not consistently ordered logically so concepts are presented without background and you have to kind of fill in the gaps later. - Repeated lectures. Several pairs of lectures are just the same video repeated. Examples: lecture 109/111, 121/122, 154/156, 163/164. Really makes you feel like he didn't put much effort into it.

E
Erick18 February 2018

Lorsque que le formateur dit qu'il va mettre à jour le repository du cours, ça serait bien qu'il le fasse. C'est comme s'il ne tenait pas compte des remarques des élèves. Je suis déçu par cette attitude.

J
Jeff14 January 2018

I am already convinced this is something worth investigating... one slide of highlights about why this is the time for PWA would have done it. Editing this down and pointing to external resources would make this much more approachable.

M
Matti29 December 2017

Most of the content does not seem to really relate to progressive web apps, many lectures focus on details that don't seem relevant and which most developers should already know anyway.

K
Kirk2 December 2017

The content is very repetitive and very basic. The delivery of this content is very poor. I did not get very far before I realized the content also feels very old. I kept saying "of course we should do things like this".


1326114

Udemy ID

8/20/2017

Course created date

2/6/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram