recode-fa23

Progressive Web Apps

CLASS RECORDING HERE - Login required, I will be taking attendance based on who is logged in and views the recording.

Note: At ~51:00 when we get to the subject of the manifest.json file, I was looking at the wrong web page. Please refer to the correct page here. (I was looking at the manifest.json reference for browser extensions which has slightly different specifications.)

Overview

Progressive Web Apps allow us to create installable applications, leveraging the expanding functionality and built-in security features of the web browser. PWA’s leverage the expanding functionality and built-in security features of the web browser while also providing a flexible user experience depending on the target platform, whether it be desktop or mobile. They are also able to mimic traditional software applications, with some limitations, without the developer overhead of app store approval, security checks, and cross-platform compatibility.

Class discussion

• Epic Games v. Apple
• Tweets that don’t age well
• PWA Library

Code References

• PWA Boilerplate Repo

Anatomy of a PWA

• manifest.json
  • a list of all the assets in our app
• service-worker.js
  • drives the cache-ing behavior for offline usage, based on the files in the manifest.json
• custom icons

CSS Considerations

Media Queries help us understand what type of device our app is being viewed on. These apply as well to regular browsers, but PWA’s have a few special cases which we can read about here. When in play, we can specify custom CSS to handle these cases. Here is an additional resource on media queries.

Debugging

• Debugging on Web Pages on Mobile Devices
• Lighthouse PWA Audits
  • An open-source tool for improving the quality of your web apps
  • Has specialized PWA tool

Assignment

Build Your Own PWA

• Roll your own, a timer app with custom sounds and feedback,

Considerations for mobile interactions like touch