01 - Introducing Progressive Web Apps

Welcome to Day 1 of #30DaysOfPWA! New to the series? Three things you can do to catch up:

• Read the kickoff post below for context.
• Watch the GitHub Repository for updates.
• Bookmark #30DaysOfPWA Blog for resources.

Welcome to #30DaysOfPWA

Nitya Narasimhan for Microsoft Azure Feb 14 2 min read

#pwa #pwabuilder #webdev #beginners

This is a shortened version of the this canonical post from the #30DaysOfPWA blog.

What We'll Cover Today

This introduction to Progressive Web Apps should help answer the following questions:

• What is a Progressive Web App (PWA)?
• How does it compare to web and native apps?
• What are the benefits of PWA?
• What characterizes a good PWA?

We'll end each day with an exercise that you can do on your own, to help solidify what you learned. Ready? Let's go!

What is a Progressive Web App?

A Progressive Web App (PWA) is a traditional web app that is progressively enhanced, using open web technologies, to help it deliver the best possible experience on every device (based on its available capabilities).

Users on modern platforms (browsers, devices) see enhanced experiences that can feel platform-native - while users on older platforms still see a usable experience with the PWA falling back to familiar website behaviors.

In summary: PWA combine the broader reach of websites with the richer capabilities of native apps - scaling user experiences up or down to optimize for the capabilities of the current device.

How does it do that? Let's talk about: Progressive Enhancement!

What is Progressive Enhancement?

Progressive enhancement is a design philosophy that puts emphasis on content-first experiences.

• Developers prioritize a baseline experience where users can consume core content from any device, even those with older browsers.
• Developers then detect support for newer features on devices to unlock enhanced experiences on these more-capable platforms.

Take a look at the figure below for context.

When we think of apps today, we think of installed native apps (blue) or browser-based web apps ( yellow). Browsers themselves are native apps on the relevant device.

• Native apps work only on their target device platforms, requiring a dedicated codebase (and team) for each target, but unlocking richer hardware-enabled features.

• Web apps work everywhere with a single codebase (and team) - but are limited in their ability to use platform-specific features to ensure consistent experiences across platforms.

Progressive Web Apps use open web technologies (e.g., Service Workers, HTTPS, Web App Manifest, Push Notifications, Web APIs) with feature-detection (to establish on-device support) to deliver experiences that scale from functional website (default) to richer native-like experiences.

• Start with usable website (default)
• Make it responsive (mobile + desktop)
• Make it secure (HTTPS endpoint)
• Make it installable (web app manifest)
• Make it work offline (service workers)
• Make it reactive (push notifications)
• Make it richer (web APIs, capabilities)

What characterizes a "good" PWA?

Progressive Web Apps are based on a philosophy for design ("progressive enhancement") and not on prescriptive rules ("how to implement"). When we think of developing PWA, we focus on these desirable characteristics:

Other Topics

This is a shortened version of the original post for Day 1 of #30DaysOfPWA. Visit that post to read additional sections:

• How does PWA compare to web and native experiences? (examples)
• What drives real-world PWA adoption? (success stories, relevant metrics)

Exercise: Install your first PWA

One of the best ways to understand PWA experiences and benefits is to take one for a spin! Try this out:

1. Choose a sample PWA. Visit the deployed app and explore the experience. Bookmark the repository to revisit source later.
2. Install it from browser on desktop and mobile devices and make sure the app launches on both.

Questions to think about - how does the experience differ between:

• desktop and mobile?
• in-browser and installed versions?
• installed version and other "native" apps?

We'll use the installed app and source code from this sample PWA to explore various concepts in more depth, next.

About the Author

The #30DaysOfPWA series is a multi-author collaboration. We'll introduce each author in their first published post in the series.

Today's featured author is: me!

I am curating the series on dev.to, and authored Week 1 posts focused on Core Concepts. I'm on the JavaScript Advocacy team in Microsoft Developer Relations. I'm also an avid visual storyteller - explore my illustrated guides at @sketchthedocs and look out for PWA visuals and analogies in upcoming posts.

.ltag__user__id__8619 .follow-action-button { background-color: #e345ce !important; color: #ffffff !important; border-color: #e345ce !important; }

Nitya NarasimhanFollow

PhD & Polyglot / Senior Cloud Advocate @Microsoft / I love mobile, web and visual storytelling / Be fearless, learn continuously!

Want to read more content from Microsoft technologists? Don't forget to follow Azure right here on dev.to:

.ltag__user__id__512 .follow-action-button { background-color: #FFFFFF !important; color: #007DCE !important; border-color: #007DCE !important; }

Microsoft Azure Follow

Any language. Any platform.