@ okikio/シェアワーカー、すべてのブラウザーの株式会社労働者

9888 ワード

For bundle.js.org , and astro.build/play , 私は、使う方法が必要であるとわかりましたSharedWorkers すべてのブラウザで確実に、私はAを作ることを決めたminiature script それはそのあたりのラッパとして機能するだろうSharedWorker デフォルトでは、SharedWorker しかし、そうでなければ、これは通常のWeb作業者に切り替わりますSharedWorkers 種類progressive enhancement .
< div >
私は、ポリフィル/ポニーフィルが存在しないことに気づいたときSharedWorkers 私は、私が1つを作る必要があると理解し、信頼性を確保するためには、ポリフィルは徹底的に検査され、クロスブラウザの互換性をテストしたので、私は@okikio/sharedworker .

< div class ="ltag github readmeタグ"
< div class ="readme概要"
< H >

okikio / sharedworker
<高橋潤子>
< H 3 >
ShareWorkersのための小さな仕様準拠ポリフィル、それは通常の労働者のためのドロップインの交換として機能します.
<高橋潤子>
< div >
< div class ="ltag github本体"
< div class ="md "データパス="README . md "> <クラスクラス="Markdown Body Entry Content Container LG "itemProp = "text ">< h 1 dir ="auto "
/シェアワーカー
<高橋潤子>

<高橋潤子>NPM <スパン>Github <スパン>Docs <スパン>Licence

<高橋潤子>SharedWorkers , それは通常の置換のドロップとして機能しますWorkers , と同様のAPI表面をサポートしますWorkers .

Ponyfills are seperate modules that are included to replicate the functionality of the original API, but are not required to be used.

Polyfills update the original API on the global scope if it isn't supported in that specific environment or it's feature set is lacking compared to modern variations.

Check out the blog post, created for it's launch.

<高橋潤子>
インストール
< divクラス= "ハイライトハイライトソースシェルの相対的なオーバーフローの自動JSコードハイライト"

npm install sharedworker

Others

yarn add sharedworker

pnpm install sharedworker

Usage

import { SharedWorkerPolyfill as SharedWorker } from " /sharedworker";
// or 
import SharedWorker from " /sharedworker";

You can also use it directly through a script tag:

<script src="https://unpkg.com/ /sharedworker" type="module"></script

…

Usage

@okikio/sharedworker is a small mostly spec. compliant polyfill/ponyfill for SharedWorkers, it acts as a drop in replacement for normal Workers, and supports a similar API surface that matches normal Workers.

You use it like this,

shared-worker.js

/* 
 * All variables and values outside the `start(...)` function are shared between all pages, this behavior can cause unexpected bugs if you're not careful
 */
const start = (port) => {
    // All your normal Worker and SharedWorker stuff should just work
    // With no more setup 

    /** 
     * All variables and values inside the `start(...)` function are isolated to each page, and will be allocated seperately per page. 
     */
    port.onmessage = ({ data }) => {
        if (data == "Hey")
            port.postMessage("Hello, from the SharedWorker."); 
    };
};

self.onconnect = e => {
    let [port] = e.ports;
    start(port);
};

// This is the fallback, just in case the browser doesn't support SharedWorkers
if ("SharedWorkerGlobalScope" in self) 
    start(self);

< div >
< P >main.js

<> P >
クラスをハイライト表示する

import SharedWorker from "@okikio/sharedworker";

const sharedworker = new SharedWorker(new URL("shared-worker.js", import.meta.url));
sharedworker.onmessage = ({ data }) => {
    console.log(data); //= Hello, from SharedWorker
};

sharedworker.postMessage("Hey");

< div >
<症例>の場合bundle.js.org and astro.build/play , @okikio/sharedworker がesbuild だけでなくmonaco-editors editor and typescript 労働者p >
< H >

制限
<高橋潤子>
主な制限@okikio/sharedworker それはサポートされていないブラウザでSharedWorker , 使えない@okikio/sharedworker クロスタブとして、コミュニケーションツール.しかし、他のすべてのために、それはパリティと仕様を特徴とします.p >
< H >

結論
<高橋潤子>
あなたはそれを使いますか?以下を教えてください.p >
<川合>https://twitter.com/okikio_dev/status/1449083583684124679」
< div . class ="Lagagchen - nal twitter - tweetchen - main main "data url ="https://twitter.com/okikio_dev/status/1449083583684124679」
< div class ="Lagagchen - nor - twitter - tweettle - nor - header "

< div class = "Lagagchen - nor - twitter - tweetchen - dieフルネーム"
大木往生
< div >
< div class ="Lagagchen - nor - twitter - tweettle - en - user name "
@ okikiooundデジ
< div >
< div . class ="Lagagchen - nal twitter- tweettle - nor - twitter-ロゴ"

< div >
< div >
< div class > "Lagagchen - nor - twitter - tweettle - die body "
シェアワーカーポリフィルをお探しですか?パッケージを持っていますか現在、RPLで使用中です.github.com/snowpackjs/ast…
bundle.js.org <チェック・イット・アウトnpmjs.com/@okikio/shared…
< br/>
< div >
< div class > "Lagagchen - nor - twitter- tweettle - her - date "
午後18時43分- 2021年10月15日
< div >
< div class > "Lagagchen - nor - twitter - tweettle - se action "
< div >
< div >
<川合>
< hr/>
< P >Image からTengyart on Unsplash .

Reference

この問題について(@ okikio/シェアワーカー、すべてのブラウザーの株式会社労働者), 我々は、より多くの情報をここで見つけました https://dev.to/okikio/okikiosharedworker-sharedworkers-on-all-browsers-1ia0

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol