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
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
120
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
610
Jakarta EE meets AI
ivargrimstad
0
510
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
520
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
最新TCAキャッチアップ
0si43
0
140
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
860
初めてDefinitelyTypedにPRを出した話
syumai
0
400
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
280

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Building Your Own Lightsaber
phodgson
103
6.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
KATA
mclloyd
29
14k
RailsConf 2023
tenderlove
29
900
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Being A Developer After 40
akosma
86
590k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Designing for Performance
lara
604
68k

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