Maximiliano Firtman
Independent Consultant
Course Description
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!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: January 11, 2022
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 47 minutes
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.
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.
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
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
Section Duration: 1 hour, 17 minutes
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.
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.
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.
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.
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.
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.
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.
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
Section Duration: 1 hour, 15 minutes
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.
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.
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.
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.
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.
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.
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.
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.
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
Section Duration: 24 minutes
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.
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.
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
Section Duration: 2 minutes
Maximiliano wraps up the course by providing a brief overview of the material covered and thanking students for attending the workshop.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops