Planning Your Progressive Web App

Five factors to consider as you plan and build your progressive web app.

Transcript

1. Planning Your Progressive Web App
4. 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.
11. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22
12. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22
13. 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
14. Progressive web apps allow us to build experiences that previously required a native application.
15. 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
16. Making it feel like an app
18. Like obscenity and brunch, web apps can be described but not defined. —Jeremy Keith, By any other name
19. Make it look native? https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt
20. Do you switch design language between platforms? Material Design iOS Design
21. How many platforms will you adapt to?
22. What about desktop browsers?
23. Will you jump every time the platform changes?
24. Define your own design and be consistent. Tripcase maintains same design across platforms.
25. More immersive experience https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/
26. Manifest file display options display: "standalone" display: "fullscreen" display: "browser" display: “minimal-ui”
27. We’re spoiled by our browsers
28. The warm comforts of the browser
29. The warm comforts of the browser navigation bar status bar address bar
30. The warm comforts of the browser info, refresh, download tabs downloads find in page
31. The warm comforts of the browser sharing printing email
32. Roughing it in app land
33. 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?
35. Where does this button go?
36. Where does this button go? Does it do the same thing as the browser back button?
37. Where does this button go? Does it do the same thing as the browser back button? Should there be an app back button?
39. .backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen) { .backButton { display: block; } } Display mode media query
40. Not every customer or potential customer will add your Progressive Web App to their home screen …but every visitor will “install” your PWA!
41. Losing Our URLs
42. http://codepen.io/mariusbalaj/full/Jtqbm/
43. 2out of 1000 mobile users tap share buttons https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile/
44. Make it Easy to Copy and Paste
45. Web Share API
46. Fast, Fluid Experience
47. Provide Immediate Feedback
48. Animate Transitions to Support Wayfinding
49. Smooth Pages — Avoid Jumps, Use Skeleton Pages
50. App Shell model of PWAs
51. Perceived performance matters most By Addy Osmani, http://bit.ly/2o0YBgu
52. App Shell means first paint happens quickly No PWA, No App Shell, 4G PWA with App Shell, 4G
53. PWAs are a trojan horse for performance.
54. WARNING: App Shell model often assumes you’re building a single page application
55. PWA != SPA
56. Personality & Polish
57. Apps Just “Feel Better”
59. Native Code Doesn’t Guarantee Delight
60. Attention to detail and polish
61. Animate Transitions for Wayfinding and Polish https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/
62. Personality Amazing SVG Animation by Darin Senneff https://codepen.io/ dsenneff/full/ 2c3e5bc86b372d5424b00 edaf4990173/
63. Should feeling like an app be the goal? Should feeling like an app be your goal?
64. 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
65. 2. Installation and Discovery
66. Add to Home Screen Prompts
67. Add to Home Screen Badges Firefox Samsung Non PWA PWA
68. Add to Home Screen Badges Firefox Samsung Non PWA PWA
69. Add to Home Screen Badges
70. Add to Home Screen Banners Chrome Opera
71. Add to Home Screen Banner’s Engagement Heuristic
72. Pick the Optimal Time to Ask for Install Asking on order confirmation page resulted in 3x increase in conversion for Flipkart
73. Chrome Changing Add-to-Homescreen Behavior
74. App Stores
75. PWAs don’t no need an app store!
76. 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
79. PhoneGap
80. Remember, your PWA is your website so all the normal web marketing applies.
81. 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
82. Offline Mode
83. Cache for performance and offline fallback
84. 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
85. Cache recently viewed content for offline use
86. Display the Information You Have
87. Let User’s Choose What They Want Offline
88. Pre-cache Content and Apps
89. Give People Control
90. Offline Interactivity — Background Sync https://developers.google.com/web/updates/2015/12/background-sync
91. Offline Interactivity — Or Disallow Editing
93. 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
94. 4. Push Notifications
95. Notification JS is Relatively Easy
96. Many Hidden Challenges
97. 3x Higher Conversion for Personalized Notifications
98. Flowchart for how Slack decides whether to send a notification or not. https://twitter.com/codevisuals/status/ 838881724016787457
99. Many people are annoyed by notifications http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications
100. Don’t immediately ask for permission to send push notifications
102. Twitter Lite handles push notifications well Browser prompt Confirm and Customize Twitter prompt
104. 62 63 https://cloudfour.com/thinks/time-to-update-your-permissions-ux/
105. 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
106. Beyond PWAs
107. Accelerated Mobile Project
108. I have some opinions about AMP…
109. But if you must AMP, then AMP to PWA Install Path https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/
110. Auto-login with Credential Management API
111. Payment Request API
115. 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
116. 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
117. Define Your Ideal Progressive Web App
118. 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
119. Benchmark & Plan to Measure
120. Progressive Web App Blueprint Planning & Definition
121. Progressive Web App Blueprint Planning & Definition Technical Debt (if Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap
122. Assess Current Website
123. Is Your Website Reasonably Fast?
124. Is it Usable?
125. 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
126. 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
127. 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
128. Every step on the path to a PWA makes sense on its own.
130. More details in the book! Follow @thepwabook, @pwastats or @grigs for updates. https://abookapart.com/products/ progressive-web-apps No 28 PROGRESSIVE WEB APPS Jason Grigsby
132. Thank You!
133. Thank You! My Secret Plan to Rule the World by Ann H Smartphone on Bridge by Jeremy Levin Instagram App on iPhone by Pixabay Southbank - Samsung Galaxy S8 (1) by TaylorHerring Now THIS is comfort! by Garry Wilmore 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.