PWA: A replacement for your native mobile app?

With this presentation I focus on 3 chapters about Progressive Web Apps;

1. What web can do today?
2. How to build a PWA today.
3. Is PWA a replacement for your native mobile app?

Transcript

1. PWA A replacement for your native mobile app? @onderceylan PWAs by Önder Ceylan
2. @onderceylan PWAs Agenda • Chapter 1: What web can do today? • Chapter 2: How can I build a PWA right away? • Chapter 3: Is PWA a replacement for my native mobile app?
3. @onderceylan PWAs What PWAs can do today? web Chapter 1
4. @onderceylan PWAs … but before moving forward
5. @onderceylan PWAs A quick PWA primer • A modern web app that uses new APIs to provide an app-like experience for users. • It involves a few web standards, namely; • Service Worker. Which enable true reliability on the web. What I mean by that is I can build an app that as long as you loaded it while you were online, from then on it will always open, even if you’re not. This puts it on equal footing with other apps. • HTTPS. Requires encrypted connections • Web App Manifest. A simple JSON file that describes your application. What icons to use is someone adds it to their home screen, what its name is, etc
6. @onderceylan PWAs –Alex Russell @slightlylate “It’s just a website that took all the right vitamins.”
7. @onderceylan PWAs • PWAs can be fast and robust. • PWAs can offer push notifications, integration with other apps (and the web), location services. • PWAs can use device features like cameras, data storage, GPS and motion sensors, face detection, and more. • The point is to create something that will work when there’s no internet connection, and make it possible to launch it right from the Home screen, just like a native app.
8. @onderceylan PWAs How do you use a PWA?
9. @onderceylan PWAs
10. What web can do? http://bit.ly/pwa-can-do @onderceylan PWAs
11. Web capabilities on mobile devices http://bit.ly/pwa-mobile-cap @onderceylan PWAs
12. Keep track of platform status updates Mozilla: http://bit.ly/moz-stats @onderceylan PWAs Webkit: http://bit.ly/wkit-stats
13. PWA rocks! https://pwa.rocks/ @onderceylan PWAs
14. @onderceylan PWAs The facts • 53% of users will abandon a site if it does not load within 3 seconds on a mobile device. • Sites that loaded within 5 seconds earned twice as much ad revenue as slower sites. • Most sites take about 19 seconds to load on a 3G network. * According to an expansive Doubleclick by Google user study.
15. PWA case studies https://pwastats.com @onderceylan PWAs http://bit.ly/pwa-case-tinder http://bit.ly/pwa-case-twitter
16. How can I build a PWA right away? Chapter 2 @onderceylan PWAs
17. @onderceylan PWAs Start with service workers • Improve performance of your application/site • Make your app "offline-first" • Act as the base for advanced features • Notifications API • Push API • Background Sync API • Channel Messaging API
18. @onderceylan PWAs Service worker lifecycle • A service worker goes through three steps in its lifecycle: • Registration • Installation • Activation
19. @onderceylan PWAs Service worker lifecycle main.js - registration
20. @onderceylan PWAs Service worker lifecycle service-worker.js - installation service-worker.js - activation
21. @onderceylan PWAs Libraries to code service workers • Development with the service worker is not necessarily a trivial process. It is, by design, a low-level API and there can be a fair bit of code involved. While you could write your own service worker code, there are some libraries provided that automate many of the details for you while also following the best practices and avoiding common gotchas. • Earlier versions of PWA used the sw-toolbox library and sw- precache module that are built on top of the service worker primitives, like the Cache and Fetch APIs. These tools abstract low- level complexities and make it easier for developers to work with service workers.
22. @onderceylan PWAs Libraries to code service workers Workbox is the successor to sw-precache and sw-toolbox. It is a collection of libraries and tools used for generating a service worker, precaching, routing, and runtime-caching. Workbox also includes modules for easily integrating background sync and Google analytics into your service worker.
23. @onderceylan PWAs Workbox effect stale-while-revalidate strategy … becomes
24. @onderceylan PWAs Workbox effect stale-while-revalidate strategy
25. @onderceylan PWAs Web app manifest
26. @onderceylan PWAs Application shell
27. @onderceylan PWAs Application shell • Reliable performance that is consistently fast • Application-like interactions • Economical use of data Benefits
28. @onderceylan PWAs Caching strategies • Stale-While-Revalidate • Cache first, Network fallback • Network first, Cache fallback • Cache/network race • Network only • Cache only
29. @onderceylan PWAs Stale-While-Revalidate
30. @onderceylan PWAs Cache first
31. @onderceylan PWAs Network first
32. @onderceylan PWAs Workbox Demo
33. @onderceylan PWAs FaceTime Demo
34. @onderceylan PWAs FaceTime Demo https://facetime-pwa.firebaseapp.com/
35. @onderceylan PWAs Ionic PWA toolkit • Ionic • Stencil • Workbox • Firebase http://bit.ly/pwa-tkit
36. @onderceylan PWAs Is PWA a replacement for your native app? Chapter 3
37. @onderceylan PWAs Gartner predicts that by 2020, 50% of general-purpose, consumer-facing mobile apps will be PWAs. http://bit.ly/pwa-gartner
38. @onderceylan PWAs Let’s get one thing out of the way: PWAs vs. native apps isn’t a winner-take-all battle.
39. @onderceylan PWAs Where does your user base come from?
40. @onderceylan PWAs Do you have a high bounce rate?
41. @onderceylan PWAs Do you have unusual technical requirements?
42. @onderceylan PWAs Are you building a B2E app for company employees?
43. @onderceylan PWAs Forward looking statements • PWA-only startups • PWAs listed in App Stores • PWAs on iOS • PWAs everywhere
44. @onderceylan PWAs Thank you!