odoe/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Workers!</title>

  <style>
    html,
    body,
    #viewDiv {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">

 <script src="https://js.arcgis.com/4.3/"></script>

  <script>
    require([
      "esri/config",
      "esri/core/promiseUtils",
      "esri/core/workers",
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/Polygon",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleMarkerSymbol"
    ], function(
      esriConfig,
      promiseUtils, workers,
      EsriMap, MapView, Polygon, SimpleFillSymbol, SimpleMarkerSymbol
    ) {

      const map = new EsriMap({
        basemap: "topo"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.244, 34.052],
        zoom: 12
      });

      const fill = new SimpleFillSymbol({
          outline: {
              color: [0, 197, 255, 1]
          },
          color: [0, 197, 255, 0]
      });

      const marker = new SimpleMarkerSymbol({
          outline: {
              color: [255, 255, 255, 1]
          },
          color: [0, 77, 168, 1]
      });

      view.then(() => {
        const extent = view.extent.toJSON();
        const centroid = view.extent.center;

        const local = window.location.href.substring(0, window.location.href.lastIndexOf('/'));
        const workerUrl = `${local}/worker.js`;
        workers.open({
          progress: (msg) => {
            console.log("progress:", msg);
            return promiseUtils.resolve(msg);
          }
        }, workerUrl)
        .then(function(results) {
          const geometries = results.map(result => Polygon.fromJSON(result));
          const graphics = geometries.map(geometry => {
            return { symbol: fill, geometry };
          })
          graphics.push({ symbol: marker, geometry: centroid });
          view.graphics.addMany(graphics);
          view.goTo({
            target: geometries
          });
        });
      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

## worker.js
define([
  "esri/config",
  "esri/core/promiseUtils",
  "esri/geometry/geometryEngine",
  "esri/geometry/Extent",
  "esri/geometry/Polygon"
],
function(
  esriConfig,
  promiseUtils,
  geometryEngine, Extent, Polygon
  ) {
  class MyWorker {
    magic({extent}, {proxy}) {
      proxy.connection.invoke("progress", "starting");
      const area = Polygon.fromExtent(Extent.fromJSON(extent));
      proxy.connection.invoke("progress", "polygon created");
      const centroid = area.centroid;
      const buffers = [];
      proxy.connection.invoke("progress", "starting buffer creation");
      for (let i = 100; i <= 50000; i = i + 100) {
        const ptBuff = geometryEngine.geodesicBuffer(centroid, i, "feet");
        const data = ptBuff.toJSON();
        buffers.push(data);
      }
      proxy.connection.invoke("progress", "buffer creation done");
      return promiseUtils.resolve({ data: buffers });
    }
  }
  /*
  const MyWorker = function MyWorker() {};
  MyWorker.prototype.magic = function magic({ extent }, { proxy }) {}
  */
  return MyWorker;
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>Workers!</title>

	<style>
	html,
	body,
	#viewDiv {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	}
	</style>

	<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">

	<script src="https://js.arcgis.com/4.3/"></script>

	<script>
	require([
	"esri/config",
	"esri/core/promiseUtils",
	"esri/core/workers",
	"esri/Map",
	"esri/views/MapView",
	"esri/geometry/Polygon",
	"esri/symbols/SimpleFillSymbol",
	"esri/symbols/SimpleMarkerSymbol"
	], function(
	esriConfig,
	promiseUtils, workers,
	EsriMap, MapView, Polygon, SimpleFillSymbol, SimpleMarkerSymbol
	) {

	const map = new EsriMap({
	basemap: "topo"
	});

	const view = new MapView({
	container: "viewDiv",
	map: map,
	center: [-118.244, 34.052],
	zoom: 12
	});

	const fill = new SimpleFillSymbol({
	outline: {
	color: [0, 197, 255, 1]
	},
	color: [0, 197, 255, 0]
	});

	const marker = new SimpleMarkerSymbol({
	outline: {
	color: [255, 255, 255, 1]
	},
	color: [0, 77, 168, 1]
	});

	view.then(() => {
	const extent = view.extent.toJSON();
	const centroid = view.extent.center;

	const local = window.location.href.substring(0, window.location.href.lastIndexOf('/'));
	const workerUrl = `${local}/worker.js`;
	workers.open({
	progress: (msg) => {
	console.log("progress:", msg);
	return promiseUtils.resolve(msg);
	}
	}, workerUrl)
	.then(function(results) {
	const geometries = results.map(result => Polygon.fromJSON(result));
	const graphics = geometries.map(geometry => {
	return { symbol: fill, geometry };
	})
	graphics.push({ symbol: marker, geometry: centroid });
	view.graphics.addMany(graphics);
	view.goTo({
	target: geometries
	});
	});
	});

	});
	</script>
	</head>

	<body>
	<div id="viewDiv"></div>
	</body>

	</html>
	define([
	"esri/config",
	"esri/core/promiseUtils",
	"esri/geometry/geometryEngine",
	"esri/geometry/Extent",
	"esri/geometry/Polygon"
	],
	function(
	esriConfig,
	promiseUtils,
	geometryEngine, Extent, Polygon
	) {
	class MyWorker {
	magic({extent}, {proxy}) {
	proxy.connection.invoke("progress", "starting");
	const area = Polygon.fromExtent(Extent.fromJSON(extent));
	proxy.connection.invoke("progress", "polygon created");
	const centroid = area.centroid;
	const buffers = [];
	proxy.connection.invoke("progress", "starting buffer creation");
	for (let i = 100; i <= 50000; i = i + 100) {
	const ptBuff = geometryEngine.geodesicBuffer(centroid, i, "feet");
	const data = ptBuff.toJSON();
	buffers.push(data);
	}
	proxy.connection.invoke("progress", "buffer creation done");
	return promiseUtils.resolve({ data: buffers });
	}
	}
	/*
	const MyWorker = function MyWorker() {};
	MyWorker.prototype.magic = function magic({ extent }, { proxy }) {}
	*/
	return MyWorker;
	});