Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web Apps: Where Do I Begin?

71 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Progressive Web Apps: Where Do I Begin?

  1. 1. PWAs Where Do I Begin? Aaron Gustafson @AaronGustafson noti.st/AaronGustafson
  2. 2. What exactly is a PWA?
  3. 3. Progressive Web App? What exactly is a
  4. 4. What exactly is a Progressive Web App?
  5. 5. What exactly is a Progressive Web App?
  6. 6. What exactly is a Progressive Web App?
  7. 7. “Progressive Web App” is a marketing term Progressive Web App
  8. 8. Progressive Web App
  9. 9. Progressive Web App Game Gallery Book Newspaper Art Project Tool
  10. 10. Progressive Web Site
  11. 11. Who’s behind PWAs?
  12. 12. @AaronGustafson What’s a PWA, technically? HTTPS
  13. 13. @AaronGustafson What’s a PWA, technically? HTTPS Web App Manifest
  14. 14. @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" }
  15. 15. @AaronGustafson What’s a PWA, technically? HTTPS Web App Manifest Service Worker
  16. 16. Should I believe the hype?
  17. 17. Maybe?
  18. 18. Starbucks: 2x increase in daily active users aka.ms/google-io-2018
  19. 19. Tinder: Core experience with 90% less code aka.ms/tinder-pwa-2017
  20. 20. Trivago: 97% increase in click-outs to hotel offers aka.ms/trivago-pwa-2017
  21. 21. West Elm: 15% increase in time on site 9% increase in revenue per visit aka.ms/west-elm-pwa-2017
  22. 22. @AaronGustafson Let’s talk about Service Worker
  23. 23. @AaronGustafson Registering a Service Worker if ( "serviceWorker" in navigator ) { navigator.serviceWorker.register( "/serviceworker.min.js" ); } Path is important!
  24. 24. @AaronGustafson The Service Worker Lifecycle Browser Install Activation Ready aka.ms/pwa-lifecycle
  25. 25. @AaronGustafson How connections are made Browser Internet
  26. 26. @AaronGustafson Along comes Service Worker Browser Internet Cache
  27. 27. @AaronGustafson Along comes Service Worker Browser Internet Cache !
  28. 28. PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement
  29. 29. Progressive Web AppProgressive Enhancement
  30. 30. PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement
  31. 31. Progressive Web App
  32. 32. Progressive /prəˈɡresiv/ happening or developing gradually or in stages; proceeding step by step
  33. 33. Patrick Perkins
  34. 34. @AaronGustafson Consider forbes.com circa 2007
  35. 35. “Mobile first” thinking isn’t just about mobile
  36. 36. Patrick Perkins
  37. 37. Patrick Perkins
  38. 38. Patrick PerkinsAvinash Arunachalam A M Step 2
 Use markup that supports the core experience
  39. 39. Avinash Arunachalam A M
  40. 40. @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>
  41. 41. @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>
  42. 42. @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>
  43. 43. @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>
  44. 44. @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>
  45. 45. @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>
  46. 46. @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>
  47. 47. @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>
  48. 48. @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>
  49. 49. @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>
  50. 50. @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>
  51. 51. @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>
  52. 52. Avinash Arunachalam A M
  53. 53. @AaronGustafson Readability
  54. 54. Hey Cortana, read me the top three headlines in today’s New York Times
  55. 55. @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 ); }
  56. 56. @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 ); }
  57. 57. More about semantics for “headless” UIs aka.ms/conversational-semantics
  58. 58. aka.ms/dependency-awareness
  59. 59. @AaronGustafson Let’s say you needed a button… <input type="submit" value="Sign Up"> <button type="submit">Sign Up</button> <a class="button" href="#">Sign Up</a> <div class="button">Sign Up</div> Sign Up
  60. 60. @AaronGustafson Let’s compare Pattern Display Semantics Focusable? Activate By Submits Forms input[type=submit] button button Yes Mouse, touch, ENTER, SPACE Yes button[type=submit] button button Yes Mouse, touch, ENTER, SPACE Yes a link Named generic Yes Mouse, touch, ENTER No div block Not exposed No N/A No
  61. 61. @AaronGustafson UX gaps that need to be filled Pattern Display Semantics Focusable? Activate By Submits Forms input[type=submit] button button Yes Mouse, touch, ENTER, SPACE Yes button[type=submit] button button Yes Mouse, touch, ENTER, SPACE Yes a link Named generic Yes Mouse, touch, ENTER No div block Not exposed No N/A No
  62. 62. @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
  63. 63. @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
  64. 64. @AaronGustafson Moar dependencies, moar (potential) problems Dependencies Potentialforfailure
  65. 65. @AaronGustafson Disaster averted
  66. 66. @AaronGustafson Moar dependencies, moar (potential) problems Dependencies Potentialforfailure
  67. 67. @AaronGustafson Enhance the experience Capabilities UserExperience
  68. 68. @AaronGustafson Enhancing UX with markup <input type="email" name="email" id="email" required aria-required="true">
  69. 69. @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?
  70. 70. @AaronGustafson Enhancing UX with markup <input type="email" name="email" id="email" required aria-required="true"> Experience deltas 1. Support for HTML validation?
  71. 71. @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?
  72. 72. @AaronGustafson Enhance the experience Capabilities UserExperience
  73. 73. Avinash Arunachalam A M
  74. 74. Avinash Arunachalam A MChris Grafton Step 3
 Design in support of the core experience
  75. 75. @AaronGustafson Enhance the experience Capabilities UserExperience
  76. 76. aka.ms/enhanced-css-layouts
  77. 77. Good design is problem solving. — Jeff Veen
  78. 78. @AaronGustafson Tools for graphic design Alignment Balance Contrast Emphasis Gestalt Harmony Movement Proportion Proximity Repetition Rhythm Unity White Space
  79. 79. @AaronGustafson Tools for graphic design Alignment Balance Contrast Emphasis Gestalt Harmony Movement Proportion Proximity Repetition Rhythm Unity White Space
  80. 80. @AaronGustafson Alignment
  81. 81. @AaronGustafson Contrast
  82. 82. @AaronGustafson Proportion
  83. 83. @AaronGustafson Proximity
  84. 84. @AaronGustafson Rhythm aka.ms/vertical-rhythm
  85. 85. @AaronGustafson Unity
  86. 86. @AaronGustafson Unique design considerations Screen size Resolution Brightness Color density User preference Network speed & quality Assistive technology
  87. 87. @AaronGustafson Unique design considerations Screen size Resolution Brightness Color density User preference Network speed & quality Assistive technology ☞ ☞ ☞ ☞ ☞
  88. 88. @AaronGustafson Unique design considerations Screen size Resolution Brightness Color density User preference Network speed & quality Assistive technology
  89. 89. @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) { … }
  90. 90. @AaronGustafson Assistive technologies ๏ Vision ๏ Screen magnifiers ๏ Screen readers ๏ Braille printers & refreshable braille displays ๏ High contrast settings ๏ Hearing ๏ Captions & subtitles ๏ Motor/mobility ๏ Speech recognition ๏ Mouse settings ๏ Keyboards & keyboard overlays ๏ Eye tracking
  91. 91. Confirm Cancel Confirm Cancel Don’t rely on color alone to convey important information
  92. 92. aka.ms/color-contrast Good contrast ensures your content is readable
  93. 93. Explicit connections ensure everyone can follow references
  94. 94. <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> Explicit connections ensure everyone can follow references
  95. 95. Consider what your design leaves unsaid
  96. 96. aria-label="You can finish reading “The Web Should Just Work for Everyone” in less than 10 minutes" Consider what your design leaves unsaid
  97. 97. @AaronGustafson Enhance the experience Capabilities UserExperience
  98. 98. @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.
  99. 99. @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.
  100. 100. @AaronGustafson Enhancing design in CSS p { color: green; color: rgba(0, 255, 0, .8); } Modern browsers with RGBa support, overwrite the first rule
  101. 101. @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.
  102. 102. @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.
  103. 103. @AaronGustafson Beware the comma! div:hover .extra-stuff, div:focus-within .extra-stuff { /* reveal it */ }
  104. 104. @AaronGustafson Beware the comma! div:hover .extra-stuff, div:focus-within .extra-stuff { /* reveal it */ } Browsers that don’t support :focus-within
  105. 105. @AaronGustafson Beware the comma! div:hover .extra-stuff, div:focus-within .extra-stuff { /* reveal it */ } Browsers that do support :focus-within
  106. 106. @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.
  107. 107. @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.
  108. 108. @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.
  109. 109. @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.
  110. 110. @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.
  111. 111. @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.
  112. 112. @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.
  113. 113. @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.
  114. 114. Chris Grafton
  115. 115. Chris Grafton
  116. 116. aka.ms/enhanced-css-layouts
  117. 117. @AaronGustafson Enhance the experience Capabilities UserExperience
  118. 118. “Mobile first” design
  119. 119. “Desktop first”
  120. 120. .primary { float: left; width: 68%; } .secondary { float: right; width: 32%; } “Desktop first”
  121. 121. @media (max-width:599px) { .primary, .secondary { float: none; width: auto; } } “Desktop first”
  122. 122. “Mobile first”
  123. 123. @media (min-width:600px) “Mobile first”
  124. 124. @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
  125. 125. @AaronGustafson Enhance the experience Capabilities UserExperience
  126. 126. Chris GraftonJacob Creswick Step 4
 Improve the core experience with JavaScript
  127. 127. Jacob Creswick
  128. 128. Jacob Creswick
  129. 129. @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>';
  130. 130. aka.ms/js-let-down
  131. 131. aka.ms/js-let-down
  132. 132. @AaronGustafson Moar dependencies, moar (potential) problems Dependencies Potentialforfailure
  133. 133. aka.ms/github-removes-jquery
  134. 134. aka.ms/github-removes-jquery 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.
  135. 135. aka.ms/github-removes-jquery 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.
  136. 136. Jacob Creswick
  137. 137. @AaronGustafson Enhance the experience Capabilities UserExperience
  138. 138. @AaronGustafson Detecting support if ( navigator.credentials ) { // Actual logic goes here }
  139. 139. @AaronGustafson Enhance the experience Capabilities UserExperience
  140. 140. Jacob Creswick
  141. 141. @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); }); }
  142. 142. @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); }); }
  143. 143. @AaronGustafson Enhance the experience Capabilities UserExperience
  144. 144. @AaronGustafson Enhance the experience Capabilities UserExperience
  145. 145. @AaronGustafson Enhance the Service Worker Capabilities UserExperience
  146. 146. Jacob Creswick
  147. 147. @AaronGustafson Enhance the experience Capabilities UserExperience
  148. 148. PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement
  149. 149. PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement
  150. 150. Design Markup JavaScript Focus
  151. 151. Thank you! @AaronGustafson aaron-gustafson.com noti.st/AaronGustafson

×