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

Mobile DApp Best Practices (ETHDenver 2018)

Peter Jihoon Kim
February 17, 2018
Programming
0
390

Mobile DApp Best Practices (ETHDenver 2018)

Peter Jihoon Kim

February 17, 2018
Tweet

More Decks by Peter Jihoon Kim

See All by Peter Jihoon Kim
Building Mobile DApps - Frequently Asked Questions (ETHBuenosAires 2018)
petejkim
4
930
Ethereum on Mobile
petejkim
0
220
An Introduction To Programming In Go
petejkim
1
1.1k
Building Desktop Apps with Ember and Node-Webkit
petejkim
5
9.3k

Other Decks in Programming

See All in Programming
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
Outline View in SwiftUI
1024jp
1
330
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
290
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
920
Macとオーディオ再生 2024/11/02
yusukeito
0
370
C++でシェーダを書く
fadis
6
4.1k
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
93
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Gamification - CAS2011
davidbonilla
80
5k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Building Applications with DynamoDB
mza
90
6.1k

Transcript

  1. Mobile DApp Best Practices Pete Kim @petejkim Creator, Cipher Browser

  2. Cipher Browser - ETHDenver Cipher Browser A full-featured mobile Ethereum

    wallet & Web 3 DApp browser www.cipherbrowser.com

  3. Cipher Browser - ETHDenver Ensure web3 object is available

  4. Cipher Browser - ETHDenver How web3 object is injected (iOS)

    • iOS WebKit provides a built-in way to inject custom JS (WKUserScript) • web3 object is injected right after DOM initialization and before page load • This is very reliable Start navigation/ HTTP request Initialize DOM Receive HTTP response Load document Inject web3 Document ready (window.onload)

  5. Cipher Browser - ETHDenver Web3 injection is not as reliable

    on Android

  6. Cipher Browser - ETHDenver How web3 object is injected (Android)

    • Android WebView does not provide a way to inject JS before page load • Workaround: To inject web3 before page load, the HTTP request is intercepted and its response body is mutated ◦ <script> containing web3 is injected right after <head> Start navigation/ HTTP request Initialize DOM Receive HTTP response Load document Intercept req, look for <head>, inject <script> containing web3 Document ready (window.onload)

  7. Cipher Browser - ETHDenver Problems with web3 injection on Android

    • Only GET requests for the main page load can be intercepted ◦ Form submissions (POST) can’t be intercepted • <head> tag must be present (without any attributes) • Cookies don’t get loaded • A more reliable and hack-free web3 injection is possible after page load ◦ However, most existing DApps expect web3 object to be available immediately

  8. Cipher Browser - ETHDenver Prefer SPA with AJAX • Prefer

    a single page app that uses AJAX to load or submit data ◦ A SPA is loaded via a single GET request ◦ Only the main page (containing SPA) needs web3 injection • If the DApp has be a backend-rendered multi-page app, ensure responses to form submissions are 302 redirects ◦ This forces browser to issue a GET request to load page content • Use localStorage/sessionStorage to store user data ◦ Cookies don’t get loaded on intercepted pages on Android • Ensure HTML contains <head> (must be exact match) Android: Cookies aren’t loaded on web3-injected pages Android: Responses to form submissions or non-GET requests don’t get web3 injection

  9. Cipher Browser - ETHDenver Do not assume that web3 object

    is available immediately • Instead, poll and wait for it to become available. • In near future, DApp browsers (both mobile and desktop) may only inject web3 when requested by user for privacy

  10. Cipher Browser - ETHDenver Do not assume that web3 object

    is available immediately function checkForWeb3 () { if (window.web3 && web3.currentProvider) { startDApp() return } window.setTimeout(checkForWeb3, 100) } document.addEventListener('load', checkForWeb3, false)

  11. Cipher Browser - ETHDenver Avoid Filter/Log/Watch API

  12. Cipher Browser - ETHDenver • Improper use of filter/log/watch API

    can render app unresponsive and may also inadvertently cause a DoS attack on a node • Instead of relying on events and logs, poll and read blockchain for changes ◦ Do not poll too aggressively (once every 4 or 5 seconds is OK) ◦ Near future: web3.js 1.0 and WebSocket provider will make event tracking easier Avoid Filter/Watch API

  13. Cipher Browser - ETHDenver Polling: Avoid setInterval, use setTimeout •

    setInterval: App is blocked (e.g. in the BG) (Enqueued) (Flushed) • setTimeout: App is blocked (e.g. in the BG)

  14. Cipher Browser - ETHDenver Polling: Avoid setInterval, use setTimeout let

    timer function fn () { if (success) { window.clearInterval(timer) } } timer = window.setInterval(fn, 4000) function fn () { if (success) { return } window.setTimeout(fn, 4000) } fn()

  15. Cipher Browser - ETHDenver Handle account and network changes

  16. Cipher Browser - ETHDenver Listen for account and network changes

    function checkNetworkAndAccount () { if (web3.eth.accounts[0] !== currentAccount || web3.version.network !== currentNetwork) { handleChange() } window.setTimeout(checkNetworkAndAccount, 1000) } checkNetworkAndAccount()

  17. Cipher Browser - ETHDenver Follow mobile web best practices

  18. Cipher Browser - ETHDenver Mobile-friendly user interface • Have a

    fixed, non-zoomable viewport <meta name=”viewport” content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"> • Create responsive CSS with media queries • Avoid hover (mouseover) actions • Avoid horizontal scrolling

  19. Cipher Browser - ETHDenver Other Recommendations • Don’t open popups

    or new tabs (e.g. <a target=”_blank”>) • Avoid window.alert/confirm/prompt (blocks JS) ◦ Instead, show modal dialogs within the web app • Frequently save app state and restore state when app is reloaded ◦ Use localStorage to persist state ◦ Mobile OSes kill background apps aggressively • Use polyfills for ES6/ES7+ functions! (core-js)

  20. Cipher Browser - ETHDenver Debugging with Chrome Dev Tools (Android)

  21. Cipher Browser - ETHDenver Debugging with Chrome Dev Tools 1.

    Enable USB Debugging in Settings 2. Connect with USB 3. Open DApp in Cipher

  22. Cipher Browser - ETHDenver Debugging with Chrome Dev Tools 4.

    Navigate to chrome://inspect/#devices on Chrome browser

  23. Cipher Browser - ETHDenver Have fun building mobile DApps! Cipher

    Browser is available on both iOS App Store and Android Google Play store.

  24. Cipher Browser - ETHDenver Aragon ETHDenver Token Airdrop http://denver.aragon.one/