{
  "trx_id": "9acce456a915e5a2de73cca73e59d04e74249429",
  "block": 106145372,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2026-05-18T01:51:54",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "7122.174463 VESTS"
    }
  ]
}

{
  "trx_id": "aa5717996fbb637c65615bfdcf11fb6e909ea579",
  "block": 105983544,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2026-05-12T10:22:51",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "4409.964058 VESTS"
    }
  ]
}

{
  "trx_id": "db758e2c4e4b308ef9b40f2c058b90d771c51c0c",
  "block": 105512978,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2026-04-26T01:10:12",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "7134.690219 VESTS"
    }
  ]
}

{
  "trx_id": "e2eced9430eca542e45fbd6355d1efd80081e5d0",
  "block": 102857001,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2026-01-23T12:07:54",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "4451.510877 VESTS"
    }
  ]
}

{
  "trx_id": "feae4e3adb0a6b99699360a190f547ec2554f276",
  "block": 91303352,
  "trx_in_block": 3,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2024-12-17T07:24:39",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "4615.730074 VESTS"
    }
  ]
}

{
  "trx_id": "f3b8e30812b099dd2741cb1eddcd930569213068",
  "block": 79857541,
  "trx_in_block": 5,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2023-11-13T23:06:54",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "4784.863606 VESTS"
    }
  ]
}

{
  "trx_id": "f966970bef91c3b36e162469697848f89edd043b",
  "block": 78350110,
  "trx_in_block": 1,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2023-09-21T23:44:09",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "7722.142392 VESTS"
    }
  ]
}

{
  "trx_id": "c5be84b18858b05c712fe5c0e04dee2ddc82cd4e",
  "block": 69115143,
  "trx_in_block": 2,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2022-11-03T13:16:48",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "7943.823830 VESTS"
    }
  ]
}

{
  "trx_id": "56c03ab9f8e92b6404965136d9581e62b7543430",
  "block": 60816242,
  "trx_in_block": 20,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2022-01-17T16:40:30",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "8164.058966 VESTS"
    }
  ]
}

{
  "trx_id": "188c8864cfb4f202a933e58189129c4503be546d",
  "block": 54609458,
  "trx_in_block": 3,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2021-06-14T02:16:06",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "8348.125719 VESTS"
    }
  ]
}

{
  "trx_id": "7f6d7d367f908a0c8a942f5a3d9b7babb6702523",
  "block": 49356857,
  "trx_in_block": 8,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-12-11T12:32:51",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "8535.547693 VESTS"
    }
  ]
}

{
  "trx_id": "237b57b8310127c2542870c3b52154de4c510e07",
  "block": 49208411,
  "trx_in_block": 9,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-12-06T06:09:39",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "1912.543513 VESTS"
    }
  ]
}

{
  "trx_id": "535dd0c1f4e48aa56b065472aa2f14acce4404c7",
  "block": 49191955,
  "trx_in_block": 10,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-12-05T16:11:06",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "8541.755547 VESTS"
    }
  ]
}

{
  "trx_id": "dbe4f17432ec498b90765ab879a6f5622349d41b",
  "block": 48261259,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-11-02T18:34:24",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "1920.017158 VESTS"
    }
  ]
}

{
  "trx_id": "4f16af4967c2a870703c90269a5fde25577cfb48",
  "block": 45686465,
  "trx_in_block": 2,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-08-04T03:14:42",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "8675.857226 VESTS"
    }
  ]
}

{
  "trx_id": "97b64794e12d97e8f8e2366ae46dfb461ea7ed0b",
  "block": 45574701,
  "trx_in_block": 0,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-07-31T05:18:57",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "28591.286937 VESTS"
    }
  ]
}

{
  "trx_id": "10f01b16ee753049e673fe2e426896f67e56246b",
  "block": 43218680,
  "trx_in_block": 6,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-05-09T07:08:30",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "28787.396076 VESTS"
    }
  ]
}

{
  "trx_id": "8ee83426b92c0fbfe54f7894a1d33cb02ddab003",
  "block": 43195023,
  "trx_in_block": 6,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-05-08T10:57:24",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "5349.190750 VESTS"
    }
  ]
}

{
  "trx_id": "2d5c1c0c6eb69486c683ab5793861aa3a93a9dd9",
  "block": 43084752,
  "trx_in_block": 5,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-05-04T12:47:45",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "cra",
      "author": "jfbloom22",
      "permlink": "web-workers-in-create-react-app-v3",
      "title": "Web Workers in Create React App v3",
      "body": "@@ -1,8 +1,121 @@\n+How we went from loading 30mb of JSON in 5minutes to loading it in under 1 minute with the help of web workers.%0A%0A\n We are b\n@@ -3337,16 +3337,286 @@\n   %0A%60%60%60%0A%0A\n+After we implemented this we also found that there was a bottleneck with how redux-persist was putting everything inside a single key in indexDB.  We ended up downgrading to redux-persist v4 which out of the box stores each root reducer in a separate key in indexDB.  %0A%0A\n resource\n",
      "json_metadata": "{\"tags\":[\"react\",\"web\",\"workers\",\"redux\",\"indexed\"],\"links\":[\"https://developers.google.com/web/tools/chrome-devtools/network/understanding-resource-timing#hitting_throughput_capacity\",\"https://www.newline.co/fullstack-react/articles/introduction-to-web-workers-with-react/\",\"https://joshzeigler.com/technology/web-development/how-big-is-too-big-for-json\",\"https://github.com/andywer/threads.js\",\"https://github.com/nolanlawson/promise-worker\",\"https://uptech.team/blog/filter-1gb-json-on-frontend-and-not-crash-browser\",\"https://itnext.io/typescript-web-workers-with-angular-cli-6-19129b299d69\",\"https://stackoverflow.com/questions/47475360/creating-a-web-worker-inside-react\"],\"app\":\"steemit/0.2\",\"format\":\"markdown\"}"
    }
  ]
}

{
  "trx_id": "7e378b64ae8dd14078c6d947bbb20f4b03c6b2f7",
  "block": 43084648,
  "trx_in_block": 4,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-05-04T12:42:24",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "cra",
      "author": "jfbloom22",
      "permlink": "web-workers-in-create-react-app-v3",
      "title": "Web Workers in Create React App v3",
      "body": "We are building an application with full offline functionality with the help of Create React App, redux-offline, and indexDB.  We have service workers enabled which handle persisting all the HTML, JS, and CSS for offline use.  Redux-offline helps persist our redux state to indexDB.  When the app initially loads after the user logs in, we gather all the data necessary for the user to work offline.  The amount of data required for this has grown over the years and we are at a point where the initial load can take upwards of 5 minutes on a good internet connection.  A lot of this time is spent deserializing the roughly 30mb worth of JSON bodies  from the ~20 HTTP requests.  This shows up in Chrome dev tools on the network tab as \"content downloading\".  In other words we are running into throughput capacity. More about that here:  https://developers.google.com/web/tools/chrome-devtools/network/understanding-resource-timing#hitting_throughput_capacity\n\nThe low hanging fruit here is to do everything we can to reduce the amount of data loaded.  We have worked hard to eliminate duplicates and only send what is needed.  Now we are at a point where we need to figure out how to best handle 30mb of JSON.  We plan to solve this with 2 basic solutions.  1. take advantage of multithreading via web workers.  2. being smarter about lazy loading and or give the user control of what they want to be able to do offline.\n\nPart of the goal here is to avoid ejecting CRA.  There are a few plugins mentioned below that help work with WebWorkers, they are worth checking out, but they are not a huge value add over the native implementation.\n\nHere is a great tutorial for adding this in CRA without ejecting:  https://www.newline.co/fullstack-react/articles/introduction-to-web-workers-with-react/\nHowever, since I am using Typescript and quickly run into \"no-restricted-globals\" when I try to use \"self\".  Fortunately this can be safely ignored.\n`   \nself.addEventListener(\"message\", e => { // eslint-disable-line no-restricted-globals\n`\n\nHere is the gist:\n### App.tsx\n```\n  componentDidMount() {\n    this.worker = new WebWorker(worker);\n    setTimeout(() => {\n      console.log('posting fetch users');\n      this.worker.postMessage('Fetch Users');\n    }, 3000);\n\n    this.worker.addEventListener('message', (event: any) => {\n      console.log('recieved message', event);\n    });\n```\n\n### workerSetup.ts\nThis is the key to avoiding ejecting the CRA app.\n```\nexport default class WebWorker {\n\tconstructor(worker: any) {\n\t\tconst code = worker.toString();\n\t\tconst blob = new Blob(['('+code+')()']);\n\t\treturn new Worker(URL.createObjectURL(blob));\n\t}\n}\n```\n\n### worker.ts\n```\ndeclare function postMessage(message: any): void;\nexport default () => {\n    self.addEventListener(\"message\", e => { // eslint-disable-line no-restricted-globals\n      if (!e) return;\n  \n      const users = [];\n\n      const userDetails = {\n        name: \"Jane Doe\",\n        email: \"[email protected]\",\n        id: 1,\n        dateJoined: 0\n      };\n  \n      for (let i = 0; i < 1000000; i++) {\n        userDetails.id = i++;\n        userDetails.dateJoined = Date.now();\n  \n        users.push(userDetails);\n      }\n      postMessage(users);\n    });\n  };\n  \n```\n\nresources:\nBrowser limits for large JSON: https://joshzeigler.com/technology/web-development/how-big-is-too-big-for-json\nThreads supports web workers in Node: https://github.com/andywer/threads.js\nPromise and web workers: https://github.com/nolanlawson/promise-worker\nInteresting example of 1GB of JSON: https://uptech.team/blog/filter-1gb-json-on-frontend-and-not-crash-browser\nWebWorkers and Typescript: https://itnext.io/typescript-web-workers-with-angular-cli-6-19129b299d69\nBest solution for loading a web working in React without ejecting: https://stackoverflow.com/questions/47475360/creating-a-web-worker-inside-react\nFull Example of Web Workers in in React: https://www.newline.co/fullstack-react/articles/introduction-to-web-workers-with-react/",
      "json_metadata": "{\"tags\":[\"cra\",\"react\",\"web\",\"workers\",\"redux\",\"indexed\"],\"links\":[\"https://developers.google.com/web/tools/chrome-devtools/network/understanding-resource-timing#hitting_throughput_capacity\",\"https://www.newline.co/fullstack-react/articles/introduction-to-web-workers-with-react/\",\"https://joshzeigler.com/technology/web-development/how-big-is-too-big-for-json\",\"https://github.com/andywer/threads.js\",\"https://github.com/nolanlawson/promise-worker\",\"https://uptech.team/blog/filter-1gb-json-on-frontend-and-not-crash-browser\",\"https://itnext.io/typescript-web-workers-with-angular-cli-6-19129b299d69\",\"https://stackoverflow.com/questions/47475360/creating-a-web-worker-inside-react\"],\"app\":\"steemit/0.2\",\"format\":\"markdown\"}"
    }
  ]
}

{
  "trx_id": "fbc498d5975f2a9288a52e9e5df827d203670d6a",
  "block": 42129351,
  "trx_in_block": 5,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-03-31T12:37:45",
  "op": [
    "custom_json",
    {
      "required_auths": [],
      "required_posting_auths": [
        "jfbloom22"
      ],
      "id": "notify",
      "json": "[\"setLastRead\",{\"date\":\"2020-03-31T12:37:44\"}]"
    }
  ]
}

{
  "trx_id": "17f9e0967423ac0301a8c8acac61154b3cb6ba41",
  "block": 41276245,
  "trx_in_block": 4,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-03-01T16:17:45",
  "op": [
    "comment",
    {
      "parent_author": "jfbloom22",
      "parent_permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "author": "steemitboard",
      "permlink": "steemitboard-notify-jfbloom22-20200301t161744000z",
      "title": "",
      "body": "Congratulations @jfbloom22! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@jfbloom22/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@jfbloom22) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=jfbloom22)_</sub>\n\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}"
    }
  ]
}

{
  "trx_id": "8702f1cacafd477d4b61ecbcef05597da3ac9e68",
  "block": 40899586,
  "trx_in_block": 24,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-17T13:40:36",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "typescript",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "title": "How to Handle Upgrades with Service Workers with CRA3 and Typescript",
      "body": "@@ -843,16 +843,199 @@\n %60 %5E3.2.0\n+. Verify that you have the new version of serviceWorker.ts or .js.  The old one was called %60registerServiceWorker.js%60 and the register function did not accept a configuration object. \n %0A%0Athen i\n@@ -1119,42 +1119,14 @@\n     \n-    window.confirm(%0A              \n+alert(\n 'New\n@@ -1167,45 +1167,11 @@\n te?'\n-%0A            )%0A          ) %7B%0A        \n+);%0A\n     \n@@ -1200,20 +1200,8 @@\n ();%0A\n-          %7D%0A\n     \n@@ -1656,101 +1656,534 @@\n  am \n+u\n s\n-how\n ing a \n-confirm dialog to the user so the they can control when they are ready to update.  \n+javascript alert to inform the user.  Please replace this with a custom toast or you can opt for a confirmation pattern:%0A%0A%60%60%60%0A        window.confirm(%0A              'New version available!  Ready to update?'%0A            )%0A          ) %7B%0A            window.location.reload();%0A          %7D%0A%60%60%60%0AIt is nice giving the user control here, but you will also need to add support for a) installing the update after ignoring it.  b) add support for a %22force update%22 feature for those times a critical bug needs to be resolved ASAP.\n %0A%0ATh\n",
      "json_metadata": "{\"tags\":[\"react\",\"cra3\",\"service-worker\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"links\":[\"https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68\",\"https://github.com/facebook/create-react-app/issues/5316\",\"https://developers.google.com/web/tools/workbox\",\"https://github.com/Microsoft/TypeScript/issues/11781\"]}"
    }
  ]
}

{
  "trx_id": "dc5e833f26ab91a8dbdf960de5dc47601d8c1c24",
  "block": 40899251,
  "trx_in_block": 16,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-17T13:23:48",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "typescript",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "title": "How to Handle Upgrades with Service Workers with CRA3 and Typescript",
      "body": "@@ -2042,16 +2042,36 @@\n RA, \n-checkout\n+you can use workbox directly\n : ht\n",
      "json_metadata": "{\"tags\":[\"react\",\"cra3\",\"service-worker\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"links\":[\"https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68\",\"https://github.com/facebook/create-react-app/issues/5316\",\"https://developers.google.com/web/tools/workbox\",\"https://github.com/Microsoft/TypeScript/issues/11781\"]}"
    }
  ]
}

{
  "trx_id": "81417bda6a723cbaa665db81fa49cf9c65014f91",
  "block": 40899162,
  "trx_in_block": 16,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-17T13:19:21",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "typescript",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "title": "How to Handle Upgrades with Service Workers with CRA3 and Typescript",
      "body": "@@ -815,205 +815,40 @@\n on%0A%0A\n-Grab the latest serviceWorker.ts file from: https://github.com/facebook/create-react-app/blob/3190e4f4a99b8c54acb0993d92fec8a859889a28/packages/cra-template-typescript/template/src/serviceWorker.ts\n+Update to %60react-scripts%60 %5E3.2.0\n %0A%0Ath\n@@ -1638,16 +1638,147 @@\n ate.  %0A%0A\n+The reason this works is because under the hood CRA is using %60workbox-webpack-plugin%60 which includes a %60SKIP_WAITING%60 listener.  %0A%0A\n #### Mor\n",
      "json_metadata": "{\"tags\":[\"react\",\"cra3\",\"service-worker\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"links\":[\"https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68\",\"https://github.com/facebook/create-react-app/issues/5316\",\"https://developers.google.com/web/tools/workbox\",\"https://github.com/Microsoft/TypeScript/issues/11781\"]}"
    }
  ]
}

{
  "trx_id": "beb9c73b883aece2241cae324b9b45e969a86381",
  "block": 40829675,
  "trx_in_block": 10,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-15T03:17:54",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "typescript",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "title": "How to Handle Upgrades with Service Workers with CRA3 and Typescript",
      "body": "@@ -358,17 +358,17 @@\n l the ta\n-p\n+b\n s with t\n@@ -1437,16 +1437,37 @@\n rker.ts \n+%60register()%60function \n accepts \n",
      "json_metadata": "{\"tags\":[\"react\",\"cra3\",\"service-worker\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"links\":[\"https://github.com/facebook/create-react-app/blob/3190e4f4a99b8c54acb0993d92fec8a859889a28/packages/cra-template-typescript/template/src/serviceWorker.ts\",\"https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68\",\"https://github.com/facebook/create-react-app/issues/5316\",\"https://developers.google.com/web/tools/workbox\",\"https://github.com/Microsoft/TypeScript/issues/11781\"]}"
    }
  ]
}

{
  "trx_id": "85ac55a8edd50b2113ff4c8a48ea8acb77211ce8",
  "block": 40823137,
  "trx_in_block": 12,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-14T21:50:21",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "28920.420946 VESTS"
    }
  ]
}

{
  "trx_id": "e2f0178c42b84d4bc7895c03cebc57e9fc12e82c",
  "block": 40821350,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-14T20:20:51",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "typescript",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "title": "How to Handle Upgrades with Service Workers with CRA3 and Typescript",
      "body": "It is a huge pain to figure out how to handle upgrading when using Create React App with the service worker enabled and  Typescript.  It is unfortunate because the offline functionality works amazingly well and allowing users to install the app via Chrome onto their Desktop is very impressive. \n\n### The Problem\nUsers do not know that they need to close all the taps with this app in order to install the update.  The app could instruct them to do this, but it is a poor experience.  In my case, I am not using lazy-loaded content so I simply want the app to update when an update is available.\n\n### The Second Problem\nMost examples suggest calling `skipWaiting()` in order to apply the update immediately after refreshing.  However this causes typescript to complain and the app will not compile.\n\n### The Solution\n\nGrab the latest serviceWorker.ts file from: https://github.com/facebook/create-react-app/blob/3190e4f4a99b8c54acb0993d92fec8a859889a28/packages/cra-template-typescript/template/src/serviceWorker.ts\n\nthen in index.tsx:\n\n```\n  serviceWorker.register({\n    onUpdate: registration => {\n        window.confirm(\n              'New version available!  Ready to update?'\n            )\n          ) {\n            window.location.reload();\n          }\n      if (registration && registration.waiting) {\n        registration.waiting.postMessage({ type: 'SKIP_WAITING' });\n      }\n    }\n  });\n```\nThe latest version of the ServiceWorker.ts accepts a config object with a callback function where we can handle upgrading.  If we post a message `SKIP_WAITING` this tells the service worker to stop waiting and to go ahead and load the new content after the next refresh.  In this example I am showing a confirm dialog to the user so the they can control when they are ready to update.  \n\n#### More About Service Workers\n\ngood guide: https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68\nCRA issue discussing service worker cache:  https://github.com/facebook/create-react-app/issues/5316\nIf you are not using CRA, checkout: https://developers.google.com/web/tools/workbox\nissue tracking why typescript does not include service worker typings:  https://github.com/Microsoft/TypeScript/issues/11781",
      "json_metadata": "{\"tags\":[\"react\",\"cra3\",\"service-worker\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"links\":[\"https://github.com/facebook/create-react-app/blob/3190e4f4a99b8c54acb0993d92fec8a859889a28/packages/cra-template-typescript/template/src/serviceWorker.ts\",\"https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68\",\"https://github.com/facebook/create-react-app/issues/5316\",\"https://developers.google.com/web/tools/workbox\",\"https://github.com/Microsoft/TypeScript/issues/11781\"]}"
    }
  ]
}

{
  "trx_id": "5ffabb2dd784c4edaba5aaff718fa2b3e9823f50",
  "block": 40821219,
  "trx_in_block": 12,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-14T20:14:18",
  "op": [
    "comment",
    {
      "parent_author": "jfbloom22",
      "parent_permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "author": "steemitboard",
      "permlink": "steemitboard-notify-jfbloom22-20200214t201417000z",
      "title": "",
      "body": "Congratulations @jfbloom22! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@jfbloom22/birthday1.png</td><td>Happy Birthday! - You are on the Steem blockchain for 1 year!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@jfbloom22) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=jfbloom22)_</sub>\n\n\n**Do not miss the last post from @steemitboard:**\n<table><tr><td><a href=\"https://steemit.com/steemitboard/@steemitboard/valentine-s-day-challenge-give-a-badge-to-your-beloved\"><img src=\"https://steemitimages.com/64x128/http://i.cubeupload.com/LvDzr5.png\"></a></td><td><a href=\"https://steemit.com/steemitboard/@steemitboard/valentine-s-day-challenge-give-a-badge-to-your-beloved\">Valentine's day challenge - Give a badge to your beloved!</a></td></tr></table>\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}"
    }
  ]
}

{
  "trx_id": "be936e953e18b4a07e0841588f8ebc2a8c5a851b",
  "block": 40820852,
  "trx_in_block": 18,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-14T19:55:57",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "typescript",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "title": "How to Handle Upgrades with Service Workers with CRA3 and Typescript",
      "body": "@@ -1004,16 +1004,245 @@\n ion.  %0A%0A\n+First I grabbed the latest serviceWorker.ts file from: https://github.com/facebook/create-react-app/blob/3190e4f4a99b8c54acb0993d92fec8a859889a28/packages/cra-template-typescript/template/src/serviceWorker.ts%0A%0Athen in index.tsx:%0A\n %0A%60%60%60%0A  s\n@@ -1628,12 +1628,465 @@\n  %7D%0A  %7D);%0A%60%60%60\n+%0A%0A#### More About Service Workers%0A%0Agood guide: https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68%0ACRA issue discussing service worker cache:  https://github.com/facebook/create-react-app/issues/5316%0AIf you are not using CRA, checkout: https://developers.google.com/web/tools/workbox%0Aissue tracking why typescript does not include service worker typings:  https://github.com/Microsoft/TypeScript/issues/11781\n",
      "json_metadata": "{\"tags\":[\"react\",\"cra3\",\"service-worker\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\",\"links\":[\"https://github.com/facebook/create-react-app/blob/3190e4f4a99b8c54acb0993d92fec8a859889a28/packages/cra-template-typescript/template/src/serviceWorker.ts\",\"https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68\",\"https://github.com/facebook/create-react-app/issues/5316\",\"https://developers.google.com/web/tools/workbox\",\"https://github.com/Microsoft/TypeScript/issues/11781\"]}"
    }
  ]
}

{
  "trx_id": "efe509c2e61c25f76075b1cf126aacc2b679aaf3",
  "block": 40820765,
  "trx_in_block": 15,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-14T19:51:36",
  "op": [
    "vote",
    {
      "voter": "laissez-faire",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "d315c9e92bc0a85c9af2d15d2f2e57ce804de789",
  "block": 40820763,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-14T19:51:30",
  "op": [
    "vote",
    {
      "voter": "anomaly",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "weight": 100
    }
  ]
}

{
  "trx_id": "4fe5b90bc49062eea7c304c6eaa8af459a42dd7f",
  "block": 40820746,
  "trx_in_block": 2,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-14T19:50:39",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "typescript",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "title": "How to Handle Upgrades with Service Workers with CRA3 and Typescript",
      "body": "I am using Create React App v3 and Typescript.  I have enabled offline support with the service worker and configured the manifest.json.  Chrome supports installing this progressive web application as a Desktop app.  It is very neat.  \n\nThe biggest challenge has been gracefully handling updates to the app.  The default behavior for the Service Worker is to wait until all the tabs of the web application have been closed before updating to a new version of the web app. What I found is that user’s got into the habit of logging out and logging back in. This ruined the offline support and we had user’s complaining about not being able to work well in a poor internet environment since they waited to login until they entered the poor internet environment.  \n\nLooking through a plethora of resources and examples, I really struggled to find a solid example that included Typescript.  The examples did not work well because Typescript does not include typings for the service worker skipWaiting() function.  \n\n\n```\n  serviceWorker.register({\n    onUpdate: registration => {\n          toastr.warning('Installing Update', 'Please wait...');\n    setTimeout(() => {\n      window.location.reload();\n    }, 6000);\n      if (registration && registration.waiting) {\n        registration.waiting.postMessage({ type: 'SKIP_WAITING' });\n      }\n      console.log('New content is available; refreshing.');\n    }\n  });\n```",
      "json_metadata": "{\"tags\":[\"react\",\"cra3\",\"service-worker\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}"
    }
  ]
}

{
  "trx_id": "82e5cad9b3f18dba3d6cbf7084383782697f9dff",
  "block": 40820726,
  "trx_in_block": 29,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2020-02-14T19:49:39",
  "op": [
    "comment",
    {
      "parent_author": "",
      "parent_permlink": "typescript",
      "author": "jfbloom22",
      "permlink": "how-to-handle-upgrades-with-service-workers-with-cra3-and-typescript",
      "title": "How to Handle Upgrades with Service Workers with CRA3 and Typescript",
      "body": "I am using Create React App v3 and Typescript.  I have enabled offline support with the service worker and configured the manifest.json.  Chrome supports installing this progressive web application as a Desktop app.  It is very neat.  \n\nThe biggest challenge has been gracefully handling updates to the app.  The default behavior for the Service Worker is to wait until all the tabs of the web application have been closed before updating to a new version of the web app. What I found is that user’s got into the habit of logging out and logging back in. This ruined the offline support and we had user’s complaining about not being able to work well in a poor internet environment since they waited to login until they entered the poor internet environment.  \n\nLooking through a plethora of resources and examples, I really struggled to find a solid example that included Typescript.  The examples did not work well because Typescript does not include typings for the service worker skipWaiting() function.  \n\n\n```\n  serviceWorker.register({\n    onUpdate: registration => {\n          toastr.warning('Installing Update', 'Please wait...');\n    setTimeout(() => {\n      window.location.reload();\n    }, 6000);\n      if (registration && registration.waiting) {\n        registration.waiting.postMessage({ type: 'SKIP_WAITING' });\n      }\n      console.log('New content is available; refreshing.');\n    }\n  });\n```",
      "json_metadata": "{\"tags\":[\"typescript\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}"
    }
  ]
}

{
  "trx_id": "71b88ebb3852013cc0525a58e36f1e7a2e03cda3",
  "block": 35540930,
  "trx_in_block": 20,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-08-14T09:05:45",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "8897.869496 VESTS"
    }
  ]
}

{
  "trx_id": "39a5d59598ddd66dfbff159a7da4a92aa952578c",
  "block": 32924134,
  "trx_in_block": 41,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-05-15T08:28:57",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "28897.508130 VESTS"
    }
  ]
}

{
  "trx_id": "f83b491531ba958fc46b3d7a7ce7bd13384fada6",
  "block": 32923190,
  "trx_in_block": 20,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-05-15T07:41:45",
  "op": [
    "vote",
    {
      "voter": "jfbloom22",
      "author": "chbartist",
      "permlink": "any-success-or-achievement-in-life-started-as-a-leap-of-faith",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "fdd61f218da4d4af8e72605a4347d7372506df95",
  "block": 32705196,
  "trx_in_block": 40,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-05-07T17:57:09",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "8956.000255 VESTS"
    }
  ]
}

{
  "trx_id": "b433937312eae11aac9a352be8df5c5a6ab8567e",
  "block": 30086633,
  "trx_in_block": 33,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-02-05T17:03:18",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "29068.521998 VESTS"
    }
  ]
}

{
  "trx_id": "2489117e10427380ff93e83cc42b92ab652f0a38",
  "block": 30085317,
  "trx_in_block": 11,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-02-05T15:57:30",
  "op": [
    "custom_json",
    {
      "required_auths": [],
      "required_posting_auths": [
        "jfbloom22"
      ],
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"jfbloom22\",\"following\":\"chbartist\",\"what\":[\"blog\"]}]"
    }
  ]
}

{
  "trx_id": "1c15719071af8c2a782c4b234f175f59c72b6fa2",
  "block": 30085300,
  "trx_in_block": 14,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2019-02-05T15:56:39",
  "op": [
    "vote",
    {
      "voter": "jfbloom22",
      "author": "chbartist",
      "permlink": "why-do-we-need-to-read-more-books-and-connect-with-literature",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "821d6de20c1d98dce4001fa972ae3e14ce09c618",
  "block": 23182984,
  "trx_in_block": 2,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-06-09T22:21:06",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "9139.935832 VESTS"
    }
  ]
}

{
  "trx_id": "710beb7ea594c246eefe9e6093cf644a192c5812",
  "block": 20564715,
  "trx_in_block": 48,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-03-10T22:19:48",
  "op": [
    "vote",
    {
      "voter": "jfbloom22",
      "author": "morris0",
      "permlink": "re-donaldtrump-re-cryptovestor-why-raiblocks-will-end-as-a-pump-and-dump-20180103t140503662z",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "9ee106c1e4afa6dafb7be799d01b3776c0b3a813",
  "block": 20564474,
  "trx_in_block": 59,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-03-10T22:07:42",
  "op": [
    "vote",
    {
      "voter": "jfbloom22",
      "author": "jesta",
      "permlink": "re-cryptovestor-why-raiblocks-will-end-as-a-pump-and-dump-201812t22320219z",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "4ed4b8730da67d7aced728b68ac85b9b356a6740",
  "block": 20301641,
  "trx_in_block": 30,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-03-01T18:51:30",
  "op": [
    "vote",
    {
      "voter": "jfbloom22",
      "author": "quickfingersluc",
      "permlink": "should-i-start-up-my-video-blog-again-ethereum-is-dipping",
      "weight": 10000
    }
  ]
}

{
  "trx_id": "1b75b480ab83c7538aa782d96f451e350b060244",
  "block": 20300477,
  "trx_in_block": 42,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-03-01T17:53:12",
  "op": [
    "delegate_vesting_shares",
    {
      "delegator": "steem",
      "delegatee": "jfbloom22",
      "vesting_shares": "29622.939776 VESTS"
    }
  ]
}

{
  "trx_id": "76f88bf90bdf9f4fcbd5bab102cba94a67417e6c",
  "block": 20297937,
  "trx_in_block": 57,
  "op_in_trx": 0,
  "virtual_op": 0,
  "timestamp": "2018-03-01T15:46:06",
  "op": [
    "account_create_with_delegation",
    {
      "fee": "0.500 STEEM",
      "delegation": "57000.000000 VESTS",
      "creator": "steem",
      "new_account_name": "jfbloom22",
      "owner": {
        "weight_threshold": 1,
        "account_auths": [],
        "key_auths": [
          [
            "STM87W6Be4HjyDTKBGyoTjMWi8FrftB8oLakDdBA6JMvsXREtjyQp",
            1
          ]
        ]
      },
      "active": {
        "weight_threshold": 1,
        "account_auths": [],
        "key_auths": [
          [
            "STM7fMbMyapBac4vB7eaGdNgrjVVsrbDhNyTHcEPevcQiXnTSAwDR",
            1
          ]
        ]
      },
      "posting": {
        "weight_threshold": 1,
        "account_auths": [],
        "key_auths": [
          [
            "STM7TheTBNmhRmEhnCJKfL9v2PdJSiUsKhrJfBv3iTqFotbw5WRK4",
            1
          ]
        ]
      },
      "memo_key": "STM4xg7t1Zi29mmgJGo6j8s3wjYJ7H19FqKYBAjxHJyp7tP5ZnTKy",
      "json_metadata": "{}",
      "extensions": []
    }
  ]
}