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…
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
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.
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
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
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.
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?
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
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
The goal isn’t offline; offline is just a special case of flakiness (and the easiest one to detect technically). PWAs and SWs give you the ability to be reliable for your users. That’s the advantage across all connection states (even online!) —Alex Russell
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
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
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
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.
grigs
gl_tsukasa
makotu
bonotake
bumptakayuki
adavis
imsaku
mamohacy
lapis2411
codmoninc
pauli
line_developers
picardparis
jrom
brettharned
sonatard
smashingmag
ammeep
notwaldorf
samlambert
chriscoyier
jponch
frogandcode
hursman
sachag