Building a Progressive Web App
12 likes8,363 views
The document discusses building progressive web apps (PWAs). PWAs are web applications that are fast, reliable and engaging like native mobile apps. The key aspects of PWAs discussed are: 1) They use technologies like service workers, web app manifests and push notifications to provide app-like capabilities and improve user experience and engagement on the web. 2) An example of Flipkart, an Indian e-commerce site, is provided which saw 3x time spent and 40% returning visitors with their PWA implementation. 3) Core features discussed that make PWAs engaging include fast loading, adding to homescreen for app-like launching, handling flaky networks well, instant reloading and
![Enabling app-like capabilities
Service Worker
● Client-side proxy written in JavaScript
● Access device capabilities to allow your site
to be “app like”
Web App Manifest File
● Rich presence on user’s Android homescreen
● Launch in full-screen mode on Android
● Control the screen orientation for optimal viewing
● Define “splash screen” launch, theme color for site
{
"short_name": "My Cool App",
"name": "My Totally Cool Application",
"icons":
[{"src": "launcher-icon-3x.png",
"sizes": "192x192",
"type": "image/png"},
{"src": "launcher-splash.png",
"sizes": "512x512",
"type": "image/png"}],
"start_url": "index.html",
"display": "standalone",
"background_color" : "#aeaeae",
"theme_color" : "#aeaeae",
"orientation" : "landscape"
}](https://image.slidesharecdn.com/pwav0-160228164627/85/Building-a-Progressive-Web-App-11-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Building a Progressive Web App (20)
Ad
More from Ido Green (20)
![Crypto 101 and a bit more [Sep-2022]](https://cdn.slidesharecdn.com/ss_thumbnails/crypto101andabitmore9-2022-220921232434-90615cc8-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (19)
Building a Progressive Web App
- 4. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 The web offers broader reach, but engagement is low Top 1000 mobile apps vs. top 1000 mobile web properties 10.9 Monthly unique visitors (MM) 3.3 Average minutes per visitor Mobile webApps 8.9 201.8
- 5. Progressive Web Apps ● Fast loading ● One click away from accessing content ● Smooth animations and navigations ● Re-engages with push notifications ● Good experience on flaky network connections ● Consistent experience across browsers
- 6. Covering today ● Progressive Web App by example (Flipkart) ● Foundations: ○ Service Worker ○ Web App Manifests ○ Push notifications ● Progressive Web App features
- 8. Time Spent on Flipkart Lite 3x 70 seconds 210 seconds
- 9. Returning Visitors week over week 40%
- 11. Enabling app-like capabilities Service Worker ● Client-side proxy written in JavaScript ● Access device capabilities to allow your site to be “app like” Web App Manifest File ● Rich presence on user’s Android homescreen ● Launch in full-screen mode on Android ● Control the screen orientation for optimal viewing ● Define “splash screen” launch, theme color for site { "short_name": "My Cool App", "name": "My Totally Cool Application", "icons": [{"src": "launcher-icon-3x.png", "sizes": "192x192", "type": "image/png"}, {"src": "launcher-splash.png", "sizes": "512x512", "type": "image/png"}], "start_url": "index.html", "display": "standalone", "background_color" : "#aeaeae", "theme_color" : "#aeaeae", "orientation" : "landscape" }
- 12. Add to Homescreen ...and launch in full- screen mode User who visits 2x in a within two weeks will be prompted with “add to homescreen” One tap to add to homescreen
- 13. Avoid the dreaded white screen Similar to apps, always show basic splash screen experience while your content loads
- 14. Load site quickly with app shell caching
- 15. Show content when on flaky networks
- 16. Instant loading and smooth navigation ● For first-time visitors, load pages in <10s on 3G connections ● For repeat visitors, instant loading of page in <500 milliseconds ● Always scrolling at 60 frames/second ● Content shouldn’t jump as images are loaded 4
- 17. PWAs can work across browsers ● Using standard progressive enhancement techniques, PWAs can be made to work across all modern browsers ● Service Worker available in Chrome and Opera and soon Firefox; Microsoft is interested, Safari and UC Web exploring. 7
- 18. Europe Mobile Browser Share in 2015 Europe 50% (up 11% YoY) 27% (down 4% YoY) 13% (down 8% YoY) 4% (up 1% YoY) Germany 51% (up 7% YoY) 25% (down 3% YoY) 15% (down 10% YoY) 3% (up 1% YoY) UK 37% (up 7% YoY) 48% (down 6% YoY) 6% (down 5% YoY) 3% (same YoY) France 47% (up 4% YoY) 32% (down 2% YoY) 11% (down 6% YoY) 4% (same YoY) Source: StatsCounter Global Stats
- 19. North America Mobile Browser Share in 2015 Other US 41% (up 6% YoY) 50% (up 2% YoY) 5% (down 7% YoY) 1% (down 1% YoY) Canada 37% (up4% YoY) 51% (down 1% YoY) 6% (down 5% YoY) 3% (same YoY) Source: StatsCounter Global Stats
- 20. Send Web push notifications System level notifications, like apps Ask to notify users with specific information Can send notifications even when page closed
- 22. Why web push notifications are powerful 26%increase in average spend per visit by members arriving via a push notification 72%increase in time spent for users visiting via a push notification
- 23. Baseline implementation for PWA engagement Required Recommended HTTPS + Service Worker Web App Manifest Push notifications Advanced Offline Support App shell caching Splash screen Smooth navigation “Progressive enhancement” with cross browser support
- 24. Voice Memos Air Horner
- 26. Go Build Something Amazing!