Build Progressive Web Apps (PWAs) from Scratch

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
3 hours, 48 minutes CC
Build Progressive Web Apps (PWAs) from Scratch

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
Close

Course Details

Published: January 11, 2022

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 47 minutes
  • 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
    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
    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
    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
  • 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
    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
    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
    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
    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
    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
    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
    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
  • 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
    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
    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
    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
    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
    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
    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
    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
    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
  • 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
    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
    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
I just completed "Build Progressive Web Apps (PWAs) from Scratch" by Max Firtman on Frontend Masters! It was a amazing🚀
Ravi

Ravi

ravikumrz

Changed my view on PWAs - strongly recommend it 😄
Michał Hawełka

Michał Hawełka

hwlkdev

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now