Progressive Web Apps - The Concise PWA Masterclass
5.0 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
100 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Progressive Web Apps - The Concise PWA Masterclass to your Wishlist.

Add to Wishlist

Progressive Web Apps - The Concise PWA Masterclass

Everything you need to build Progressive Web Apps from Scratch, or upgrade your existing Web Apps to PWAs.
New
5.0 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
100 students enrolled
Created by Ray Viljoen
Last updated 9/2017
English
English
Current price: $10 Original price: $145 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 32 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the purpose of PWAs.
  • Learn each aspect of the Service Worker API and the Caching API in depth.
  • Learn to add PWA technologies into existing web apps with the help of progressive enhancement.
  • Convert an existing web app to a full-featured Progressive Web App without compromising support for older Browsers.
  • Audit and improve a Progressive Web App with the help of Google Lighthouse testing tool.
View Curriculum
Requirements
  • An understanding of HTML, CSS and JavaScript in the browser.
  • Basic knowledge of JavaScript ES6 syntax would be beneficial.
Description

Learn to build discoverable, engaging Progressive Webs Apps (PWAs) from scratch, or Upgrade Existing Web Apps to PWAs using Service Workers, Caches API and Web App Manifests.

Learn the Essential technologies, and Concepts behind PWAs to get started as quickly and efficiently as possible.

  • Understand the purpose of PWAs and the problems they solve
  • Learn supporting JavaScript concepts for working with PWAs, including Promises & the Fetch API
  • Practical, In-depth lessons on each individual aspect of building a PWA
    • Service Workers
    • Push Notifications
    • Caching
    • Native capabilities


An invaluable skill for any Web/Mobile Developer, made available via a very concise and well-planned curriculum. 

Progressive Web Apps is an incredibly exciting, fast-growing and sought after sill in Web App Development.

This course will provide a very practical & concise approach to learning Progressive Web Apps and the curriculum includes all the aspects of PWAs ready for production today.

There’s no faster way to get started with PWAs and the course will particularly focus on upgrading existing web apps to be fully progressive without any compromise in non-supporting browsers.


Content and Overview

With 31 concise and practical lessons, this course aims to teach a solid understanding of Progressive Web Apps and is suitable for anyone with a basic understanding of HTML, CSS & JavaScript in the browser.

The course starts with an introduction to Progressive Web Apps as a concept and follows on to cover Service Workers in great details.
The Service Worker section includes short lessons on supporting JavaScript concepts, including Promises and the Fetch API.

The course also dedicates an entire section to understanding the Cache API and using it alongside Service Workers.

Finally, to put the entirety of the course contents to practice, a practical project sections covers the process of assessing and upgrading an existing Web App to be fully Progressive while still maintaining it’s initial integrity through progressive enhancement.

Upon completion of this course you will have the practical skills to immediately start building fully customized, production ready, Progressive Web Apps.

This course is to the point and everything is demonstrated in the most simple, yet practical ways.

Who is the target audience?
  • This course is best suited for Web Developers looking to expand their skillset.
  • The course aims to teach the core technologies behind Progressive Web Apps.
  • There is no coverage of the JavaScript language or the browser's JavaScript context, this knowledge is assumed.
Compare to Other Progressive Web App Courses
Curriculum For This Course
33 Lectures
03:37:30
+
Overview
4 Lectures 08:50

Course Introduction

Preview 02:56

An overview of browser support for PWA's and a look at their future.

Support
01:09

An introduction to the different aspects of a Progressive Web App and some design considerations when developing.

Preview 02:39

A guide on what tools will be used throughout the course and how examples will be presented.
This lesson will ensure that you can follow along easily and have the best possible environment ready for building and testing PWA's.

Lesson Structure
02:06
+
Service Worker
9 Lectures 01:10:36

The first look at what the role of the Service Worker is, and what requirements must be met.

This lesson will help you better understand where the Service Worker works.

Introduction
02:06

An introduction to understanding & using Promises.

This relatively short tutorial will give you a starting point for using Promises with Service Workers and explain the challenges Promises help solve.

Preview 13:59

An introduction to understanding & using the new Fetch API.

This is a practical-use tutorial covering the basics of using Fetch over traditional XMLHttpRequest.

Fetch API
07:44

A walkthrough of the various stages of a Service Workers lifecycle.
This includes:

  • Registration
  • Installation
  • Waiting
  • Activated
Lifecycle
11:04

Learn to intercept and manipulate network requests using the Service Worker's Fetch event.

Events: Fetch
11:13

Understand how the Service Worker location affects it's permissions scope and how to define a custom scope

Scope
06:07

Learn to use the ServiceWorkerRegistration object to monitor and respond to Service Worker updates and state changes.

ServiceWorkerRegistration
04:53

Learn to use the HTML5 Messaging API to send messages between the main application context ( window ) and the service worker context.

Events: Message
10:44

A quick demonstration of listening for server push events on a Service Worker.

Events: Push
02:46
+
Push Notifications
2 Lectures 17:25

See how to request permission and show native notifications, using the HTML5 Notifications API.

Notifications
05:41

An overview of the push notification process.

This lesson will show you how to:

  1. Create a basic Node.js push server
  2. Subscribe to a push service
  3. Receive push notifications on the service worker
Sever Push
11:44
+
Caching
5 Lectures 47:12

A brief overview of the different storage options available for Progressive Web Apps and why we'll use the Cache API.

Storage Options
02:11

Learn to use the CacheStorage interface for creating, opening and deleting caches.

Preview 03:53

Learn the basic workings of the Cache API, including:

  • Adding entries
  • Deleting entries
  • Using the Put method
  • Listing cache keys
Cache API
05:32

Integrate the Cache API into the Service Worker to intercept browser requests and serve cached responses.

Caching in the Service Worker
15:32

An example lesson of identifying and implementing suitable caching strategies for specific resources. Including:

  • Cache Only
  • Cache with Network Fallback
  • Network with Cache Fallback
  • Cache with Network Update
  • Cache & Network Race
  • Alternative Offline Content
Caching Strategies
20:04
+
Native App Features
5 Lectures 27:01

A short tutorial on using Chrome remote debugging. - Devtools on a real device.

Develop with Real Devices
06:10

Understand the basic format and workings of the Web App Manifest file.

This includes specifying:

  • App Icon
  • Launch Screen
  • App Name
  • App Description
  • Native Display Mode
Web App Manifest
06:38

Understand the trigger requirements for the "Add to Home Screen" dialog and learn to invoke it manually via Chrome Devtools.

Preview 02:02

Learn to provide Web App Manifest fallback for Safari mobile on iOS.

  • App Icons
  • Launch Screen
  • Standalone Display Mode
Safari App Icons
05:30

Part 2 of providing iOS fallback with the addition of an Application Cache Manifest (App Cache).

Safari Offline Support
06:41
+
Build a Progressive Web App - Project
6 Lectures 44:21

An overview of the web app to be made progressive, including complete coverage of the app's code and goals of this project.

Project Introduction
07:28

Add the first Progressive Web App features to the project app.

  • Adding a Service Worker
  • Caching the application shell (static assets)
  • Creating a caching strategy for serving the app assets from the cache
Adding a Service Worker
08:16

Learn to implement customised caching strategies based on specific content types.

This lesson show how to cache API requests with the network as a priority and cache images that persist across Service Worker Updates.

Cache Dynamic Content
06:35

Manage cached content with an undetermined expiration.

This lesson will teach practical messaging between the main context and the service worker.


    Managing Cache Storage
    09:11

    Deploy a PWA to GitHub Pages as a free SSL enabled static app hosting solution.

    This lesson includes:

    • Creating the Web App Manifest
    • Initialising the PWA as a Git repo
    • Deploying via GitHub Pages
    Deploying with GitHub Pages
    07:07

    Learn to use Google's web app auditing tool, Lighthouse, to improve a PWA.

    Testing with LIghthouse
    05:44
    +
    Epilogue
    2 Lectures 02:05

    A collection of useful resources to explore Progressive Web App development beyond this course.

    Note: See attached links and PDF.

    Resources & Further Learning
    01:33

    Course Outro.

    Outro
    00:32
    About the Instructor
    Ray Viljoen
    4.5 Average rating
    937 Reviews
    6,220 Students
    4 Courses
    Practical Courses Designed for Learning Efficiency.

    Stackacademy provides high-quality Courses for Developers, with learning-efficiency as the #1 priority.

    My name is Ray Viljoen,
    I have 9 years experience as a Full Stack Developer and have real world experience building, maintaining & improving a wide range of applications.

    My courses are concise, teaches practical skills and is designed to also serve as usable future reference material.