Planning Your Progressive Web App
•
1 like•630 views
Presented at Web Directions Code, Melbourne 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.
Report
Share
Planning Your Progressive Web App
- 3. We need a progressive web app!
- 4. What is a progressive web app?
- 5. How do we create a plan for this?
- 6. Do we need a progressive web app?
- 7. How does the CEO even know about progressive web apps?
- 8. 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…
- 10. How does the CEO even know about progressive web apps?
- 13. 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
- 14. Ola Cabs • 68% increase in mobile traffic • Tier 2 cities conversion rate same as native app. Tier 3 cities, conversion rate is 30% higher with PWA. • PWA is 200KB which 300x smaller than Android and 500x than iOS. • 20% of users who book in the PWA had previously uninstalled app. Source: Google, http://bit.ly/2q9D4EA
- 17. What is a progressive web app?
- 18. 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.
- 27. 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
- 28. service worker
- 29. Progressive Web App Service Worker Cache Network Explicit control of network requests and cache
- 30. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
- 31. Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
- 32. Service workers are also key to providing an offline experience and push notifications
- 33. PWA is a website that has been enhanced with: {manifest}https service worker But PWAs can be much more…
- 34. Progressive web apps allow us to build experiences that previously required a native application.
- 36. The hype can be a turn off https://twitter.com/elliotecweb/status/864070806569066497
- 37. 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
- 39. Do we need a progressive web app?
- 40. If so, you would probably benefit from a PWA. Does your organization have a website?
- 41. 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.
- 43. We already have a native app, why do we need a PWA?
- 44. Reach people who don’t have your native app installed or are on a different device.
- 45. 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
- 46. Average Android App Retention of Daily Active Users Source: Quettra via Andrew Chen http://bit.ly/1Hq53AR PercentageofUsersStillActive 0% 25% 50% 75% 100% Days Since App Install 0 1 3 7 14 30 60 90
- 47. © 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 %ofSmartphoneUsers 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.
- 48. © 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 UniqueVisitors(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.”
- 49. 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.
- 50. The web can’t do [insert thing here]
- 64. https://www.flickr.com/photos/ashleyrosex/2861690380 The web can do more than we think.
- 65. LET’S DO THIS!
- 66. Offline InteractivityCache 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
- 67. 1. Making it feel like an app
- 69. Like obscenity and brunch, web apps can be described but not defined. —Jeremy Keith, By any other name
- 71. Do you switch design language between platforms? Material Design iOS Design
- 72. How many platforms will you adapt to?
- 73. What about desktop browsers?
- 74. Will you jump every time the platform changes?
- 75. Define your own design and be consistent. Tripcase maintains same design across platforms.
- 77. Manifest file display options display: "standalone" display: "fullscreen"display: "browser" display: “minimal-ui”
- 78. We’re spoiled by our browsers
- 79. The warm comforts of the browser navigation bar status bar address bar
- 80. The warm comforts of the browser info, refresh, download tabs downloads find in page
- 81. The warm comforts of the browser sharing printing email
- 82. Roughing it in app land
- 83. 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?
- 85. Where does this button go? Does it do the same thing as the browser back button? Should there be an app back button?
- 87. .backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen) { .backButton { display: block; } } Display mode media query
- 89. Animate Transitions to Support Wayfinding
- 90. Smooth Pages — Avoid Jumps, Use Skeleton Pages
- 91. App Shell model of PWAs
- 92. Perceived performance matters most By Addy Osmani, http://bit.ly/2o0YBgu
- 93. WARNING: App Shell model often assumes you’re building a single page application
- 94. PWA != SPA
- 95. Should feeling like an app be the goal? Should feeling like an app be your goal?
- 96. 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 COMPLEXLESS COMPLEX
- 97. 2. Installation and Discovery
- 99. {manifest}
- 100. { 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
- 101. Startup Screen with Background Color Chrome Opera Samsung
- 102. Theme Color Chrome Default Theme Color Chrome Custom Theme Color
- 103. Theme Color
- 104. Add to Home Screen Prompts
- 105. Add to Home Screen Badges Firefox Samsung Non PWA PWA
- 106. Add to Home Screen Badges Firefox Samsung Non PWA PWA
- 107. Chrome Changing Add-to-Homescreen Behavior
- 108. Pick the Optimal Time to Ask for Install Asking on order confirmation page resulted in 3x increase in conversion for Flipkart. Controlling when the prompt shows up is now what every PWA must do.
- 109. App Stores
- 110. PWAs don’t no need an app store!
- 111. 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
- 114. PhoneGap
- 115. Remember, your PWA is your website so all the normal web marketing applies.
- 116. What does installation of a PWA mean? When is a PWA really installed?
- 120. Why focus on this?Instead of all of this?
- 121. Not every customer or potential customer will add your Progressive Web App to their home screen …but every visitor will “install” your PWA!
- 122. Installation and Discovery No Add to Home Screen Native App Stores Manifest Spiders find PWA Manually submit PWA PhoneGap Trusted Web Activity MORE COMPLEXLESS COMPLEX
- 123. 3. Offline Mode
- 124. Cache for performance and offline fallback
- 125. 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
- 126. Cache recently viewed content for offline use
- 127. Cache recently viewed content for offline use
- 128. Display the Information You Have
- 129. Pre-cache Content and Apps
- 130. Let User’s Choose What They Want Offline
- 131. Offline Interactivity — Or Disallow Editing
- 134. 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 COMPLEXLESS COMPLEX
- 136. Notification JS is Relatively Easy
- 138. 3x Higher Conversion for Personalized Notifications
- 139. Flowchart for how Slack decides whether to send a notification or not. https://twitter.com/codevisuals/status/ 838881724016787457
- 140. Many people are annoyed by notifications http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications
- 141. Don’t immediately ask for permission to send push notifications
- 143. Twitter Lite handles push notifications well Browser prompt Confirm and CustomizeTwitter prompt
- 144. Twitter Lite handles push notifications well Browser prompt Confirm and CustomizeTwitter prompt
- 147. 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 COMPLEXLESS COMPLEX
- 148. 5. Beyond PWAs
- 150. Payment Request API
- 151. 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 COMPLEXLESS COMPLEX
- 152. How do we create a plan for this?
- 153. 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
- 154. Progressive Web App Blueprint Planning & Definition
- 155. Define Your Ideal Progressive Web App
- 156. 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
- 157. Benchmark & Plan to Measure
- 158. Progressive Web App Blueprint Planning & Definition Technical Debt (if Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap
- 160. Is Your Website Reasonably Fast?
- 161. Is it Usable?
- 162. 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
- 163. 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
- 164. Every step on the path to a PWA makes sense on its own.
- 166. More details in the book! Follow @thepwabook, @pwastats or @grigs for updates. https://abookapart.com/products/ progressive-web-apps No 28 PROGRESSIVE WEBAPPS Jason Grigsby
- 167. Thank You!
- 168. 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.