Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps - FullStack Conference 2018

jamesmaciver
July 12, 2018
Programming
0
80

Progressive Web Apps - FullStack Conference 2018

jamesmaciver

July 12, 2018
Tweet

More Decks by jamesmaciver

See All by jamesmaciver
Progressive Web Apps - DDD Scotland 2018
jamesmaciver
0
290

Other Decks in Programming

See All in Programming
Symfony Mapper Component
soyuka
2
730
Full stack testing :: basic to basic
up1
1
930
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
ドメインイベント増えすぎ問題
h0r15h0
1
170
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
900
テストケースの名前はどうつけるべきか？
orgachem
PRO
0
130
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
330
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
260
これでLambdaが不要に？！Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k

Featured

See All Featured
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
How to Ace a Technical Interview
jacobian
276
23k
How GitHub (no longer) Works
holman
311
140k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k

Transcript

  1. Progressive Web Apps James Maciver @jmaciver22 Progressive Web Apps

  2. Progressive Web Apps James Maciver @jmaciver22 About Me - James

    Maciver Technical Lead at Streamba Full stack developer focussed on .NET and JS Twitter: @jmaciver22

  3. Progressive Web Apps James Maciver @jmaciver22 Progressive Web Apps What

    is a Progressive Web App (PWA)? Why do we care? Building a PWA (Service Workers, Cache API, IndexedDb, Web Push, Background Sync, Web App Manifest)

  4. Progressive Web Apps James Maciver @jmaciver22 What is a PWA?

  5. Progressive Web Apps James Maciver @jmaciver22 What is a PWA?

    - Reliable Always Available Instantly Available Network access is a Progressive Enhancement

  6. Progressive Web Apps James Maciver @jmaciver22 What is a PWA?

    - Fast It just feels native Response: respond in under 50 ms Animation: produce a frame in 10ms Idle: maximise the use of Idle Time Load: Deliver content and interactive in 5s on first hit, 2s on subsequent hits

  7. Progressive Web Apps James Maciver @jmaciver22 What is a PWA?

    - Engaging First Class Citizen on a user’s device Frictionless Installation Increased Engagement

  8. Progressive Web Apps James Maciver @jmaciver22 Why should we care?

  9. Progressive Web Apps James Maciver @jmaciver22 Twitter Lite Twitter developed

    Twitter Lite to deliver a more robust experience, with explicit goals for instant loading, user engagement and lower data consumption. “Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.” 65% increase in pages per session 75% increase in Tweets sent 20% decrease in bounce rate

  10. Progressive Web Apps James Maciver @jmaciver22 BookMyShow (Indian Ticketing Firm)

    “Since launching our PWA, we’ve seen an exponential increase in mobile conversion rates. The PWA helped us connect with more people on mobile — and it's mobile users who make up the majority of our overall audience.” BookMyShow's PWA drove an 80%+ increase in their conversion rates. The size of the PWA is 54x smaller than the Android app and 180x smaller than the iOS app. The PWA takes less than 2.94 seconds to load and enables checkout within 30 seconds.

  11. Progressive Web Apps James Maciver @jmaciver22 Jumia (African e-commerce site)

    In Jumia's main market, sub-Saharan Africa, 75% of the mobile connections are on 2G networks. Many users only have intermittent connectivity and visit the site from low-end phones with data limitations 33% higher conversion rate 50% lower bounce rate 12X more users versus native apps (Android & IOS) 5X less data used 2X less data to complete first transaction 25X less device storage required

  12. Progressive Web Apps James Maciver @jmaciver22 Building a PWA

  13. Progressive Web Apps James Maciver @jmaciver22 Disclaimer!

  14. Progressive Web Apps James Maciver @jmaciver22 FullStack PWA (Demo)

  15. Progressive Web Apps James Maciver @jmaciver22 AppCache <html manifest="example.appcache"> ...

    </html> CACHE MANIFEST # v1 - 2011-08-13 # This is a comment. http://www.example.com/index.html http://www.example.com/header.png http://www.example.com/blah/blah

  16. Progressive Web Apps James Maciver @jmaciver22 AppCache Application Cache is

    a Douchebag by Jake Archibald “The ApplicationCache spec is like an onion: it has many layers, and as you peel through them you will be reduced to tears” - Files Always Come from the Application Cache, even if online! - The application cache is only updated if the appcache manifest itself has changed - Non Cached files can’t be accessed from cached files - ApplicationCache respects caching headers - with no caching headers the browser will guess.

  17. Progressive Web Apps James Maciver @jmaciver22 Service Workers The heart

    of a PWA Script that runs in the background Client side proxy Server App Service worker

  18. Progressive Web Apps James Maciver @jmaciver22 Service Workers - Cache

    API Store for resources necessary to load your app when offline Request / Response pairings stored Available in windowed scopes as well as workers Multiple named Caches per origin (helpful for versioning) No Expiration or automatic updating. Does not honour cache headers E.g. match(), add(), put(), delete(), keys()

  19. Progressive Web Apps James Maciver @jmaciver22 Service Workers - IndexedDB

    Fully transactional database Javascript-base Object Oriented Database (Structured Clone Algorithm) Indexes to allow high performance searches Notoriously bad API Wrappers - IndexedDB Promised, Local Forage, Lovefield

  20. Progressive Web Apps James Maciver @jmaciver22 Service Workers - Web

    Push Push API to allow receiving of messages from a server whether app is active or not. Notification API to display the message as a notification.

  21. Progressive Web Apps James Maciver @jmaciver22 Service Workers - Web

    Push Server APP Push Service (Web Push Protocol) PushSubscription /w endpoint Subscriptions Message to user’s endpoint Message

  22. Progressive Web Apps James Maciver @jmaciver22

  23. Progressive Web Apps James Maciver @jmaciver22 Service Workers - Background

    Sync Allows user to create content offline and sync to server later. Still in early stages - Chrome only. Extends service workers with a sync event and an API for signalling the desire for this event to fire. serviceWorkerRegistration.sync.register() to request a sync. self.addEventListener(‘sync’, () =>{}) to carry out the sync

  24. Progressive Web Apps James Maciver @jmaciver22 Web App Manifest JSON

    manifest that provides information needed to install app “natively” To install on Android, must have a Web App Manifest & a registered service worker.

  25. Progressive Web Apps James Maciver @jmaciver22

  26. Progressive Web Apps James Maciver @jmaciver22 Measuring - Lighthouse

  27. Progressive Web Apps James Maciver @jmaciver22 Resources

  28. Progressive Web Apps James Maciver @jmaciver22 Resources Service Workers Spec

    (Working Draft) https://www.w3.org/TR/service-workers-1/ Is Service Worker Ready? https://jakearchibald.github.io/isserviceworkerready/ Offline Cookbook (Caching Strategies) https://jakearchibald.com/2014/offline-cookbook/ Google’s reference for “Amazing Web Experiences” https://developers.google.com/web/fundamentals/

  29. Progressive Web Apps James Maciver @jmaciver22 Resources HNPWA - Hacker

    News Readers as PWAs (PWAs using different frameworks) https://hnpwa.com/ Web Push Book https://web-push-book.gauntface.com/ Demo https://github.com/jamesmaciver/fullstack-demo

  30. Progressive Web Apps James Maciver @jmaciver22 Thanks