Learn how to audit a web application for "Progressive Web Fitness", go offline with service workers, make your web app load instantly with the App-Shell architecture, enable push notifications and more. Convert your site into a progressive web application that’s just like a native smart device app, but without the excessive file size or the lengthy install process!
This course and others like it are available as part of our Frontend Masters video subscription.
Published: November 9, 2017
Table of Contents
Progressive Web Applications and Offline
Introduction
Mike North introduces Progressive Web Apps (PWA) and Offline course. - https://github.com/mike-north/pwa-fundamentalsDefining PWA
After defining a PWA, Mike reviews their characteristics by comparing and contrasting them to traditional web applications.Project: Frontend Grocer
Mike introduces the example project, Frontend Grocer, which is a traditional one-page application. Throughout the course, students will add features to convert the application to a PWA.
Measuring Apps
Quantifying Web App Success
Reviewing essential testing metrics such as First Paint, Time to Interactive, and Time for Dynamic Data for measuring modern web applications.Chrome DevTools
Mike reviews how to use Devtools specifically for testing for PWA metrics. - https://developers.google.com/web/tools/chrome-devtools/Lighthouse & WebPageTest
Introducing Lighthouse and WebPageTest, Mike reviews tools runs several tests related to an application's performance, metadata, security, and much more. - https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=enChallenge 0: Baseline
In this challenge, students set up the course's example site and then measure the baseline readings.Challenge 0: Solution
Mike walks through the solution to Challenge 0.
Mobile Simulation
DevTools Devices Mode
After giving a tip on Challenge 0 for Windows development, Mike introduces testing applications on mobile simulators through Chrome DevTools.iOS Simulator
Since Mobile Safari is different from Desktop Safari, Mike reviews how to test web applications for iOS devices.Android Simulator
Since the set up is more involved than other emulators, Mike walks through the steps on how to install the Android Emulator.
Progressive Metadata
Viewport Metatag
Through adding meta tags to web applications, Mike shows how to define web applications to appear more like a native app.Fullscreen Metatags
Mike reviews Apple metatags to set browser chrome settings such as launching a bookmarked application to fullscreen, setting the color of the status bar, and set a unique title formanifest.json
Mike introduces the manifest.json file, which is a JSON file that resides in the root directory of your web app and provides information about an application such as name, author, icon or icons, description, and more.Home Screen Icons
Instead of having a minified screenshot of an application as a home screen icon, Mike shows how to set custom images as smart device tablet.schema.org
Mike reviews schema.org metadata, which is a standard set of schemas for structured data markup that is understood by search engine spiders.Challenge 1: Metadata
In this challenge, students add progressive metadata in the course application.Challenge 1: Solution
Mike walks through the solution to Challenge 1 and tests the improvements through the Lighthouse Chrome extension
Enhanced Server-side Rendering
Performance Timeline
By using the performance timeline, Mike reviews the factors that go into loading an application with client-side renderingEnhanced Client-side Rendering
Seeking the middle ground between server-side and client-side rendering, Mike demonstrates a method called "enhanced client-side rendering" which radically speeds up page rendering.Server-side Rendering
Mike reviews server-side rendering for a single-page application.Challenge 2: Enhanced Client-side Rendering
In this challenge, students integrate an enhanced client-side techniques in the course demo application.Challenge 2: Solution
Mike walks through the solution to Challenge 2.
Promises
Reviewing Promises
Since promises are used heavily throughout PWAs, Steve Kinney reviews and defines a promise, which is an object representing the eventual completion or failure of an asynchronous operation.Chaining & Creation
Continuing to review promises, Steve explores the chaining and creating of promises.
JavaScript Workers
Introducing Web Workers
Mike introduces web workers, which is a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the UI.Dedicated vs. Shared Workers
Mike illustrates the differences between dedicated and shared workers.Limitations & Features
To avoid potential problems coding workers such as deadlocks, Mike reviews the limitations of web workers.Terminating a Worker
Mike illustrates how and when to terminate a worker.Challenge 3: Web Workers
In this challenge, students create a call for a QR code reader into a web worker.Challenge 3: Solution
Mike walks through the solution to Challenge 3 with Steve's help.
Async Data
Reviewing Async Methods
After reviews web technologies on the client side to create asynchronous web applications.Fetch API
Steve introduces Fetch API, a modern interface for accessing and manipulating resources that has a more flexible feature set than XMLHttpRequest.Fetch Requests
Steve and Mike review how to create a basic Fetch request.Fetch & CORS
After reviewing Cross-Origin Resource Sharing (CORS), a system for restricted resources on a web page to be requested from another domain outside, Steve demonstrates how to handle external resources through Fetch.Challenge 4: Using Fetch, Part 1
In this challenge, students fix the store cart, so it persists to course's example API.Challenge 5: Using Fetch, Part 2
In this challenge, students code the cart so that when a user checks out the contents of their cart are persisted so than an order is created.Challenges 4 & 5: Solutions
Steve walks through the solution to Challenges 4 and 5 with Steve's help.
Service Worker
Introducing Service Worker
Steve introduces Service Worker, which is a crucial technology in constructing WPAs.Service Worker Features
Steve illustrates the features of Service Workers, which can run in the background, allow for checking network availability, updating assets, access to push notifications, and more.Challenge 6: Simple Service Worker
In this challenge, students implement a service worker.Challenge 6: Solution
Steve walks through the solution to Challenge 6 and answers student questions with Mike's help.Service Worker Review
Steve reviews features and coding structures of Service Workers.Intercepting Network Requests
Steve discusses Service Worker's ability for an application to intercept any network requests and respond back with custom responses. Steve also takes questions from students.Service Worker Demo
Steve demonstrates using conditional logic with a Service Worker that can intercept network request. - http://intercepting-fetch.glitch.me/
Cache API
Introducing Cache API
Steve introduces Cache API, a utility for fine-grain control over caching assets from inside of a service worker.Challenge 7: Fallback Image
In this challenge, students implement a fallback image in the event the application encounters a response status for image requests.Challenge 7: Solution
Steve walks through the solution to Challenge 7.Introducing Caching Strategies
Mike reviews Cache API strategies including Cache-Only, Network-Only, and Cache with Network Backup.Precache Caching
Mike breaks down precaching strategy and reviews a demo of how precaching works.Network with Cache Backup
Mike demonstrates a caching strategy that first tries to use the network before falling back to the cache.Cache, Update, and Refresh
After reviewing Cache, Update, and Refresh Caching Strategy, which is when an app updates an asset when it detects a new version on the network, Mike discusses best practices for approaching caching strategies.Challenge 8: Integrating Precache
In this challenge, students implement precaching in the course project application.Challenge 8: Solution
After reviewing CORS related to credentialed requests and wildcard requests, Mike walks through the solution to Challenge 8 with Steve's help.Challenge 9: Caching Dynamic Data
In this challenge, students implement a fetech event handler that uses a cache fallback strategy for all GET requests that are not precached in advanced.Challenge 9: Solution
Mike walks through the solution to Challenge 9.Challenge 10: SPA Treatment of index.html
In this challenge, students incoporate preacaching approaches to an index.html of a SPA.Challenge 10: Solution
Mike walks through the solution to Challenge 10.
IndexedDB
Introducing IndexedDB
Mike introduces indexedDB (Indexed Database API), which is a low-level API for client-side storage of structured data, including files and blobs.IndexedDB API
After reviewing the IndexedDB API including opening or creating the database, migrating, transactions, and more, Mike examines current browser support for IndexedDB.IndexedDB & Promises
Mike reviews IDB, an open source library that replaces the IDBRequest objects with promises. - https://github.com/jakearchibald/idbChallenge 11: IndexedDB
In this challenge, students populate an IndexedDB store with grocery store items in the install handler and then utilize IndedexedDB to provide better contextual fallback images.Challenge 11: Solution
Mike walks through the solution to Challenge 11.
Web Push
Push API and Notification API
Mike reviews Web Push, which uses the Push API and Notification APIs to send timely updates to site visitors.VAPID for Web Push
After introducing Voluntary Application Server Identification (VAPID) for Web Push, which helps distinguish legitimate traffic from bad, Mike demonstrates how to generate VAPID keys.Structure of PushSubscription
Mikes shows showing PushSubscription code and underscores the importance of using a library for sending notifications. Mike takes questions from students. - https://github.com/web-push-libsChallenge 12: Web Push
In this challenge, students generate a web push subscription.Challenge 12: Solution
Mike walks through the solution to Challenge 12 and takes questions from students.
Notifications
Introducing Notifications
Steve reviews Notifications including how to approach implementing notifications including options for the user's visual and behavioral interactions.Challenge 13: Notifications
In this challenge, students implement notifications in course example application.Challenge 13: Solution
Steve walks through the solution to Challenge 13.
Background Sync
Introducing Background Sync
Steve introduces background sync, which is a web API that defers actions until the application has access to a stable Internet connection.Background Sync Strategies
Steve reviews best practices and techniques for working with background sync.Background Sync Demo
Using a simple To Do list application, Steve demonstrates how a service worker is used to implement background sync.Problems with App Cache
To work around Safari's lack of support of Service Worker reviews how an alternative with App Cache might be used and the problems associated with this approach.
HTTP/2
Patterns for PWAs
Application Shell Pattern
Mike starts reviewing common PWA patterns by first examining the Application Shell Pattern, which focuses on the core components necessary for an app rather than data.PRPL Pattern
Mike introduces the Push Render Pre-Cache Lazy-load (PRPL) pattern for PWAs. In this pattern, a developer would Push critical resources for the initial URL route, Render initial route, Pre-cache remaining routes, and Lazy-load and then create remaining routes on demand.