Build Progressive Web Apps (PWAs) from Scratch

Table of Contents

• 

  Introduction

  00:00:00 - 00:06:46 View Transcript

  Maximiliano Firtman introduces the course by providing some brief personal background, an overview of the course material, prerequisites for the course, and what a PWA is. Material to be covered in this course includes starting with a web app, adding installation, setting up icons, enhancing the UI, adding a service worker, making an offline experience, installation support, and the app store.
• 

  PWA Overview

  00:06:47 - 00:21:22 View Transcript

  Maximiliano discusses what a PWA is, hybrid development, which parts of PWAs are pulled from the web or native SDKs. Students' questions regarding how the PWA platform compares to Flutter and if using PWAs with frameworks is going to be covered in this course are also covered in this segment.
• 

  State of the PWA Platform

  00:21:23 - 00:31:01 View Transcript

  Maximiliano discusses the current state of the PWA platform, which mobile web browsers are compatible with PWAs for each operating system, and PWA support on desktop. A student's question regarding how difficult it is to let users know that there is a PWA available
• 

  PWAs as Desktop Apps

  00:31:02 - 00:47:14 View Transcript

  Maximiliano walks through installing PWAs on desktop from the browser and demonstrates how the app window is then displayed. Students' questions regarding how the camera API compares to native and if the process of a PWA is the same as the browser process are also covered in this segment.

• 

  PWA Components

  00:47:15 - 00:50:38 View Transcript

  Maximiliano briefly discusses the three main components of a PWA including a web application, a web app manifest, and a service worker. How to recognize if a URL is a PWA is also covered in this segment.
• 

  Project Setup

  00:50:39 - 00:58:15 View Transcript

  Maximiliano walks through setting up the course project, discusses the contents of the base project, and demonstrates how to create a new server in the terminal. A brief demonstration of the application's current functionality is also provided in this segment.
• 

  Creating a Web App Manifest

  00:58:16 - 01:10:27 View Transcript

  Maximiliano demonstrates how to build the web app manifest for the course project and how to link the manifest to the link in the HTML. Setting the name, short_name, and start_url are also covered in this segment.
• 

  Manifest Orientation & Theme Color

  01:10:28 - 01:17:30 View Transcript

  Maximiliano walks through adding the specifications for orientation and theme_color to the web app manifest. A student's question regarding updating the theme_color in the manifest is also covered in this segment.
• 

  Scope & Display

  01:17:31 - 01:27:53 View Transcript

  Maximiliano discusses the web manifest properties scope and display and demonstrates their individual effects on the PWA for both iOS and Android. Students' questions regarding if the starting URL can be in a different domain and what the theme_color property in the manifest does to the application are also covered in this segment.
• 

  Icons

  01:27:54 - 01:45:55 View Transcript

  Maximiliano walks through adding the source, sizes, and type specifications for multiple icons to the web manifest, and updates the HTML metadata for iOS and Android. A discussion regarding the different types of icons for Android including shortcuts and WebAPKs and a brief overview of the material covered regarding icons for the app Manifest is also provided in this segment.
• 

  Maskable Icons

  01:45:56 - 01:51:32 View Transcript

  Maximiliano discusses using maskable icons to allow any part of the icon's image that is outside the specified "safe zone" to be safely ignored and masked away. The differences between the allowed icon shapes for iOS and Android and an option to preview an icon are also covered in this segment.
• 

  App Shell UI Spacing

  01:51:33 - 02:05:09 View Transcript

  Maximiliano demonstrates making the application's text unselectable and adjusting the app shell spacing for correct spacing around the learn button. adding media queries to dynamically set the application's padding is also covered in this segment.

• 

  Service Worker Overview

  02:05:10 - 02:16:49 View Transcript

  Maximiliano discusses how progressive web apps can be available online and offline by using service workers to serve application resources. A service worker is a JavaScript file that acts as a middleware offering a local web server or web proxy for the PWA. Students' questions regarding if the service working is replacing the server but on the client-side and if the installation of the service worker can be deferred are also covered in this segment.
• 

  Viewing Installed Service Workers

  02:16:50 - 02:22:15 View Transcript

  Maximiliano demonstrates how to view currently installed service workers in Chrome, discusses service worker run time, and the service worker lifecycle. This internal service worker page can be used to view and debug installed service workers.
• 

  Create a Service Worker

  02:22:16 - 02:28:06 View Transcript

  Maximiliano walks through how to create, register, and run a service worker in the course PWA. How to use the dev tools to choose between executing code in the main thread or service worker thread is also covered in this segment.
• 

  Serving Resources Overview

  02:28:07 - 02:32:46 View Transcript

  Maximiliano discusses using a service worker to cache and serve the resources of a PWA. In regards to serving resources, the service worker API can respond to requests from the PWA, serve from the cache, forward requests to the network, synthesize a response, and allow for mixed algorithms. A student's question regarding if there can be a PWA that doesn't need a server is also covered in this segment.
• 

  Caching with a Service Worker

  02:32:47 - 02:41:05 View Transcript

  Maximiliano demonstrates how to install a service worker, open a new cache, receive resources, and cache those resources. A discussion on which assets need to be cached to render and run the PWA offline is also provided in this segment.
• 

  Serving Resources with a Service Worker

  02:41:06 - 02:48:26 View Transcript

  Maximiliano demonstrates synthesizing a service worker response, where to find loaded assets in the dev tools, and discusses the Workbox library as a tool to assist with medium to large size PWAs. Using an event listener to check the loaded URL path allows for the service worker to individually serve page content for the specified URL path.
• 

  Serving All Assets

  02:48:27 - 02:57:43 View Transcript

  Maximiliano walks through the cache first strategy, how to search for a request in the cache, and respond with a matching cached asset. If a matching asset cannot be found in the cache a fetch API request is then made.
• 

  Updating Cache Resources

  02:57:44 - 03:16:11 View Transcript

  Maximiliano demonstrates how to update and store cached resources on the device using cache first and network first strategies. The app can then bypass the service worker in a cache first strategy to force an update or always go to the network and render the newly cached information on the next reload.
• 

  Installing the App on Android

  03:16:12 - 03:21:12 View Transcript

  Maximiliano demonstrates how to test an unpublished PWA on an Android device using port forwarding in the Chrome DevTools. Installing a PWA on the device will compile the app in Google's servers.

• 

  Share Button

  03:21:13 - 03:26:19 View Transcript

  Maximiliano walks through how to improve the code integration by adding a share button to quickly share the application with other users. The share function uses the navigator.share API which may not be available in all operating systems, therefore, a fallback is also implemented.
• 

  Install Button

  03:26:20 - 03:36:05 View Transcript

  Maximiliano live codes an install button in the application's toolbar to trigger the installation behavior without having to open the side menu. The BeforeInstallPrompt event is used to determine the installation status of the app and trigger the native installation alert. Setting an app description and screenshots to the web app manifest are also covered in this segment.
• 

  Distribution Models

  03:36:06 - 03:46:03 View Transcript

  Maximiliano discusses the different distribution models for installing PWAs such as the browser, app stores, and enterprise distribution. Tools to create PWA launchers including IDEs, PWA Builder, and command-line tools (CLIs) are also covered in this segment.

• 

  Wrapping Up

  03:46:04 - 03:48:24 View Transcript

  Maximiliano wraps up the course by providing a brief overview of the material covered and thanking students for attending the workshop.