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 Resources and Downloads Course Code https://github.com/firtman/frontendmasters-pwa Slides https://static.frontendmasters.com/resources/2021-10-28-building-pwas/PWAs-FrontendMasters.pdf Table of Contents Introduction 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.