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.

PWA: Where Do I Begin? [Microsoft Ignite 2018]

147 views

Published on

In this session, you'll learn how to apply modern best practices to grow your Progressive Web Apps fluidly from mobile devices all the way to large screen desktop environments. You’ll even learn how to lay the groundwork for reaching users of future form factors and “headless” UIs. We'll focus on design patterns that set you up for success on every device and across platforms and guarantee your users will be able to access your product, no matter what. Additional topics will include a primer on how your PWA can integrate more tightly with Windows 10—including how to distribute your PWA via the Store—and how to incorporate accessibility from the very beginning.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

PWA: Where Do I Begin? [Microsoft Ignite 2018]

  1. 1. Katarzyna Ostrowska aka.ms/carnival-pwa
  2. 2. aka.ms/google-io-2018
  3. 3. aka.ms/tinder-pwa-2017
  4. 4. aka.ms/trivago-pwa-2017
  5. 5. aka.ms/west-elm-pwa-2017
  6. 6. Park Troopers
  7. 7. HTTPS
  8. 8. HTTPS Web App Manifest
  9. 9. HTTPS Web App Manifest Service Worker
  10. 10. Browser Internet
  11. 11. Browser Browser Internet Internet Cache Service Worker
  12. 12. Browser Browser Internet Internet Cache Service Worker
  13. 13. HTTPS Web App Manifest Service Worker
  14. 14. Ryan Wilson
  15. 15. PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement Ryan Wilson
  16. 16. PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement Ryan Wilson
  17. 17. Sign in and get to documents, apps, and sites that are relevant to you, in one place: www.office.com. Open and switch between apps most relevant to you with Office 365 app launcher. Explore Office 365 apps you are entitled to with the personalized Office 365 gallery.
  18. 18. 6x improved search success rate with new enterprise-wide search Office.com growth 2x monthly users so far in 2018 to 40M monthly active users
  19. 19. Bringing the value of Office.com on the web to Windows 10 users. Installation Engagement Performance Resilience
  20. 20. Extend the Office.com value to local applications and documents. Installation Engagement Performance Resilience
  21. 21. 5s / 1.5s Installation Engagement Performance Resilience Using ServiceWorker we have been able to significantly reduce the DOM render time
  22. 22. Installation Engagement Performance Resilience Supporting offline and low-bandwidth network scenarios.
  23. 23. Bring the full value of Office.com to Window 10 desktop users. Extend the value to provide app-specific differentiated value. Do so quickly.
  24. 24. Ryan Wilson
  25. 25. Ryan Wilson
  26. 26. Epicurrence
  27. 27. Consider forbes.com circa 2007
  28. 28. “Mobile first” thinking isn’t just about mobile
  29. 29. Epicurrence
  30. 30. Epicurrence
  31. 31. Isa Martine
  32. 32. <br>
  33. 33. <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>
  34. 34. <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>
  35. 35. <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>
  36. 36. <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>
  37. 37. <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>
  38. 38. <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>
  39. 39. <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>
  40. 40. <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>
  41. 41. <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 talk…</div> <div>I do a lot of traveling and it’s…</div> </div> </article>
  42. 42. <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>
  43. 43. Isa Martine
  44. 44. “Hey Cortana, read me the top three headlines in today’s New York Times”
  45. 45. function extractHeadlines( response ){ var $html = document.createElement('div'), $headings, i=0, headlines=[]; $html.innerHTML = response.contents; $headings = $html.querySelector('#top-news') .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 ); }
  46. 46. More about semantics for “headless” UIs aka.ms/conversational-semantics
  47. 47. aka.ms/dependency-awareness
  48. 48. <a class="button" href="#">Sign Up</a> <div class="button">Sign Up</div> Sign Up
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Dependencies Potentialforfailure
  54. 54. Dependencies Potentialforfailure
  55. 55. Capabilities UserExperience
  56. 56. <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?
  57. 57. <input type="email" name="email" id="email" required aria-required="true"> Experience deltas 1. Support for HTML validation?
  58. 58. <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?
  59. 59. Capabilities UserExperience
  60. 60. Isa Martine
  61. 61. Isa MartineMatt Popovich
  62. 62. Capabilities UserExperience
  63. 63. aka.ms/enhanced-css-layouts
  64. 64. Good design is problem solving.
  65. 65. aka.ms/vertical-rhythm
  66. 66. ☞ ☞ ☞ ☞ ☞
  67. 67.  Screen size  Resolution  Brightness  Color density  User preference  Network speed & quality  Assistive technology
  68. 68. Confirm Cancel Confirm Cancel Don’t rely on color alone to convey important information
  69. 69. aka.ms/color-contrast Good contrast ensures your content is readable
  70. 70. Explicit connections ensure everyone can follow references
  71. 71. <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
  72. 72. Consider what your design leaves unsaid
  73. 73. Consider what your design leaves unsaid
  74. 74. <b class="hidden">You can</b> <b class="hidden">“The Web Should Just Work for Everyone” in less than 10 minutes</b> Consider what your design leaves unsaid
  75. 75. Consider what your design leaves unsaid
  76. 76. <a href="…" >Finish Reading</a> Consider what your design leaves unsaid
  77. 77. Capabilities UserExperience
  78. 78. 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.
  79. 79. 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.
  80. 80. Modern browsers with RGBa support, overwrite the first rule
  81. 81. (That selects h1s that have adjacent sibling paragraphs.) Passwords can be a hassle
  82. 82. Browsers that don’t support :has() ignore the entire rule set Passwords can be a hassle
  83. 83. As browsers support :has(), matching h1s will turn green Passwords can be a hassle
  84. 84. 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.
  85. 85. 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.
  86. 86. 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.
  87. 87. 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.
  88. 88. 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.
  89. 89. Browsers that understand @supports, but don’t display 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.
  90. 90. 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.
  91. 91. Matt Popovich
  92. 92. Matt Popovich
  93. 93. aka.ms/enhanced-css-layouts
  94. 94. Capabilities UserExperience
  95. 95. “Mobile first” design
  96. 96. “Desktop first”
  97. 97. @media (max-width:599px) { .primary, .secondary { float: none; width: auto; } } “Desktop first”
  98. 98. .primary { float: left; width: 68%; } .secondary { float: right; width: 32%; } “Desktop first”
  99. 99. “Mobile first”
  100. 100. @media (min-width:600px) { .primary { float: left; width: 68%; } .secondary { float: right; width: 32%; } } “Mobile first”
  101. 101. Capabilities UserExperience
  102. 102. Matt PopovichRodolfo Marques
  103. 103. Rodolfo Marques
  104. 104. 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>';
  105. 105. 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>';
  106. 106. aka.ms/js-let-down
  107. 107. aka.ms/js-let-down
  108. 108. Dependencies Potentialforfailure
  109. 109. aka.ms/github-removes-jquery
  110. 110. 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.
  111. 111. 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.
  112. 112. Rodolfo Marques
  113. 113. Capabilities UserExperience
  114. 114. if ( navigator.credentials ) { // Actual logic goes here }
  115. 115. // Create a credential with WebAuthn APIs navigator.credentials.create({ publicKey: { rp: { /* relying party info */ }, user: { /* user info */ }, authenticatorSelection: { authenticatorAttachment: "platform" }, pubKeyCredParams: [{ type: "public-key", alg: -257 /* Accept RS256 credentials */ }], // and other required parameters such as challenge, timeout, ... } }).then(attestation => { // Send the credential to your server, which decodes it and stores the public key sendToServer(attestation); });
  116. 116. // Next time the user visits the page, call the WebAuthn APIs navigator.credentials.get({ publicKey: { allowCredentials: [{ type: "public-key", id: credentialId // ID of credential(s) previously created }] // and other required parameters such as challenge, timeout, ... } }).then(assertion => { // Send the assertion to your server, which decodes it and ensures the // contained signature matches the public key received at credential creation sendToServer(assertion); });
  117. 117. Capabilities UserExperience
  118. 118. Rodolfo Marques
  119. 119. if ( navigator.serviceWorker ) { navigator.serviceWorker.register('/serviceworker.js') .then(function(registration) { console.log('Success!', registration.scope); }) .catch(function(error) { console.error('Failure!', error); }); }
  120. 120. navigator.serviceWorker.register('/serviceworker.js') .then(function(registration) { console.log('Success!', registration.scope); }) .catch(function(error) { console.error('Failure!', error); });
  121. 121. Capabilities UserExperience
  122. 122. Capabilities UserExperience
  123. 123. Capabilities UserExperience
  124. 124. if (window.Windows) { var uiSettings = new Windows.UI .ViewManagement .UISettings(); var color = uiSettings .getColorValue( Windows.UI .ViewManagement .UIColorType .background ); if (color.r == 0 && color.g == 0 && color.b == 0) { // changes for Dark Mode } } Detecting “dark mode”
  125. 125. if (window.Windows) { var uiSettings = new Windows.UI .ViewManagement .UISettings(); var color = uiSettings .getColorValue( Windows.UI .ViewManagement .UIColorType .background ); if (color.r == 0 && color.g == 0 && color.b == 0) { // changes for Dark Mode } } Detecting “dark mode”
  126. 126. if (window.Windows) { var uiSettings = new Windows.UI .ViewManagement .UISettings(); var color = uiSettings .getColorValue( Windows.UI .ViewManagement .UIColorType .background ); if (color.r == 0 && color.g == 0 && color.b == 0) { // changes for Dark Mode } } Detecting “dark mode”
  127. 127. if (window.Windows) { var uiSettings = new Windows.UI .ViewManagement .UISettings(); var color = uiSettings .getColorValue( Windows.UI .ViewManagement .UIColorType .background ); if (color.r == 0 && color.g == 0 && color.b == 0) { // changes for Dark Mode } } Detecting “dark mode”
  128. 128. if (window.Windows) { var uiSettings = new Windows.UI .ViewManagement .UISettings(); var color = uiSettings .getColorValue( Windows.UI .ViewManagement .UIColorType .background ); if (color.r == 0 && color.g == 0 && color.b == 0) { // changes for Dark Mode } } Detecting “dark mode”
  129. 129. aka.ms/dark-mode-pwa-demo
  130. 130. Rodolfo Marques
  131. 131. Capabilities UserExperience
  132. 132. Ryan Wilson
  133. 133. PWAs start with a great web experience and then enhance that experience for performance, resilience, installation, and engagement Ryan Wilson
  134. 134. Design Markup JavaScript Focus
  135. 135. aarongu@microsoft.com @AaronGustafson aka.ms/modern-web-course aka.ms/adaptive-web-design

×