Getting Started with Progressive Web Apps

By Bill Stavroulakis
In this course, we will create a 'Car Deals' website using techniques and technologies to transform it from a simple web page into a progressive web app.
Play course overview
Course info
Rating
(72)
Level
Intermediate
Updated
Nov 2, 2020
Duration
1h 57m
Table of contents
Course Overview
Course Overview 2m
Course Introduction
Introduction 1m Technology Overview 2m Web vs. Native 2m Anatomy of a Progressive Web App 1m Case Studies 2m
Web App Setup and Structure
Introduction 0m What Is the App Shell? 2m Environment Setup 1m Online Demos - Compatibility 2m App Shell Setup: Styles 3m App Shell Setup: Layout 1m Loading Dynamic Data: Templates 3m Promises 5m Loading Dynamic Data: Fetch API 2m Loading Dynamic Data: Template Binding 3m First Load 1m Loading External Pages 2m Summary 1m
Client-side Storage
Introduction 0m Cookies 1m HTML5 Web Storage 2m WebSQL: Overview 1m IndexedDB: Overview 1m IndexedDB: Demo 4m Car Deals Storage: Setting Up 2m Car Deals Storage: Adding Data 2m Car Deals Storage: Retrieving Data 2m Car Deals Storage: Load More 2m Offline or Bad Network 4m App Cache 2m Cache API 3m Summary 1m
Offline Support and Service Workers
Introduction 0m The Problem 1m Service Worker Overview 2m Service Worker Requirements 1m Register a Service Worker 3m Service Worker Lifecycle Overview 3m Service Worker Lifecycle Demo 2m Service Worker Scope 1m Pre-caching 2m Update Cache 2m Immediate Control 3m Additional Events 3m Fetching 2m Network Only Strategy 2m Network First Then Offline Strategy 3m Offline First Then Network Strategy 2m Caching Scenarios 2m Communication with Client 2m Summary 1m
Installable Web Apps
Introduction 1m Manifest.json 2m The Icon/Metadata Decision 2m Metadata & Icon Generation 2m PWA Asset Generator 3m PWACompat 1m App Install Banners 2m iOS - MacOS - Windows 2m Lighthouse 1m Summary 1m
Description
Course info
Rating
(72)
Level
Intermediate
Updated
Nov 2, 2020
Duration
1h 57m
Description

Progressive Web Apps consist of a new palette of technologies such as the web app manifest, home-screen install support, service workers and the app shell. These bridge the gap even more between native and web apps offering new capabilities to web developers to create amazing desktop and mobile experiences. In this course, Getting Started with Progressive Web Apps, you'll learn how to develop car deals website using some of these new APIs and features that will transform it from a simple web page into a progressive web app. First, you'll explore the App Shell and figure out how it works. Next, you'll learn about client-side storage and service workers. Finally, you'll discover how to work with installable web apps. By the end of this course, you'll know what progressive web apps are and you'll have a full scope of the tools that you have at your disposal.

About the author
Bill Stavroulakis
About the author

Bill is a Microsoft MVP, Google Developer Expert, a Senior Software Engineer at Software Competitiveness International, and the creator of Dotnetweekly. He has over 7 years of experience in building Web Applications and is excited to learn and teach technologies as they develop/mature in the ever-changing world of the web.

More from the author
Single Page Applications with Vue.js
Intermediate
3h 10m
Oct 10, 2017
Working with Polymer.js Elements
Intermediate
1h 42m
Aug 16, 2016
More courses by Bill Stavroulakis
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Bill Stavroulakis, and welcome to my course on Getting Started with Progressive Web Apps. I am a Microsoft MVP, Google Developer Expert, and software developer at SOFTCOM. Do you wonder how AliExpress increased their conversion rate by 104% and how Flipkart tripled the time users spend on their site? With progressive web apps, we can bridge the gap even more between native and web apps. You, as a web developer, will have more tools to create amazing desktop and mobile experiences. In this course, we're going to develop a Car Deals website using some of these new APIs and features that will transform it from a simple web page into a progressive web. Some of the major topics that we will cover include the app shell, client‑side storage, service workers, and installable web apps. By the end of this course, you'll know what are progressive web apps and have a full scope of the tools that you have at your disposal. Before beginning this course, you should be familiar with HTML, CSS, JavaScript, and AJAX requests. I hope you'll join me on this journey to learn progressive web apps with the Getting Started with Progressive Web Apps course, at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT