README.md
Wouldn't it be fantastic if you could build apps that didn't always rely on an internet connection? Modern web browsers now enable you to create offline-capable Progressive Web Apps (PWAs)! Your web apps can now go beyond the browser and install natively on iOS, Android, and desktop. Add these new abilities using two main APIs: a web app manifest for installation and a service worker for offline. See how to debug and test on real devices. Then learn how to distribute your apps through not only the browser but also native App Stores!
Published: January 11, 2022
Introduction
00:00:00 - 00:06:46
Introduction
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
PWA Overview
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
State of the PWA Platform
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
PWAs as Desktop Apps
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.
Building a PWA
PWA Components
00:47:15 - 00:50:38
PWA Components
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
Project Setup
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
Creating a Web App Manifest
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
Manifest Orientation & Theme Color
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
Scope & Display
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
Icons
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
Maskable Icons
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
App Shell UI Spacing
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 Workers
Service Worker Overview
02:05:10 - 02:16:49
Service Worker Overview
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
Viewing Installed Service Workers
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
Create a Service Worker
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
Serving Resources Overview
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
Caching with a Service Worker
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
Serving Resources with a Service Worker
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
Serving All Assets
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
Updating Cache Resources
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
Installing the App on Android
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.
App Distribution
Share Button
03:21:13 - 03:26:19
Share Button
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
Install Button
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
Distribution Models
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
Wrapping Up
03:46:04 - 03:48:24
Wrapping Up
Maximiliano wraps up the course by providing a brief overview of the material covered and thanking students for attending the workshop.