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…
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
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.
Source: https://blog.twitter.com/ 2017/how-we-built-twitter-lite Twitter Lite Twitter Lite is interactive in less than 5 seconds over 3G on most devices, with average load times reduced by over 30%.
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
Average Android App Retention of Daily Active Users Source: Quettra via Andrew Chen http://bit.ly/1Hq53AR Percentage of Users Still Active 0% 25% 50% 75% 100% Days Since App Install 0 1 3 7 14 30 60 90
Let’s Encrypt is a free, automated, and open Certificate Authority. We are a 501(c)(3) nonprofit. We're running a crowdfunding campaign to support our operations, please consider contributing now! Get Started Donate FROM OUR BLOG Nov 1, 2016 Launching Our Crowdfunding Campaign Today we kicked off our first crowdfunding campaign with the goal of raising enough funds to cover about one month of our operations - $200,000. Read more Oct 27, 2016 Our First Grant: The Ford Foundation We are proud to announce that The Ford Foundation has awarded us a grant to help our growing operations. Read more Oct 24, 2016 Squarespace OCSP Stapling Implementation MA JOR SPONSORS Documentation Get Help Donate ▾ About Us ▾
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.
PWAs are progressive because… They promote a progressive relationship with your users First page • Page loads fast normally • Service worker installs after core content • Service worker pre-fetches assets • Assets explicitly cached Second page • Page loads even faster because of cache • App shell loading pattern? User indicates interest • Check to see if browser supports push • Ask if user wants notifications • If yes, ask browser for permission. User responds to notification • We can provide an improved experience Browser detects engagement • Asks user if they want to add to home screen • Now app may have better experience
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
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
More in the book! Available now. Follow @abookapart or @thepwabook for updates. https://abookapart.com/products/ progressive-web-apps No 28 PROGRESSIVE WEB APPS Jason Grigsby
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
sbtechnight
kako351
okunokentaro
makamaka
doradora09
masashi_sutou
hirosatogamo
ad5jp
line_developers_tw
mizunohiroaki
fixstars
hanhan1978
destraynor
jcasabona
danielanewman
trallard
searls
jakevdp
colly
yeseniaperezcruz
paulrobertlloyd
paigeccino
afnizarnur
keithpitt