Planning Your Progressive Web App

Slide 1

Slide 1 text

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22

Slide 12

Slide 12 text

https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Progressive web apps allow us to build experiences that previously required a native application.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Making it feel like an app

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Like obscenity and brunch, web apps can be described but not defined. —Jeremy Keith, By any other name

Slide 19

Slide 19 text

Make it look native? https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

How many platforms will you adapt to?

Slide 22

Slide 22 text

What about desktop browsers?

Slide 23

Slide 23 text

Will you jump every time the platform changes?

Slide 24

Slide 24 text

Define your own design and be consistent. Tripcase maintains same design across platforms.

Slide 25

Slide 25 text

More immersive experience https://www.ﬂickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/

Slide 26

Slide 26 text

Manifest file display options display: "standalone" display: "fullscreen" display: "browser" display: “minimal-ui”

Slide 27

Slide 27 text

We’re spoiled by our browsers

Slide 28

Slide 28 text

The warm comforts of the browser

Slide 29

Slide 29 text

The warm comforts of the browser navigation bar status bar address bar

Slide 30

Slide 30 text

The warm comforts of the browser info, refresh, download tabs downloads find in page

Slide 31

Slide 31 text

The warm comforts of the browser sharing printing email

Slide 32

Slide 32 text

Roughing it in app land

Slide 33

Slide 33 text

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?

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Where does this button go?

Slide 36

Slide 36 text

Where does this button go? Does it do the same thing as the browser back button?

Slide 37

Slide 37 text

Where does this button go? Does it do the same thing as the browser back button? Should there be an app back button?

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

.backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen) { .backButton { display: block; } } Display mode media query

Slide 40

Slide 40 text

Not every customer or potential customer will add your Progressive Web App to their home screen …but every visitor will “install” your PWA!

Slide 41

Slide 41 text

Losing Our URLs

Slide 42

Slide 42 text

http://codepen.io/mariusbalaj/full/Jtqbm/

Slide 43

Slide 43 text

2out of 1000 mobile users tap share buttons https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile/

Slide 44

Slide 44 text

Make it Easy to Copy and Paste

Slide 45

Slide 45 text

Web Share API

Slide 46

Slide 46 text

Fast, Fluid Experience

Slide 47

Slide 47 text

Provide Immediate Feedback

Slide 48

Slide 48 text

Animate Transitions to Support Wayfinding

Slide 49

Slide 49 text

Smooth Pages — Avoid Jumps, Use Skeleton Pages

Slide 50

Slide 50 text

App Shell model of PWAs

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

App Shell means first paint happens quickly No PWA, No App Shell, 4G PWA with App Shell, 4G

Slide 53

Slide 53 text

PWAs are a trojan horse for performance.

Slide 54

Slide 54 text

WARNING: App Shell model often assumes you’re building a single page application

Slide 55

Slide 55 text

PWA != SPA

Slide 56

Slide 56 text

Personality & Polish

Slide 57

Slide 57 text

Apps Just “Feel Better”

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Native Code Doesn’t Guarantee Delight

Slide 60

Slide 60 text

Attention to detail and polish

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Should feeling like an app be the goal? Should feeling like an app be your goal?

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

2. Installation and Discovery

Slide 66

Slide 66 text

Add to Home Screen Prompts

Slide 67

Slide 67 text

Add to Home Screen Badges Firefox Samsung Non PWA PWA

Slide 68

Slide 68 text

Add to Home Screen Badges Firefox Samsung Non PWA PWA

Slide 69

Slide 69 text

Add to Home Screen Badges

Slide 70

Slide 70 text

Add to Home Screen Banners Chrome Opera

Slide 71

Slide 71 text

Add to Home Screen Banner’s Engagement Heuristic

Slide 72

Slide 72 text

Pick the Optimal Time to Ask for Install Asking on order confirmation page resulted in 3x increase in conversion for Flipkart

Slide 73

Slide 73 text

Chrome Changing Add-to-Homescreen Behavior

Slide 74

Slide 74 text

App Stores

Slide 75

Slide 75 text

PWAs don’t no need an app store!

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

PhoneGap

Slide 80

Slide 80 text

Remember, your PWA is your website so all the normal web marketing applies.

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Offline Mode

Slide 83

Slide 83 text

Cache for performance and offline fallback

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Cache recently viewed content for offline use

Slide 86

Slide 86 text

Display the Information You Have

Slide 87

Slide 87 text

Let User’s Choose What They Want Offline

Slide 88

Slide 88 text

Pre-cache Content and Apps

Slide 89

Slide 89 text

Give People Control

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Offline Interactivity — Or Disallow Editing

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

4. Push Notifications

Slide 95

Slide 95 text

Notification JS is Relatively Easy

Slide 96

Slide 96 text

Many Hidden Challenges

Slide 97

Slide 97 text

3x Higher Conversion for Personalized Notifications

Slide 98

Slide 98 text

Flowchart for how Slack decides whether to send a notification or not. https://twitter.com/codevisuals/status/ 838881724016787457

Slide 99

Slide 99 text

Many people are annoyed by notifications http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications

Slide 100

Slide 100 text

Don’t immediately ask for permission to send push notifications

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

62 63 https://cloudfour.com/thinks/time-to-update-your-permissions-ux/

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

Beyond PWAs

Slide 107

Slide 107 text

Accelerated Mobile Project

Slide 108

Slide 108 text

I have some opinions about AMP…

Slide 109

Slide 109 text

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/

Slide 110

Slide 110 text

Auto-login with Credential Management API

Slide 111

Slide 111 text

Payment Request API

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

Define Your Ideal Progressive Web App

Slide 118

Slide 118 text

Slide 119

Slide 119 text

Benchmark & Plan to Measure

Slide 120

Slide 120 text

Progressive Web App Blueprint Planning & Definition

Slide 121

Slide 121 text

Progressive Web App Blueprint Planning & Definition Technical Debt (if Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap

Slide 122

Slide 122 text

Assess Current Website

Slide 123

Slide 123 text

Is Your Website Reasonably Fast?

Slide 124

Slide 124 text

Is it Usable?

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

Slide 128

Slide 128 text

Every step on the path to a PWA makes sense on its own.

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

Thank You!

Slide 133

Slide 133 text

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.