Progressive Web Apps: Where Do I Begin?

A presentation at An Event Apart Washington DC in July 2019 in Washington, DC, USA by Aaron Gustafson

PWA s Where Do I Begin? Aaron Gustafson @AaronGustafson noti.st/AaronGustafson

“Progressive Progressive Web App” App is a marketing term

Game Gallery Book Progressive Web App Newspaper Art Project Tool

@AaronGustafson What’s a PWA, technically? HTTPS

@AaronGustafson What’s a PWA, technically? HTTPS Web App Manifest

@AaronGustafson What’s a manifest? { “lang”: “en”, “short_name”: “Wash Post”, “name”: “The Washington Post”, “icons”: [ { “src”: “img/launcher-icon-2x.png”, “sizes”: “96x96”, “type”: “image/png” } ], “start_url”: “/pwa/”, “display”: “standalone”, “orientation”: “portrait”, “background_color”: “black” }

@AaronGustafson What’s a PWA, technically? HTTPS Web App Manifest Service Worker

Starbucks: 2x increase in daily active users aka.ms/google-io-2018

Tinder: Core experience with 90% less code aka.ms/tinder-pwa-2017

Trivago: 97% increase in click-outs to hotel offers aka.ms/trivago-pwa-2017

West Elm: 15% increase in time on site 9% increase in revenue per visit aka.ms/west-elm-pwa-2017

@AaronGustafson Let’s talk about Service Worker

@AaronGustafson Registering a Service Worker if ( “serviceWorker” in navigator ) { navigator.serviceWorker.register( “/serviceworker.min.js” ); } h t a P p m is i ! t n a t or

@AaronGustafson The Service Worker Lifecycle Browser Install Activation aka.ms/pwa-lifecycle Ready

@AaronGustafson How connections are made Browser Internet

@AaronGustafson Along comes Service Worker Browser Cache Internet

PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement

Progressive /prəˈɡresiv/ happening or developing gradually or in stages; proceeding step by step

Consider forbes.com circa 2007 @AaronGustafson

“Mobile first” thinking isn’t just about mobile

Step 2 Use markup that supports the core experience Avinash Arunachalam AM Patrick Perkins

@AaronGustafson What does it mean? <div class=”entry”> <div class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</div> <div class=”entry__meta”> <div><b>Published</b> 24 May 2017</div> <div><b>Reading Time</b> 25 minutes</div> </div> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </div>

@AaronGustafson This is self-contained content <div class=”entry”> <div class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</div> <div class=”entry__meta”> <div><b>Published</b> 24 May 2017</div> <div><b>Reading Time</b> 25 minutes</div> </div> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </div>

@AaronGustafson There’s a tag for that: article <article class=”entry”> <div class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</div> <div class=”entry__meta”> <div><b>Published</b> 24 May 2017</div> <div><b>Reading Time</b> 25 minutes</div> </div> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </article>

@AaronGustafson This is the title of the post <article class=”entry”> <div class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</div> <div class=”entry__meta”> <div><b>Published</b> 24 May 2017</div> <div><b>Reading Time</b> 25 minutes</div> </div> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </article>

@AaronGustafson There’s a tag for that: h1-h6 <article class=”entry”> <h1 class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</h1> <div class=”entry__meta”> <div><b>Published</b> 24 May 2017</div> <div><b>Reading Time</b> 25 minutes</div> </div> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </article>

@AaronGustafson Various properties of the post <article class=”entry”> <h1 class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</h1> <div class=”entry__meta”> <div><b>Published</b> 24 May 2017</div> <div><b>Reading Time</b> 25 minutes</div> </div> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </article>

@AaronGustafson There’s an element for that: dl <article class=”entry”> <h1 class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</h1> <dl class=”entry__meta”> <dt>Published</dt> <dd>24 May 2017</dd> <dt>Reading Time</dt> <dd>25 minutes</dd> </dl> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </article>

@AaronGustafson Bonus: time <article class=”entry”> <h1 class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</h1> <dl class=”entry__meta”> <dt>Published</dt> <dd><time>24 May 2017</time></dd> <dt>Reading Time</dt> <dd>25 minutes</dd> </dl> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </article>

@AaronGustafson Bonus: time <time datetime=”2017-05-24”> 24 May 2017</time> <time datetime=”2017-05-24T11:13:24”> 24 May 2017</time> <time datetime=”2017-05-24T11:13:24-04:00”> 24 May 2017</time>

@AaronGustafson “Flow” content with line breaks <article class=”entry”> <h1 class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</h1> <dl class=”entry__meta”> <dt>Published</dt> <dd><time …>24 May 2017</time></dd> <dt>Reading Time</dt> <dd>25 minutes</dd> </dl> <div class=”entry__content”> I had the great pleasure of delivering a talk… <br><br> I do a lot of traveling and it’s… </div> </article>

@AaronGustafson “Flow” content, divided <article class=”entry”> <h1 class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</h1> <dl class=”entry__meta”> <dt>Published</dt> <dd><time …>24 May 2017</time></dd> <dt>Reading Time</dt> <dd>25 minutes</dd> </dl> <div class=”entry__content”> <div>I had the great pleasure of delivering a…</div> <div>I do a lot of traveling and it’s…</div> </div> </article>

@AaronGustafson This is meaningful content <article class=”entry”> <h1 class=”entry__title”>Progressive Web Apps and the Windows Ecosystem</h1> <dl class=”entry__meta”> <dt>Published</dt> <dd><time …>24 May 2017</time></dd> <dt>Reading Time</dt> <dd>25 minutes</dd> </dl> <div class=”entry__content”> <p>I had the great pleasure of delivering a talk…</p> <p>I do a lot of traveling and it’s…</p> </div> </article>

Hey Cortana, read me the top three headlines in today’s New York Times

@AaronGustafson Access via semantics: function extractHeadlines( response ){ var $html = document.createElement(‘div’), $headings, i=0, headlines=[]; $html.innerHTML = response.contents; $headings = $html.querySelector(‘#top-new’) .querySelectorAll(‘article h1, article h2, article h3’); heading_count = $headings.length; while (headlines.length < 3) { let $link = $headings[i].querySelector(‘a’); if ($link && $link.href) { headlines.push({ title: $headings[i].innerText.trim(), link: $link.href }); } i++; } console.log( headlines ); }

More about semantics for “headless” UIs aka.ms/conversational-semantics

@AaronGustafson Let’s say you needed a button… <input type=”submit” value=”Sign Up”> Sign Up <button type=”submit”>Sign Up</button> <a class=”button” href=”#”>Sign Up</a> <div class=”button”>Sign Up</div>

@AaronGustafson Let’s compare Pattern input[type=submit] button[type=submit] a div Display button Semantics button Focusable? Activate By Submits Forms Yes Mouse, touch, ENTER, SPACE Yes Yes Mouse, touch, ENTER, SPACE Yes No No button button link Named generic Yes Mouse, touch, ENTER block Not exposed No N/A

@AaronGustafson UX gaps that need to be filled Pattern input[type=submit] button[type=submit] a div Display button Semantics button Focusable? Activate By Submits Forms Yes Mouse, touch, ENTER, SPACE Yes Yes Mouse, touch, ENTER, SPACE Yes No No button button link Named generic Yes Mouse, touch, ENTER block Not exposed No N/A

@AaronGustafson Moar dependencies Pattern Display Semantics Focusable? Activate By Submits Forms input[type=submit] None None None None None button[type=submit] None None None None None a CSS ARIA None JavaScript JavaScript div CSS ARIA HTML JavaScript JavaScript

@AaronGustafson Potential for failure Moar dependencies, moar (potential) problems Dependencies

@AaronGustafson User Experience Enhance the experience Capabilities

@AaronGustafson Enhancing UX with markup <input type=”email” name=”email” id=”email” required aria-required=”true”>

@AaronGustafson Enhancing UX with markup <input type=”email” name=”email” id=”email” required aria-required=”true”> Experience deltas 1. Support for email input type? 2. Validation algorithm implemented? 3. Virtual keyboard?

@AaronGustafson Enhancing UX with markup <input type=”email” name=”email” id=”email” required aria-required=”true”> Experience deltas 1. Support for HTML validation?

@AaronGustafson Enhancing UX with markup <input type=”email” name=”email” id=”email” required aria-required=”true”> Experience deltas 1. Browser exposure of aria-required property? 2. Assistive tech implementation of aria-required?

Step 3 Design in support of the core experience Avinash Arunachalam AM Chris Grafton

Good design is problem solving. — Jeff Veen

@AaronGustafson Tools for graphic design Alignment Proportion Balance Proximity Contrast Repetition Emphasis Rhythm Gestalt Unity Harmony White Space Movement

@AaronGustafson Rhythm aka.ms/vertical-rhythm

@AaronGustafson Unique design considerations Screen size Resolution Brightness Color density User preference Network speed & quality Assistive technology

@AaronGustafson Examples of user preference Larger or smaller fonts @media (min-width: 32em) { … } High contrast colors @media (-ms-high-contrast: active) { … } @media (-ms-high-contrast: white-on-black) { … } @media (-ms-high-contrast: black-on-white) { … } Reduced motion @media (prefers-reduced-motion: reduce) { … }

@AaronGustafson Assistive technologies ๏ Vision ๏ Motor/mobility ๏ Screen magnifiers ๏ Speech recognition ๏ Screen readers ๏ Mouse settings ๏ Braille printers & refreshable braille displays ๏ Keyboards & keyboard overlays ๏ High contrast settings ๏ Eye tracking ๏ Hearing ๏ Captions & subtitles

Don’t rely on color alone to convey important information Confirm Cancel Confirm Cancel

Good contrast ensures your content is readable aka.ms/color-contrast

Explicit connections ensure everyone can follow references

Explicit connections ensure everyone can follow references <a href=”#figure-3-3”>Figure 3.3</a> shows the lodging article in Safari with only the default browser styles applied. …
<figure id=”figure-3-3”> … </figure>

Consider what your design leaves unsaid aria-label=”You can finish reading “The Web Should Just Work for Everyone” in less than 10 minutes”

@AaronGustafson Enhancing design in CSS p { color: green; color: rgba(0, 255, 0, .8); } Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS p { color: green; color: rgba(0, 255, 0, .8); } Older browsers without RGBa support, ignore the second rule Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS p { color: green; color: rgba(0, 255, 0, .8); } Modern browsers with RGBa support, overwrite the first rule

@AaronGustafson Enhancing design in CSS h1:has(+ p) { color: green; } (That selects h1s that have adjacent sibling paragraphs.) Passwords can be a hassle Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS h1:has(+ p) { color: green; } Browsers that don’t support :has() ignore the entire rule set Passwords can be a hassle Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Beware the comma! div:hover .extra-stuff, div:focus-within .extra-stuff { /* reveal it */ }

@AaronGustafson Beware the comma! div:hover .extra-stuff, div:focus-within .extra-stuff { /* reveal it */ } Browsers that don’t support :focus-within

@AaronGustafson Beware the comma! div:hover .extra-stuff, div:focus-within .extra-stuff { /* reveal it */ } Browsers that do support :focus-within

@AaronGustafson Enhancing design in CSS h1:has(+ p) { color: green; } As browsers support :has(), matching h1s will turn green Passwords can be a hassle Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS @media only screen { p { color: green; } } Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS @media only screen { p { color: green; } } Browsers without media query support ignore the block Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS @media only screen { p { color: green; } } Browsers with media query support apply it Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS @supports (display: grid) { p { color: green; } } Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS @supports (display: grid) { p { color: green; } } Browsers that don’t grok @supports ignore the block Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS @supports (display: grid) { p { color: green; } } Browsers that understand @supports, but don’t support grid ignore it Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

@AaronGustafson Enhancing design in CSS @supports (display: grid) { p { color: green; } } Browsers that understand @supports and grid apply it Passwords can be a hassle. Most people don’t create strong passwords or make sure to maintain a different one for every site. People create easy-to-remember passwords and typically use the same passwords across all of their accounts.

.primary { float: left; width: 68%; } .secondary { float: right; “Desktop first” width: 32%; }

“Desktop first” @media (max-width:599px) { .primary, .secondary { float: none; width: auto; } }

@AaronGustafson Also “mobile first” ๏ Selectively deliver advances styles ๏ Isolate large CSS images in min-width media queries ๏ Don’t hide content images using CSS ๏ Use responsive images ๏ Prefer system fonts ๏ font-display: optional

Step 4 Improve the core experience with JavaScript ChrisCreswick Grafton Jacob

@AaronGustafson Got let? document.body.innerHTML += ‘<p>Can I count to four?</p>’; for ( let i=1; i<=4; i++ ) { document.body.innerHTML += ‘<p>’ + i + ‘</p>’; } document.body.innerHTML += ‘<p>Success!</p>’;

As part of our refined approach to building frontend features on GitHub.com, we focused on getting away with regular HTML foundation as much as we could, and only adding JavaScript behaviors as progressive enhancement. As a result, even those web forms and other UI elements that were enhanced using JS would usually also work with JavaScript disabled in the browser. aka.ms/github-removes-jquery

@AaronGustafson Detecting support if ( navigator.credentials ) { // Actual logic goes here }

@AaronGustafson Registering a Service Worker if ( navigator.serviceWorker ) { navigator.serviceWorker.register(‘/serviceworker.js’) .then(function(registration) { console.log(‘Success!’, registration.scope); }) .catch(function(error) { console.error(‘Failure!’, error); }); }

@AaronGustafson Object detection FTW! if ( navigator.serviceWorker ) { navigator.serviceWorker.register(‘/serviceworker.js’) .then(function(registration) { console.log(‘Success!’, registration.scope); }) .catch(function(error) { console.error(‘Failure!’, error); }); }

@AaronGustafson User Experience Enhance the Service Worker Capabilities

Aaron Gustafson
@aarongustafson

1 / 155

For the last three years, our industry has been coming to terms with Progressive Web Apps (PWAs) and what they mean for the work we do every day. Scores of articles, reams of documentation, and dozens of white papers touting the successes and failures in this space can really get your head spinning. It’s easy to get lost in the complexities of service workers, manifests, and oh so many JavaScript frameworks and toolkits. Aaron believes it’s time to take a step back and refocus our attention on what really matters: building great web experiences. In this session, you’ll learn how to apply modern web design and development best practices to your web projects. You’ll learn how to grow a project from a core, universally-accessible experience to a sophisticated Progressive Web App that ensures users will be able to access your product, no matter what.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Notes by Torre Capistran

Buzz and feedback

Here’s what was said about this presentation on social media.

Shout out to @aarongustafson for including live captions during his @aneventapart presentation! 👏👏👏 #AEADC #a11y
— Katie Santo (@heyjustkatie) July 31, 2019
"Progressive Web App" is more like a marketing term. People tend to focus on the "web app" part but it's really more than that. Game, gallery, book, etc.

- @AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
“A progressive Web app is really just a progressive Web site“ #aeadc @AaronGustafson
— Sara Soueidan (@SaraSoueidan) July 31, 2019
what is PWA, technically?

* https
* web app manifest
* service worker@AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
PWA doesn't always mean mobile. Starbucks received more orders through their desktop. @AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
When going through the service worker lifestyle, you should keep in mind the idea of being offline first but not necessarily starting from offline first. @AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
The core idea behind PWAs is Progressive Enhancement. @AaronGustafson #AEADC
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement. @AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
A Tinder Progressive Web App performance case study. By Addy Osmani. Cited by @AaronGustafson. https://t.co/987w1RS5w2 #PWA #AEADC #ServiceWorkers
— zeldman (@zeldman) July 31, 2019
PWA Stats – a community-driven list of stats and news related to Progressive Web Apps, from @CloudFour, ℅ @AaronGustafson. https://t.co/EgwtW6vRtO #PWA #AEADC #ServiceWorkers
— zeldman (@zeldman) July 31, 2019
"Mobile first" thinking is just about mobile. It's focusing on the most important content for the user. Is there anything distracting them from achieving their goal?@AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
"Text is the first interface" – @aarongustafson #aeadc

🔤 = 1️⃣
— karl 🔊 (@karlnoelle) July 31, 2019
Want to learn how to write better language for your users?
Nicely Said - Writing for the Web with Style and Purpose by @nicoleslaw https://t.co/6FBeNNU2gN @AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
How can you see if you used the right semantics in your code? Turn off your CSS to see how your content is displayed. @AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
“Poor semantics is an exclusionary design choice” — @AaronGustafson , at the #AEADC #a11y
— Marcello Damasceno (@marcellod) July 31, 2019
Poor semantics is a non-inclusive design choice. It creates a mismatch between the experiences of sighted and non-sighted people. @AaronGustafson #AEADC #InclusiveDesign
— zeldman (@zeldman) July 31, 2019
Not all buttons are created equal.@AaronGustafson #AEADC pic.twitter.com/YDE17hcGQs
— Katie Santo (@heyjustkatie) July 31, 2019
...and to make it equal-ish, there’s a lot of extra work you need to do.@AaronGustafson #AEADC pic.twitter.com/wfrU9PUylv
— Katie Santo (@heyjustkatie) July 31, 2019
Use structured markup to make your content meaningful and navigable to Alexa, Cortana, Siri, and even customer support chat bots.

“Conversational Semantics” by @AaronGustafson in @AListApart. https://t.co/Kzvo7B87Bp #AEADC
— zeldman (@zeldman) July 31, 2019
Progressive Enhancement Demo by @mmatuzo

Levels of enhancement:
* no positioning
* floated layout
* flexbox positioning
* css grid layouthttps://t.co/UBMbBBlZe6 @AaronGustafson #aeadc
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
Differences about semantics with HTML elements Button, input, a & div

(@AaronGustafson)#aeadc @aneventapart #ux #design #alistapart #front-end #css #animation #responsive #designops #strategy #communication #team #html #semantics pic.twitter.com/eZD4V6jzm0
— Mauricio Hernández (@mauricioux) July 31, 2019
@AaronGustafson Aaron, loving your talk at AnEventApart. How are you getting the live transcriptions to appear on your slides? What service do you use and what's your setup? Would love to do the same for my next presentation.
— Bryan Casler (@Bryancasler) July 31, 2019
So refreshing hearing @AaronGustafson promote all of my favorite best practices/approaches to building sites and apps today like PWA, mobile-first development, progressive-enhancement, accessibility, etc.

I haven't enjoyed a talk like this in quite some time. #aeadc
— Sara Soueidan (@SaraSoueidan) July 31, 2019
“We can and we should use JavaScript. We just have to do so with intent.” @AaronGustafson #aeadc
— Sara Soueidan (@SaraSoueidan) July 31, 2019
“We can’t always be certain that our JavaScript will reach our users.“ @AaronGustafson #aeadc

Related: “Everyone has JavaScript, right?”https://t.co/g0Xe3spb7d
— Sara Soueidan (@SaraSoueidan) July 31, 2019
Loved the speech-to-text during @AaronGustafson #aeadc presentation and panel. It was helpful, but also funny when you see words being translated to something unrelated.

Thanks for the great talk on PWAs! pic.twitter.com/YCr43nFDhg
— Candi 💌📚 Lemoine @ An Event Apart DC (@candicodeit) July 31, 2019
Notes from @AaronGustafson's talk on #progressivewebapps and what it means to create good and enhanced stuff on the web (hint: inclusivity!) at @aneventapart #aeadc here: https://t.co/7Uk9jxecgd
— Torre Capistran (@torrecapistran) July 31, 2019
"It’s time to take a step back and refocus our attention on what really matters: building great web experiences." | Progressive Web Apps: Where Do I Begin?, a presentation by @AaronGustafson https://t.co/O4pY5QaDU9 #accessibility pic.twitter.com/9vYFQ4OscN
— David Dzumba (@ddzumba) July 31, 2019

Progressive Web Apps: Where Do I Begin?

Link for this presentation:

HTML code for embedding:

Share on social media:

Video

Resources

Notes by Torre Capistran

Buzz and feedback