Skip to content

use Server Worker to cache static assets and tx data api call

Hung Sam requested to merge update-service-worker into master

Currently, every 10s,

  • SendLotus makes an api call to retrieve the utxos set of the active wallet.
  • If the utxos set has changed since last update, SendLotus will retrieve the details of the latest 5 transactions of the active wallet.
  • These 5 transactions will be shown in the Recent Transactions section

This approach has a few problems

  • Transaction details will never change. When there is a new transaction, SendLotus should only retrieve the new transaction from the api server, the other 4 transactions are already stored in SendLotus, there is no need to retrieve the details again.
  • If we increase the number of transactions from 5 to 100, we will likely reach the rate-limits imposed buy the api server. Every 10s, SendLotus makes 100 api calls. If these 100 api calls are completed before the next update, every thing will be fine. However, if it takes more than 10s, the next update will start and make another 100 api calls. And it continues 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 PR adds caching with Service Worker to reduce the number of api calls that hit the api server. Adding Service Worker also allows us to introduce Push Notifications at a later stage.

Test Plan:

  1. First visit - when user firsts visit sendlotus.com, static assets will be cached
  • cd sendlotus
  • npm install
  • npm start
  • make sure no error
  • ctl + c to kill the server
  • npm run build
  • npm install -g serve
  • serve -s build
  • open localhost:3000
  • check that the following caches are created:
    • sendlotus-static-assets-v1.0.0
    • sendlotus-tx-data-v1.0.0
  • check that everything works as expected
  1. Subsequent visit - after caches are created, static assets and exisiting transaction details will be served by the caches
  • refresh localhost:3000
  • make sure that all static assets are served from cache ( inspect Developer Tools / Network Tab )
  • make sure everything works as expected
  1. New transaction
  • send / receive lotus with the wallet
  • make sure that only the new transaction is served by the api server, the reset is served by caches
  1. Software patches are applied - make sure that every change to SendLotus is correctly reflected on the user device
  • make some change the the code
    • change primary colour in src/assets/styles/theme.js to #00AB7E
    • change txHistoryCount: in src/components/Common/Tickers.js from 5 to 10
  • npm run build
  • serve -s build
  • open localhost:3000
  • check that the primary colour change
  • send / receive lotus with this wallet
  • make sure that the primary color is changed to #00AB7E
  • make sure that the Recent Transactions is now showing 10 txs

Merge request reports