Independent Consultant
PWAs: You Might Not Need That App Store
4 hours, 49 minutes
CC
Course Description
Create installable, offline-capable web apps with the power of Progressive Web Apps (PWAs). Build a native app experience with icons and splash screens tailored for each platform, and implement offline support using service workers. You can even have the best of both worlds by publishing your PWA to the Apple and Google Play stores!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: August 27, 2024
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: 12 minutes
Maximiliano Firtman introduces Progressive Web Apps (PWAs) and discusses their potential benefits. He also shares his experience as a web developer and author and explains how PWAs can merge the web and mobile spaces.
Maximiliano discusses the course prerequisites and recommends using optional tools like Xcode and Android Studio for simulating iOS, iPadOS, and Android environments. He also introduces the course repository and addresses a question about learning PWA apps compared to cross-mobile solutions like Flutter.
History of Progressive Web Applications
Section Duration: 52 minutes
Maximiliano explains that PWAs are a design pattern that uses different APIs and specifications from the web platform to create installable and offline-capable standalone apps for mobile and desktop devices.
Maximiliano discusses the history of web applications and their development for mobile devices. He also mentions that while Apple was not the first to create web apps, they played a significant role in popularizing the concept.
Maximiliano discusses different development approaches for creating apps, including native SDKs, web development, and hybrid development. He also explains the advantages of PWAs and how they combine the best of both web and native app experiences.
Maximiliano discusses the browser and operating system support of PWAs. He also highlights the benefits of PWAs for enterprise applications, as they can be easily deployed on devices without requiring special permissions.
Maximiliano demonstrates how to install and use PWAs on different operating systems. He shows examples of installing PWAs on Windows, Chromebooks, Mac OS, Android, and iOS devices.
Maximiliano explains that while PWAs can be installed on most platforms, there are some exceptions such as Firefox on desktop, visionOS, Android WebView, iOS WebView, watchOS, tvOS, and Android TV. He also mentions that social media platforms often use in-app browsers that do not support PWA installation, so users may need to be directed to open the app in a separate browser like Safari.
Components of a PWA
Section Duration: 54 minutes
Maximiliano discusses the components of PWAs, including a web app, web app manifest, and a service worker. He also explains the concept of PWA criteria and how passing these criteria can result in hints, banners, or dialogs that invite users to install the PWA.
Maximiliano introduces a simple web app called Codepad Masters and explains that the goal is to convert it into a PWA. He demonstrates how to check for PWA criteria using the Application tab in DevTools and the Lighthouse tool. Maximiliano also explains the purpose of the viewport meta tag and demonstrates the difference it makes in the app's display on mobile devices.
Maximiliano explains the basics of the web manifest, which is a JSON file that defines metadata for a PWA. He also introduces the concept of micro apps, where multiple installable PWAs can exist within the same origin by pointing to different web manifest files.
Maximiliano walks through each property of the web app manifest, such as ID, start URL, scope, name, short name, and display. He also demonstrates how to link the manifest file to the HTML and show the changes in the app's appearance on iOS.
Maximiliano discusses the different display modes for PWAs, including the default display mode, which is "standalone," as well as other modes like "browser," "fullscreen," "minimal-ui," "tabbed," and "window controls overlay."
Testing & Debugging
Section Duration: 16 minutes
Maximiliano discusses how to test and debug web apps using Android Studio and demonstrates how to create and configure virtual devices. He also addresses the issue of accessing localhost on the Android emulator.
Maximiliano demonstrates how to open the Xcode and choose different device options, such as an iPad or Apple Vision Pro. He also explains how to remotely inspect and debug the simulator using Safari for Mac.
Standalone User Experience
Section Duration: 33 minutes
Maximiliano explains that by default, a shortcut icon is created on the home screen, but not in the launcher, giving it a less app-like experience. However, if the PWA meets certain criteria, it can be installed as a Web APK, which is a full Android native package. Maximiliano also explains the process of adding icons to the Web app manifest and provides recommendations for sizes and formats.
Maximiliano discusses maskable PNGs and adaptive icons and how different shapes can affect the appearance of icons on different devices. He also demonstrates how to create a maskable icon using a PWA called maskable.app.
Maximiliano demonstrates how to use the Maskable.app tool to create a maskable icon. He also shows how to add the maskable icon to the PWA's manifest file, allowing it to be displayed properly on Android devices.
Maximiliano explains how to specify a specific icon for Apple platforms in a PWA. He demonstrates how to override the default manifest icon for Apple using a link in the HTML, and recommends providing a single icon with a resolution of 180 by 180 for compatibility with iPad Pro.
Maximiliano explains that on Android, splash screens are automatically generated using metadata from the web app manifest, while on iOS, developers need to create their own startup images using PNG files and link elements. Maximiliano also mentions two solutions to the problem of creating multiple versions of startup images for different devices: using a static asset generator or a client-side generator with the help of the PWA Compat library.
Maximiliano demonstrates the behavior of PWAs on desktops. He also explains how it is no longer mandatory for PWAs to be offline capable in order to be installed.
Offline Applications
Section Duration: 1 hour
Maximiliano discusses how to make a PWA offline capable. He also explains the difference between native apps and web apps, and how PWAs use service workers to store assets client-side and serve them when the app is offline.
Maximiliano explains what a service worker is and how the service worker acts as a proxy, intercepting network requests and serving files in the name of the server. He also demonstrates how to check the installed service workers in Chrome and explains the lifecycle of a service worker.
Maximiliano covers the concept of service worker scope, which determines the range of pages and files that a service worker can manage. He also addresses concerns about security threats related to service workers and explains that while there were initial concerns, service workers have proven to be secure thus far.
Maximiliano demonstrates how to create a service worker file, register it in the index.html file, and debug the service worker using the browser's developer tools. He also shows how to use the fetch event listener in the service worker to intercept and respond to network requests.
Maximiliano introduces the three most common cache serving strategies: cache first, network first, and stale or revalidate. He demonstrates how to implement the cache first strategy by using the cache API to store assets in the cache and then serving them from the cache if they are available, or fetching them from the network if they are not.
Maximiliano explains two different strategies for serving files in a PWA: network first and stale or revalidate. He discusses how each strategy works and the advantages and disadvantages of each. Maximiliano also addresses questions about updating assets and implementing custom logic with service workers.
Advanced PWA UI techniques
Section Duration: 21 minutes
Maximiliano demonstrates how to improve the user interface of a PWA by avoiding content selection. He shows how to apply CSS to disable content selection, but cautions against using the "user-select: none" property as it may hinder accessibility and the ability to copy and paste data.
Maximiliano discusses safe areas, which are areas of the screen that are not affected by rounded corners or notches on mobile devices. He demonstrates how to use CSS environmental variables to adjust the margins of elements within the safe areas to ensure they are visible and clickable. He also mentions the virtual keyboard API that allows developers to control how elements are rendered when the keyboard is present.
Maximiliano provides several tips and ideas for improving PWAs, including disabling the browser's pull-to-refresh feature, using the new view transition API, and utilizing system fonts. He also discusses implementing the web share API, disabling touch callout on iOS, reducing motion, and requesting persistent storage.
Deploying the App for User Installation
Section Duration: 31 minutes
Maximiliano explains how to improve the installation experience of a PWA by using the "beforeinstallprompt" event. He discusses the limitations of the installation API, which is only available in Chromium-based browsers, and demonstrates how to create an install promotion banner or button.
Maximiliano demonstrates how to add an "install" button to a PWA and handle the installation process. He shows how to add the button to the HTML and use JavaScript to listen for the "beforeinstallprompt" event. He also shows an alternative method using the "getInstalledRelatedApps" API to check if the PWA is already installed, but note that it is not supported in Safari.
Maximiliano demonstrates how to improve the installation dialog for a PWA by adding a description and screenshots to the app's manifest file. He also mentions that in Safari, the installation process is called "add to dock" and shows how to add a PWA to the dock on a Mac.
Maximiliano explains how to create a Web App Launcher package to publish a PWA on app stores such as the Apple App Store and Google Play Store. He also demonstrates how to use PWABuilder, a Microsoft project, to package the PWA for different operating systems.
Wrapping Up
Section Duration: 6 minutes
Maximiliano wraps up the course by providing an overview of the material covered. He discusses the future of PWAs and emphasizes that investing time in PWAs is essential for web developers. Maximiliano also provides additional resources for further learning on PWAs.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops