Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Jason Grigsby, profile picture
Uploaded byJason Grigsby
PDF, PPTX663 views

Planning Your Progressive Web App

The document discusses progressive web apps (PWAs), which are enhanced websites that provide app-like experiences such as offline functionality, app shell architecture, and push notifications. It highlights the benefits of PWAs for businesses, including increased user engagement and sales, while emphasizing the need for a strategic roadmap to implement PWAs effectively. Additionally, it addresses the importance of marketing and user acquisition for app-related projects in a rapidly evolving digital landscape.

Technology◦
Related topics:
Progressive Web Apps•
Download as PDF, PPTX
Planning Your Progressive Web App
We need a progressive web app!
What is a progressive web app?
How do we create a plan for this?
Do we need a progressive web app?
How does the CEO even know about progressive web apps?
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…
How does the CEO even know about progressive web apps?
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
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
Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
What is a progressive web app?
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.
https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22
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
service worker
Progressive Web App Service Worker Cache Network Explicit control of network requests and cache
Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
Service workers key to performance boon Source: Google, http://bit.ly/2fpGrRr
Service workers are also key to providing an offline experience and push notifications
PWA is a website that has been enhanced with: {manifest}https service worker But PWAs can be much more…
Progressive web apps allow us to build experiences that previously required a native application.
https://www.youtube.com/watch?v=3tb-1MWg44Y
The hype can be a turn off https://twitter.com/elliotecweb/status/864070806569066497
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
Do we need a progressive web app?
If so, you would probably benefit from a PWA. Does your organization have a website?
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.
FUDFear, Uncertainty, Doubt
We already have a native app, why do we need a PWA?
Reach people who don’t have your native app installed or are on a different device.
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
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
© 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.
© 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.”
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.
The web can’t do [insert thing here]
https://www.flickr.com/photos/ashleyrosex/2861690380 The web can do more than we think.
LET’S DO THIS!
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
1. Making it feel like an app
Like obscenity and brunch, web apps can be described but not defined. —Jeremy Keith, By any other name
Make it look native? https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt
Do you switch design language between platforms? Material Design iOS Design
How many platforms will you adapt to?
What about desktop browsers?
Will you jump every time the platform changes?
Define your own design and be consistent. Tripcase maintains same design across platforms.
More immersive experience https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/
Manifest file display options display: "standalone" display: "fullscreen"display: "browser" display: “minimal-ui”
We’re spoiled by our browsers
The warm comforts of the browser navigation bar status bar address bar
The warm comforts of the browser info, refresh, download tabs downloads find in page
The warm comforts of the browser sharing printing email
Roughing it in app land
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?
Where does this button go? Does it do the same thing as the browser back button? Should there be an app back button?
.backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen) { .backButton { display: block; } } Display mode media query
Fast, Fluid Experience
Animate Transitions to Support Wayfinding
Smooth Pages — Avoid Jumps, Use Skeleton Pages
App Shell model of PWAs
Perceived performance matters most By Addy Osmani, http://bit.ly/2o0YBgu
WARNING: App Shell model often assumes you’re building a single page application
PWA != SPA
Should feeling like an app be the goal? Should feeling like an app be your goal?
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
2. Installation and Discovery
Announcing Your PWA
{manifest}
{ 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