A presentation at HWSW in in Budapest, Hungary by Ioana Chiorean
All aboard? Let’s go beyond PWA
Who is L̶o̶a̶n̶a̶ Ioana Chiorean? I am a QA Team Lead for a few projects Mozillian for more than 9 years now I volunteer also as EU Code Week Amb. I worked on devices for more than 10y. Twitter @ioana_cis # lifeofamozillian 2
Not all who wander are lost Consumer app fatigue 3
A man’s gotta do what a man’s gotta do ➔ Conferences ◆ Schedule, Speakers, Talks description etc ➔ Tickets Apps ◆ Aviation, Concerts, Movies, Meetups ➔ Taxi companies ◆ Uber, Grab, Taxify, Lyft 4
Wait, who first? ➔ Mobile First ◆ Mobile users consume more than 2.8x minutes vs desktop users ◆ Search - most common starting point ◆ No monopoly on markets ◆ Some start using the internet on phones 5
80% of internet users own a smartphone Mobile Marketing Statistics
Mobile First Desktop Worst Oliver Brooks
Offline is not an Error Condition Maureen McElaney @Mo_Mack
Wait, who first? ➔ Offline First ◆ “A 4G user isn’t a 4G user most of the time.” Ilya Grigorik ◆ 60% of Mobile traffic is 2G ◆ There is not such things as infinite memory 11
Offline First is changing lives Maureen McElaney @Mo_Mack
Progressive Web Apps
Progressive Web Apps ➔ Best of the web 💚 Best of native apps. ➔ Useful after the 1st visit ➔ Become more and more powerful with each visit you make 15
Progressive Web Apps ➔Progressive: must work on any device and enhance progressively. ➔Discoverable: in search engines. ➔Linkable: should use the URI to indicate the current state of the application. ➔Responsive: must fit the device’s form factor and screen size. ➔App-like: like a native app and be built on the application shell model, with minimal page refreshes. 17
Progressive Web Apps ➔Connectivity-independent: low connectivity or offline. ➔Re-engageable: push notifications. ➔Installable: installed on the device’s home screen. ➔Fresh: new content should be made available in the app. ➔Safe: hosted over HTTPS to prevent man-in-the-middle attacks. 18
Service Workers Cookbook: https://serviceworke.rs/
Chrome Dev Summit 2018)
After more than 2 years, what did we all get from PWA?
NOTIFICATIONS!
Don’t be the sheep! Be the wolf fox! Photo credit.
Why PWA might save the world.. ➔ Usability and Accessibility ➔ Increases business revenues ◆ Conversion (new users, finalized actions) >50% ➔ No install nor (huge) storage usage ◆ (0 new apps/35 at first usage) ➔ Available everywhere, without any account ➔ Easy to build up/develop 26
Hold my beer… PWAs on the way to their full potential ➔ Mobile ranking algorithm in search rankings ➔ ONE version to rule them ALL ➔ Innovation and rapid development of feature ◆ Roland’s talk about voice, Reka’s VR, IoT, etc ➔ Keep up with Kardashians, manufacturers ➔ Web stands for the companies/not individual big brothers 27
So.. When to go PWA and when to stay on native?
Hold your horses.. PWAs can’ts ➔ Some HW functionalities ➔ A bit less shiny things ➔ Web standards are not really standards ◆ webcompat.org ➔ .. any others? 30
The web is dead. Long live the web! User First
Links , statistics, documentation ● ● ● ● ● ● ● ● ● ● ● https://www.pwastats.com/ https://webkit.org/status/#specification-service-workers http://offlinefirst.org/ SW Cookbook: https://serviceworke.rs/ https://www.pwastats.com/ https://developer.mozilla.org/en-US/docs/Web/Apps/Pr ogressive#Core_PWA_guides https://developers.google.com/web/showcase/tags/prog ressive-web-apps https://progressivewebapproom.com/ https://github.com/hemanth/awesome-pwa https://mdn.github.io/pwa-examples/js13kpwa/ Let me know your examples.. 33
🐦 @ioana_cis ● ioana@mozilla.com ● http://bit.ly/CISHWSW May the fork be with you! “Ebéd” is waiting!
Here’s what was said about this presentation on social media.
for free. You
can too.