Page MenuHomePhabricator

[Cashtab] cache api calls with Service Worker
ClosedPublic

Authored by hungsam on Jan 8 2022, 06:10.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Commits
rABC939f819b649f: [Cashtab] cache api calls with Service Worker
Summary

Currently, Cashtab updates the wallet every 10 seconds

  • Cashtab makes an api call to retrieve the utxos set of the active wallet.
  • If the utxos set has changed since last update, Cashtab will retrieve the latest 10 transactions of the active wallet.
  • These 10 transactions will be shown in the Transaction History section

This approach has a few problem

  • Transaction details will never change. When there is a new transaction, Cashtab should only retrieve

the new transaction from api server. The other 9 transactions are already stored in Cashtab,
we should not have to retrieve those details again from api server

  • If we increase the number of transactions from 10 to say 100 (user should be able to view all the transactions),

we will likely reach the rate-limits imposed by the api server. Every 10s, Cashtab makes 100 api calls.
If these 100 api calls are completed before the next update, everything will be fine.
However, if it takes more than 10s, the next update will start and make another 100 api calls.
And it continues making another 100 api calls every 10s, causing rate-limits error. (adding a check
to make sure the next update will not run before the previous update has completed would fix this.)

This Diff adds caching with Service Worker to reduce the number of api calls that hit the api server.

With Service Worker and Caching

  • we can potentially reduce the update cycle from 10s.
  • add Push Notification
Test Plan
  1. First Visit - when user first visits cashtab.com, static assets will be cached
  2. cd web/cashtab
  3. npm install
  4. npm start
  5. make sure no error
  6. clt + c to kill the server
  7. npm run build
  8. npm install -g serve
  9. serve -s build (intead of npm start, due to file size of the main js chunk procuded by the dev server being >= 4MB, prevent it from being cached)
  10. open localhost:3000 on browser
  11. check that the following caches are created + cashtab-static-assets-v1.0.0 + cashtab-tx-data-v1.0.0 + cashtab-slp-tx-data-v1.0.0 + cashtab-slp-token-stats-v1.0.0
  12. check that everything works as expected
  1. Subsequent Visit - after caches are created, static assets and existing transaction details will be served by the caches
  2. refresh localhost:3000
  3. make sure that all static assets are served from caches (inspect Developer Tools / Network Tab)
  4. make sure everything works as expected
  1. New transaction
  2. send / receive xec with the wallet
  3. make sure that only the new transaction request is served by the api server, the rest is served from caches
  1. Update patches - caches will serve up the latest update patches
  2. make some changes to the code + change primary colour in src/assets/styles/themes.js to #00AB7E + change txHistoryCount in src/components/Common/Tickers.js from 10 to 20
  3. npm run build
  4. serve -s build
  5. open localhost:3000
  6. check that the primary colour has been changed
  7. send / recieve xec with this wallet
  8. make sure that the Transaction History is now showing 20 transactions

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

hungsam requested review of this revision.Jan 8 2022, 06:10

Thanks for this diff - this is a thoughtful way to improve Cashtab performance esp on the PWA and mobile side.

For landing the diff -- please reduce the amount of features added. For example, caching google fonts should be a separate diff and not rolled into this diff.

We want to make sure that every diff is changing just one thing.

This revision now requires changes to proceed.Jan 10 2022, 22:52

Respond to feedback
remove google fonts caches
remove status code 0 from CacheableResponsePlugin

This revision is now accepted and ready to land.Jan 19 2022, 20:17