Full-Day Workshop: Getting Started with Progressive Web Apps
Do you want to build fast, modern experiences for your users? Awesome, let’s super charge your website by turning it into a Progressive Web App (PWA). Don’t worry if you don’t know what that means yet. In this workshop, we’ll discuss what PWAs are, the use cases for and benefits of building them, and solid approaches to creating them. Along the way, we’ll also dispel many of the myths that surround Progressive Web Apps.
This workshop will walk you, step-by-step, through the process of turning a website into a PWA.
- What a Web App Manifest is, how it can be used to make our sites installable, and how to use it to control the installed experience
- Service Workers as a way to control network requests and caching
- Pre-caching assets
- Several next-gen APIs—e.g., Share—that tie them more deeply into the underlying operating system
- Where the web is heading in terms of gaining access to more native features
During the Workshop
Together, we’ll build a PWA from the ground up. Following along, you’ll create a Web App Manifest for your own site (or the demo site, if you prefer). You’ll also build a Service Worker from scratch or assemble one from some recipes I’ll provide. You’ll walk away with a working PWA you can deploy at the end of the day or when you get back to your home or office.
After This Workshop You Will
- Understand what PWAs are and how they can be applied to a variety of website types
- Know what is technically required to build a PWA (and, perhaps more importantly, what isn’t)
- Be able to create a Web App Manifest form scratch
- Understand the Service Worker lifecycle
- Be able to pre-cache important assets when a Service Worker is installed
- Understand the different approaches to caching and network access in order to choose the most appropriate approach for the various assets and APIs your website will need to access
This Workshop Is For
Front end designers and developers who want to get a better grasp on what Progressive Web Apps are, how they can improve user experience, and how to build them. They will walk away from this workshop able to not only build a PWA, but knowing how to evaluate the different approaches and make informed decisions about how to implement these new technologies.
What You’ll Need
- You own laptop with a modern browser (or three) installed
- A code editor
- A (link: https://github.com text: GitHub) account
- A local web server (like (link: https://mamp.info/en/ text: MAMP) or similar) OR a (link: https://netlify.com text: Netlify) account (free of charge, only required for the time of the workshop)
This session is held on