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
(55)
Level
Intermediate
Updated
Nov 30, 2016
Duration
2h 11m
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 1m App Shell Setup: Material Design Lite 3m App Shell Setup: Layout 3m Loading Dynamic Data: Templates 3m Promises 6m Loading Dynamic Data: Fetch API 3m 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 3m 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 3m Car Deals Storage: Load More 2m Offline or Bad Network 3m App Cache 4m Cache API 3m Summary 1m
Offline Support and Service Workers
Introduction 1m The Problem 1m Service Worker Overview 2m Service Worker Requirements 2m Register a Service Worker 4m 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 4m Offline First Then Network Strategy 2m Caching Scenarios 2m Communication with Client 2m Summary 1m
Installable Web Apps
Introduction 1m Manifest.json 3m The Icon/Metadata Decision 2m Icon Generation 3m App Metadata 4m App Install Banners 3m iOS 3m Desktop 1m Windows 10 Mobile 1m Summary 1m
Description
Course info
Rating
(55)
Level
Intermediate
Updated
Nov 30, 2016
Duration
2h 11m
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

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT