PADNUG — Designing Progressive Web Apps

Dac45089aeda3bca56193072601a49d4?s=47 Jason Grigsby
September 04, 2018

PADNUG — Designing Progressive Web Apps

If you have a website — particularly one that generates revenue for your organization — you need a Progressive Web App. So where do you begin?

How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)?

In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

September 04, 2018
Tweet

Transcript

  1. Designing Progressive Web Apps

  2. We need a progressive web app!

  3. What is a progressive web app?

  4. How do we create a plan for this?

  5. Do we need a progressive web app?

  6. How does the CEO even know about progressive web apps?

  7. Cool. I’ve been wanting to play with service workers… Maybe

    we can use Vue.js here as well… I wonder if this can be used as excuse to switch to node js…
  8. None
  9. How does the CEO even know about progressive web apps?

  10. None
  11. None
  12. eXtra Electronics • 12% click-through rate • 100% more sales

    from users arriving via web push • 4x increase in re-engagement Source: Google, http://bit.ly/2eqSf18
  13. Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

  14. None
  15. What is a progressive web app?

  16. Original Definition by Frances Berriman and Alex Russell Responsive 


    Fit any form factor. RWD FTW! Connectivity Independent
 Offline features thanks to service workers. App-like interactions
 App shell for apps navigation. Fresh
 Up-to-date thanks to service workers. Safe
 Served on HTTPS. Discoverable
 Manifest files identify them as apps. Re-engageable
 Push notifications bring people back to apps. Installable
 Can be installed to the home screen w/o app stores. Linkable
 Still part of the web—URLs still work. Progressive
 Use progressive enhancement for better experience.
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22

  25. PWA is a website that has been enhanced with: {manifest}

    https service worker Credit to Jeremy Keith for explicitly declaring a technical definition: https://adactio.com/journal/13098
  26. https

  27. https

  28. https

  29. None
  30. None
  31. Let’s Encrypt is a free, automated, and open Certificate Authority.

    We are a 501(c)(3) nonprofit. We're running a crowdfunding campaign to support our operations, please consider contributing now! Get Started Donate FROM OUR BLOG Nov 1, 2016 Launching Our Crowdfunding Campaign Today we kicked off our first crowdfunding campaign with the goal of raising enough funds to cover about one month of our operations - $200,000. Read more Oct 27, 2016 Our First Grant: The Ford Foundation We are proud to announce that The Ford Foundation has awarded us a grant to help our growing operations. Read more Oct 24, 2016 Squarespace OCSP Stapling Implementation MA JOR SPONSORS Documentation Get Help Donate ▾ About Us ▾
  32. None
  33. Even existing features that used to work on HTTP, like

    GeoLocation API, now require HTTPS
  34. Soon browsers will warn users that your site isn’t on

    HTTPS
  35. service worker

  36. Progressive Web App Service Worker Cache Network Explicit control of

    network requests and cache
  37. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr

  38. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr

  39. Service workers are also key to providing an offline experience

    and push notifications
  40. {manifest}

  41. { name: "Cloud Four", short_name: "Cloud Four", description: "We design

    and develop responsive websites and progressive web apps.", icons: [ { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" }, { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" } ], theme_color: "#456BD9", background_color: "#FFFFFF", display: "standalone", orientation: "natural", start_url: "/", gcm_sender_id: "482941778795" } Manifest files are simple JSON documents
  42. Add to home screen install banners Source: Google, http://bit.ly/2ejW2Rr

  43. PWA is a website that has been enhanced with: {manifest}

    https service worker But PWAs can be much more…
  44. Progressive web apps allow us to build experiences that previously

    required a native application.
  45. https://www.youtube.com/watch?v=3tb-1MWg44Y

  46. The hype can be a turn off https://twitter.com/elliotecweb/status/864070806569066497

  47. The name isn’t for you and worrying about it is

    distraction from just building things that work better for everyone. The name is for your boss, for your investor, for your marketeer. —Frances Berriman, Naming Progressive Web Apps
  48. None
  49. Do we need a progressive web app?

  50. If so, you would probably benefit from a PWA. Does

    your organization have a website?
  51. Does your organization make money on your website via e-commerce,

    advertising, or some other method? If so, you definitely need a progressive web app.
  52. FUD Fear, Uncertainty, Doubt

  53. We already have a native app, why do we need

    a PWA?
  54. Reach people who don’t have your native app installed or

    are on a different device.
  55. 8+ apps 5-7 apps 4 apps 3 apps 2 apps

    1 app 0 apps 49% 13% 11% 8% 6% 7% 6% U.S. smartphone users’ number of apps downloads per month Source: Comscore 2016 U.S. Mobile App Report, http://bit.ly/2d27iPI
  56. Average Android App Retention of Daily Active Users Source: Quettra

    via Andrew Chen http://bit.ly/1Hq53AR Percentage of Users Still Active 0% 25% 50% 75% 100% Days Since App Install 0 1 3 7 14 30 60 90
  57. © comScore, Inc. Proprietary. 26 Advertising and marketing is becoming

    a more important driver of app installs, while the app store’s influence may have peaked. App acquisition appears to be moving from ‘pull’ to ‘push’. App stores remain the most important method, but they are no longer growing in importance. Meanwhile, more users are now discovering apps from websites, digital ads and traditional media ads, highlighting the increasing importance of traditional push marketing for user acquisition. Most Common App Discovery Channels Among Smartphone Users Source: comScore MobiLens, U.S., Age 13+, 3 Month Average Ending June 2016 vs. June 2015 21% 14% 16% 9% 8% 9% 8% 6% 21% 14% 16% 11% 8% 11% 9% 9% 0% 5% 10% 15% 20% 25% Searched app store Featured/ Top List in app store via friend/ family via comment/ review/ social site via news/ print review/ TV show via a website via Ad on device browser/ app via Ad on TV/ print/ billboard % of Smartphone Users Jun-2015 Jun-2016 App Store Word-of-Mouth/Opinion Advertising/Marketing Being in the app store is no longer enough. Cost of acquisition higher.
  58. © comScore, Inc. Proprietary. 15 And mobile audience growth is

    being driven more by mobile web properties, which are actually bigger and growing faster than apps. A comparison of the Top 1000 Apps vs. the Top 1000 Mobile Web Properties shows that despite apps dominance in usage time, mobile web is responsible for big audiences on mobile. Mobile web audiences are almost 3x the size and growing 2x as fast as app audiences. Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties Source: comScore Mobile Metrix, U.S., Age 18+ - 2,000 4,000 6,000 8,000 10,000 12,000 Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015 Sep-2015 Dec-2015 Mar-2016 Jun-2016 Unique Visitors (000) Apps Mobile Web +82% vs. 2014 +45% vs. 2014 “Mobile web audiences are almost 3x the size and growing 2x as fast as app audiences.”
  59. Your website is often a customer’s first interaction with your

    company. 
 A better web experience will likely mean more revenue and more native app installs.
  60. The web can’t do [insert thing here]

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. https://www.flickr.com/photos/ashleyrosex/2861690380 The web can do more than we think.

  75. LET’S DO THIS!

  76. 1. Making it feel like an app 2. Installation and

    Discovery 3. Offline mode 4. Push Notifications 5. Beyond PWAs
  77. 1. Making it feel like an app

  78. None
  79. Like obscenity and brunch, web apps can be described but

    not defined. —Jeremy Keith, By any other name
  80. Make it look native? https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt

  81. Do you switch design language between platforms? Material Design iOS

    Design
  82. How many platforms will you adapt to?

  83. What about desktop browsers?

  84. Will you jump every time the platform changes?

  85. Define your own design and be consistent. Tripcase maintains same

    design across platforms.
  86. More immersive experience https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/

  87. Manifest file display options display: "standalone" display: "fullscreen" display: "browser"

    display: “minimal-ui”
  88. We’re spoiled by our browsers

  89. The warm comforts of the browser navigation bar status bar

    address bar
  90. The warm comforts of the browser info, refresh, download tabs

    downloads find in page
  91. The warm comforts of the browser sharing printing email

  92. Roughing it in app land

  93. Adding a back button is harder than it seems •

    Manage the browser history so back button goes to right location. • Back button in an app often implies a hierarchy, not simply going to the last screen you were on. • Do you rearchitect your site to create an app hierarchy?
  94. None
  95. Where does this button go? Does it do the same

    thing as the browser back button? Should there be an app back button?
  96. None
  97. .backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen)

    { .backButton { display: block; } } Display mode media query
  98. Not every customer or potential customer will add your Progressive

    Web App to their home screen …but every visitor will “install” your PWA!
  99. Fast, Fluid Experience

  100. Provide Immediate Feedback

  101. Animate Transitions to Support Wayfinding

  102. Smooth Pages — Avoid Jumps, Use Skeleton Pages

  103. App Shell model of PWAs

  104. Perceived performance matters most By Addy Osmani, http://bit.ly/2o0YBgu

  105. WARNING: App Shell model often assumes you’re building a single

    page application
  106. Get /category.html Send /category.html Page Browser Server Get /products.html Send

    /products.html Page Get /green-hoodie.html Send /green-hoodie.html Page Traditional Web Architecture
  107. Get /category.html Send /category.html and JS app Page Browser Server

    Get products Send products API Server Get green hoodie Send green hoodie JS App Single Page Application (SPA)
  108. PWA != SPA

  109. Personality & Polish

  110. Attention to detail and polish

  111. Animate Transitions for Wayfinding and Polish https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

  112. Personality Amazing SVG Animation by Darin Senneff https://codepen.io/ dsenneff/full/ 2c3e5bc86b372d5424b00

    edaf4990173/
  113. Should feeling like an app be the goal? Should feeling

    like an app be your goal?
  114. Feel Like an App Website with Performance Improvements Full screen,

    app shell with native design language Minimal-ui Standalone System Fonts Fullscreen Animation and Polish App Shell Native Design MORE COMPLEX LESS COMPLEX
  115. 2. Installation and Discovery

  116. Announcing Your PWA

  117. {manifest}

  118. { name: "Cloud Four", short_name: "Cloud Four", description: "We design

    and develop responsive websites and progressive web apps.", icons: [ { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" }, { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" } ], theme_color: "#456BD9", background_color: "#FFFFFF", display: "standalone", orientation: "natural", start_url: "/", gcm_sender_id: "482941778795" } Manifest files are simple JSON documents
  119. Startup Screen with Background Color Chrome Opera Samsung

  120. Theme Color Chrome Default Theme Color Chrome Custom Theme Color

  121. None
  122. Add to Home Screen Prompts

  123. Add to Home Screen Badges Firefox Samsung Non PWA PWA

  124. Add to Home Screen Badges Firefox Samsung Non PWA PWA

  125. Add to Home Screen Badges

  126. Add to Home Screen Banners Chrome Opera

  127. Add to Home Screen Banner’s Engagement Heuristic

  128. Pick the Optimal Time to Ask for Install Asking on

    order confirmation page resulted in 3x increase in conversion for Flipkart
  129. Chrome Changing Add-to-Homescreen Behavior

  130. App Stores

  131. PWAs don’t no need an app store!

  132. Progressive Web Apps in Microsoft Store Two ways to get

    into store: 1. Active submission 2. Passive ingestion Source:
 https://www.slideshare.net/AaronGustafson/progressive-web- apps-and-the-windows-ecosystem-build-2017
  133. None
  134. None
  135. None
  136. PhoneGap

  137. Remember, your PWA is your website so all the normal

    web marketing applies.
  138. Installation and Discovery No Add to Home Screen Native App

    Stores Manifest Spiders find PWA Manually submit PWA PhoneGap Trusted Web Activity MORE COMPLEX LESS COMPLEX
  139. 3. Offline Mode

  140. Cache for performance and offline fallback

  141. Offline Fallback Pages Can Keep People Engaged • Trivago found

    that 67% of people continue to browse the site when they come back online. Source: http://bit.ly/2GoXjCi
  142. Cache recently viewed content for offline use

  143. Cache recently viewed content for offline use

  144. Highlight Stale Information

  145. Display the Information You Have

  146. Let User’s Choose What They Want Offline

  147. Pre-cache Content and Apps

  148. Give People Control

  149. Offline Interactivity — Background Sync https://developers.google.com/web/updates/2015/12/background-sync

  150. Offline Interactivity — Or Disallow Editing

  151. None
  152. None
  153. Offline Cache for Performance Only Offline Interactivity Offline Fallback Offline

    Indicator Cache Recently Viewed Pages Disable Interactivity Pre-cache Predetermined Pages Pre-cache Dynamic Items User Choose What to Cache MORE COMPLEX LESS COMPLEX
  154. 4. Push Notifications

  155. Notification JS is Relatively Easy

  156. Many Hidden Challenges

  157. 3x Higher Conversion for Personalized Notifications

  158. Flowchart for how Slack decides whether to send a notification

    or not. https://twitter.com/codevisuals/status/ 838881724016787457
  159. Push Notification Services Full disclosure: I was an early adviser

    for Urban Airship and own a small number of shares in the company.
  160. None
  161. Many people are annoyed by notifications http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications

  162. Don’t immediately ask for permission to send push notifications

  163. None
  164. Twitter Lite handles push notifications well Browser prompt Confirm and

    Customize Twitter prompt
  165. Twitter Lite handles push notifications well Browser prompt Confirm and

    Customize Twitter prompt
  166. None
  167. 62 63 https://cloudfour.com/thinks/time-to-update-your-permissions-ux/

  168. Push Notifications No Push Notifications Personalized and Integrated Notifications CMS

    Plugin Subscribe via Push Provider One-off Marketing Push Notifications Background Updates Notification Design Analytics and Segmentation Backend Integration MORE COMPLEX LESS COMPLEX
  169. 5. Beyond PWAs

  170. Auto-login with Credential Management API

  171. Payment Request API

  172. None
  173. Beyond PWAs Basic PWA Multiple New APIs Autofill Support AMP

    to PWA Credential Management API Camera, other sensors Payment Request API AMP in PWA MORE COMPLEX LESS COMPLEX
  174. How do we create a plan for this?

  175. PWAs are progressive because… Progressive Roadmap {manifest} https Jul 13

    Redesign launches Better security with HTTPS Faster site via HTTP/2 Better bookmarks via manifest Oct 3 Faster pages Offline fallback It’s a PWA! service worker Oct 18 Offline pages Offline indicator Improved font loading Nov 22 Push notifications HTTP/2 Link Preload Dec 7 Small tweaks PWA announced
  176. Progressive Web App Blueprint Planning & Definition

  177. Define Your Ideal Progressive Web App

  178. Offline Interactivity Cache for Perf Only Offline Native App Stores

    Website with Perf Improvements Full Screen, App Shell New APIs No Add to Home Screen Basic PWA Feels Like An App Installation and Discovery No Push Notifications Personalized and Integrated Push Push Notifications Beyond PWAs
  179. Benchmark & Plan to Measure

  180. Progressive Web App Blueprint Planning & Definition Technical Debt (if

    Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap
  181. Assess Current Website

  182. Is Your Website Reasonably Fast?

  183. Is it Usable?

  184. Progressive Web App Blueprint Planning & Definition Technical Debt (if

    Necessary) Baseline PWA Front-end Additions Larger Initiatives Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap Assess current website Fix performance issues Fix usability issues Manifest HTTPS Service worker for performance Offline Fallback Cache recently viewed pages Precache popular or important pages Add third-party push notification service CMS plugin for push notifications Payment Request API Credentials Management API Integrate notifications with backend systems Background sync Move to app shell
  185. Baseline PWA Front-end Additions Larger Initiatives Progressive Web App Blueprint

    Planning & Definition Technical Debt (if Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap Assess current website Fix performance issues Fix usability issues Manifest HTTPS Service worker for performance Offline Fallback Cache recently viewed pages Precache popular or important pages Add third-party push notification service CMS plugin for push notifications Payment Request API Credentials Management API Integrate notifications with backend systems Background sync Move to app shell
  186. Every step on the path to a PWA makes sense

    on its own.
  187. None
  188. Coming in November! Follow @abookapart, @grigs or sign up for

    the A Book Apart newsletter to receive updates. https://abookapart.com/ No 28 PROGRESSIVE WEB APPS Jason Grigsby
  189. Thank You!

  190. Thank You! White Blank Notebook by Tirachard Kumtanom Woman Executive

    Holding Tablet by Pixabay Schedule Planning by Startup Stock Photos Hackers by Christopher Dombres NSA by by Mario Antonio Pena Zapatería Map Location Symbol by Tumisa Smartphone on Bridge by Jeremy Levin Hype by Kerry J Instagram App on iPhone by Pixabay Man in Fuzzy Hat by Gratisography Southbank - Samsung Galaxy S8 (1) by TaylorHerring Now THIS is comfort! by Garry Wilmore Trojan Horse by Hsing Wei Cold Snow Man Person Asphalt Blur Car City by Pixabay Woman Listening to Music by bruce mars Woman and Dog by Tookapic Focus by Mark Hunter Person Holding Silver iPhone by rawpixel.com MacBook Air Beside Painting by rawpixel.com Android Phone by freestocks.org Smart Watch by Oliur Rahman Apple Office Internet iPad by Pixabay Woman Jumping by Quang Anh Ha Nguyen SEM by Pixabay Legs on Chair by kaboompics.com In Hiding by Taylor McBride Medusa Kill Switch by Scott Hart White Auto Gauge by Mikes Photos Blue and Silver Stethoscope by Pixabay Tortoise by Frans Van Heerden iPhone Photo on Railroad Tracks by Kaique Rocha database by ✦ Shmidt Sergey ✦ from the Noun Project Cloud by Blackwoodmedia.com.au from the Noun Project Responsive Design by Delwar Hossain from the Noun Project cogs by Gregor Cresnar from the Noun Project Special thanks to these fabulous people who graciously shared their work under Creative Commons.