add warning for Service Worker examples (#22100)

Author: harshil1712

src/content/docs/learning-paths/mtls/mtls-workers/index.mdx

@@ -5,6 +5,8 @@ sidebar:
   order: 4
 ---
 
+import { Tabs, TabItem } from "~/components";
+
 :::note
 Cloudflare Workers runs after the Cloudflare WAF and Cloudflare Access. Review the [Traffic Sequence](https://blog.cloudflare.com/traffic-sequence-which-product-runs-first/) visible on the Cloudflare dashboard.
 :::
@@ -17,6 +19,42 @@ All Client Certificate details can be found in the [tlsClientAuth](/workers/runt
 
 Example Cloudflare Workers code to return all headers and gain visibility, including [Client Certificate headers](/ssl/client-certificates/enable-mtls/#cloudflare-workers):
 
+<Tabs> <TabItem label="Module Worker" icon="seti:javascript">
+```js
+export default {
+  async fetch(request, env, ctx) {
+    const { tlsClientAuth = {} } = request.cf || {};
+    const tlsHeaders = {
+      'X-CERT-ISSUER-DN': tlsClientAuth.certIssuerDN,
+      'X-CERT-SUBJECT-DN': tlsClientAuth.certSubjectDN,
+      'X-CERT-ISSUER-DN-L': tlsClientAuth.certIssuerDNLegacy,
+      'X-CERT-SUBJECT-DN-L': tlsClientAuth.certSubjectDNLegacy,
+      'X-CERT-SERIAL': tlsClientAuth.certSerial,
+      'X-CERT-FINGER': tlsClientAuth.certFingerprintSHA1,
+      'X-CERT-VERIFY': tlsClientAuth.certVerify,
+      'X-CERT-NOTBE': tlsClientAuth.certNotBefore,
+      'X-CERT-NOTAF': tlsClientAuth.certNotAfter
+    };
+
+    const headers = Object.fromEntries(request.headers);
+    return new Response(JSON.stringify({ ...headers, ...tlsHeaders }, null, 2), {
+      headers: { 'Content-Type': 'application/json' }
+    });
+
+}
+}
+
+````
+
+</TabItem>
+<TabItem label="Service Worker" icon="seti:javascript">
+
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js
 addEventListener('fetch', event => {
   event.respondWith(
@@ -41,7 +79,10 @@ addEventListener('fetch', event => {
     })(event.request)
   );
 });
-```
+````
+
+</TabItem>
+</Tabs>
 
 The response when using the browser with a P12 Certificate to visit the mTLS hostname would look similar to this example:
 

src/content/docs/workers/configuration/sites/start-from-existing.mdx

@@ -95,6 +95,12 @@ export default {
 
 </TabItem> <TabItem label="Service Worker" icon="seti:javascript">
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js
 import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
 

src/content/docs/workers/examples/cache-using-fetch.mdx

@@ -435,6 +435,12 @@ export default {
 
 </TabItem> <TabItem label="Service Worker" icon="seti:javascript">
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js title="index.js"
 addEventListener("fetch", (event) => {
 	return event.respondWith(handleRequest(event.request));

src/content/docs/workers/observability/errors.mdx

@@ -301,6 +301,12 @@ export default {
 
 </TabItem> <TabItem label="Service Worker" icon="seti:javascript">
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js
 addEventListener("fetch", (event) => {
 	event.respondWith(handleEvent(event));
@@ -342,6 +348,12 @@ export default {
 
 </TabItem> <TabItem label="Service Worker" icon="seti:javascript">
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js
 addEventListener("fetch", (event) => {
 	event.passThroughOnException();

src/content/docs/workers/observability/logs/workers-logs.mdx

@@ -139,6 +139,12 @@ export default {
 
 </TabItem> <TabItem label="Service Worker" icon="seti:javascript">
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js
 addEventListener("fetch", (event) => {
         event.respondWith(handleRequest(event.request));

src/content/docs/workers/reference/migrate-to-module-workers.mdx

@@ -24,6 +24,12 @@ There are several reasons to migrate your Workers to the ES modules format:
 
 The following example demonstrates a Worker that redirects all incoming requests to a URL with a `301` status code.
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 With the Service Worker syntax, the example Worker looks like:
 
 ```js

src/content/docs/workers/runtime-apis/fetch.mdx

@@ -40,6 +40,12 @@ export default {
 
 </TabItem> <TabItem label="Service Worker" icon="seti:javascript">
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js null {8}
 addEventListener("fetch", (event) => {
 	// NOTE: can’t use fetch here, as we’re not in an async scope yet

src/content/docs/workers/runtime-apis/streams/index.mdx

@@ -46,6 +46,12 @@ export default {
 
 </TabItem> <TabItem label="Service Worker" icon="seti:javascript">
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js
 addEventListener("fetch", (event) => {
 	event.respondWith(fetchAndStream(event.request));
@@ -89,6 +95,12 @@ export default {
 
 </TabItem> <TabItem label="Service Worker" icon="seti:javascript">
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 ```js
 addEventListener("fetch", (event) => {
 	event.respondWith(fetchAndStream(event.request));

src/content/docs/workers/wrangler/migration/v1-to-v2/wrangler-legacy/configuration.mdx

@@ -484,6 +484,12 @@ A custom build command for your project. There are two configurations based on t
 
 #### Service Workers
 
+:::caution[Service Workers are deprecated]
+
+Service Workers are deprecated, but still supported. We recommend using [Module Workers](/workers/reference/migrate-to-module-workers/) instead. New features may not be supported for Service Workers.
+
+:::
+
 This section is for customizing Workers with the `service-worker` format. These Workers use `addEventListener` and look like the following:
 
 ```js