From f2635216fdeb6455b457fe52e963fa3765de3491 Mon Sep 17 00:00:00 2001 From: fin Date: Thu, 12 Dec 2024 11:38:47 +0800 Subject: [PATCH 1/2] contents: add browser compatibility note for shared worker --- questions/what-are-workers-in-javascript-used-for/en-US.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/questions/what-are-workers-in-javascript-used-for/en-US.mdx b/questions/what-are-workers-in-javascript-used-for/en-US.mdx index 428109d..765c2ef 100644 --- a/questions/what-are-workers-in-javascript-used-for/en-US.mdx +++ b/questions/what-are-workers-in-javascript-used-for/en-US.mdx @@ -153,11 +153,12 @@ In this example: - The service worker first checks if the requested resource is cached using `caches.match(event.request)`. - If it is, it returns the cached response. Otherwise, it fetches the resource from the network using `fetch(event.request)`. -## Shared workers +## Bonus: Shared workers - Can be accessed from multiple scripts in different windows/tabs/iframes. - Allow data sharing between browser contexts via a messaging interface. - Similar to dedicated web workers but with a broader scope. +- **Browser support**: Limited support, especially [not available on Android browsers](https://issues.chromium.org/issues/40290702) ### Use cases for shared workers: From e736be1600b0af2fe60780d24083711268ff05c8 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Wed, 8 Jan 2025 10:26:45 +0800 Subject: [PATCH 2/2] Update en-US.mdx --- .../en-US.mdx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/questions/what-are-workers-in-javascript-used-for/en-US.mdx b/questions/what-are-workers-in-javascript-used-for/en-US.mdx index 765c2ef..810dded 100644 --- a/questions/what-are-workers-in-javascript-used-for/en-US.mdx +++ b/questions/what-are-workers-in-javascript-used-for/en-US.mdx @@ -96,7 +96,7 @@ In this example: - After processing the message, the worker posts a message back to the main script using `postMessage()`. - The main script listens for messages from the worker using `onmessage` on the `Worker` instance. -## Service workers +### Service workers - Act as a network proxy between web app, browser, and network. - Can intercept and handle network requests, cache resources. @@ -148,19 +148,18 @@ self.addEventListener('fetch', function (event) { In this example: -- The main script registers a service worker at `/service-worker.js`. -- The service worker listens for the `fetch()` event, which is fired whenever the browser makes a network request. -- The service worker first checks if the requested resource is cached using `caches.match(event.request)`. -- If it is, it returns the cached response. Otherwise, it fetches the resource from the network using `fetch(event.request)`. +- The main script registers a service worker at `/service-worker.js` +- The service worker listens for the `fetch()` event, which is fired whenever the browser makes a network request +- The service worker first checks if the requested resource is cached using `caches.match(event.request)` +- If it is, it returns the cached response. Otherwise, it fetches the resource from the network using `fetch(event.request)` -## Bonus: Shared workers +### Bonus: Shared workers -- Can be accessed from multiple scripts in different windows/tabs/iframes. -- Allow data sharing between browser contexts via a messaging interface. -- Similar to dedicated web workers but with a broader scope. +- **Scope**: Can be accessed from multiple scripts in different windows/tabs/iframes +- **Sharing of data**: Allow data sharing between browser contexts via a messaging interface - **Browser support**: Limited support, especially [not available on Android browsers](https://issues.chromium.org/issues/40290702) -### Use cases for shared workers: +#### Use cases for shared workers: - State sharing across multiple windows. @@ -172,10 +171,10 @@ You are not expected to know about worklets, so it won't be covered in great det ## Considerations and limitations -- **Same-Origin policy**: Workers must comply with the same-origin policy, meaning the script that creates the worker and the worker script itself must be from the same origin. -- **No DOM access**: Workers do not have direct access to the DOM. They can communicate with the main thread through messages. -- **Performance**: Creating and managing workers incurs overhead. They should be used judiciously for tasks that truly benefit from parallel execution. -- **Error handling**: Proper error handling mechanisms should be in place to handle any issues within the worker scripts. +- **Same-Origin policy**: Workers must comply with the same-origin policy, meaning the script that creates the worker and the worker script itself must be from the same origin +- **No DOM access**: Workers do not have direct access to the DOM. They can communicate with the main thread through messages +- **Performance**: Creating and managing workers incurs overhead. They should be used judiciously for tasks that truly benefit from parallel execution +- **Error handling**: Proper error handling mechanisms should be in place to handle any issues within the worker scripts ## Further reading