17

は、私は、Web労働者に関するいくつかの質問を持ってWebワーカーで何が使えますか?

  • 労働者は、ストレージへのアクセスを持っていますか?など。 indexedDB/webSQLと作業者が開始したファイルのローカルストレージ?

  • ファイルをワーカーに含めるにはどうすればよいですか?私はfunctions.jsを持っていますが、これはすばらしいアプリ関連の機能をたくさん持っていて、実際には2つの異なる場所に自分の機能を更新するためにファイルの内容をコピーするだけです。

  • DOMをワーカーに含めることはできますか?のように、テンポラリオーディオタグにオーディオファイルをロードして、再生可能かどうかを確認します。親ページのDOMにはアクセスしませんが、ワーカー自体にはDOMがあります。

  • 質問のいずれかの回答が否定的な場合は、どのように手動で行うことができますか?

これはクロームアプリのためのものです。最新のChrome APIにアクセスできるため、下位互換性に気を付ける必要はありません。

答えて

9

ウェブワーカーからのいかなる種類のDOMアクセスもありません。すべてのDOM操作は、メインのJSスレッドから行う必要があります。 Webワーカーは、メッセージングを介してメインスレッドとしか通信できません。

このprevious SO questionは、ウェブワーカーがGoogle検索で簡単に見つかったローカルストレージにアクセスできないことを示しています。

同じスレッドには、Webワーカーがアクセスできるもののリストがあります。

「作業者にファイルを含める」という意味は不明です。スクリプトをインポートできます。私は他に何を求めているのか分かりません。オーディオファイルを手助けする場合は、ajax呼び出しを使用してデータを取得できます。

これは私には聞こえますが、あなたはウェブワーカーと何ができるのかできないのかについての基本的な研究(ウェブ上に書かれたTONがあります)その知識を組み込んだ質問。

ウェブワーカーには、できること以上のことをさせるためのハッキングはありません。

メインのJSスレッドで作業を行うことができます。多くの作業が必要で、メインUIをできるだけ反応的に保つ必要がある場合は、setTimeoutを使用して少しチャンクで行うことができます。これは、非常に古いデザインパターンで、スレッドが利用可能になったり使用しやすくなったりする前の状態に戻っています。いくつかの永続オブジェクトに格納されている状態で少しずつ作業を行うことができるように作業を設計し、少量の作業を繰り返してから戻ってくるだけで、次のタイマーティックで次の作業を拾うことができます。

+0

でも、音声タグにmp3を読み込むには時間がかかります。労働者はその可能性のある解決策でしたが、DOMを持っていませんでした。だから、どのように私はファイルの期間を読むことをお勧めしますか?包含についてはどうですか?必然的にハック場合:O – Achshar

+0

私は私の答えにさらに追加しました。 – jfriend00

+0

よくincludeから私は、 '私は' function.jsを持っていることを意味しました。これは、アプリケーションの関連性の高い機能をたくさん持っていて、ファイルの内容をワーカーにコピーするのは意味がありません([1]で説明したように)私は必要なものです、ありがとう! 'hack'からは、ファイルの内容を読み込んでevalに追加するようなことがありました。 (はい、私はそれが悪いと知っているが、それは理由のためにハックされていただろう)それは私がimportscriptsについて読むまでだった。申し訳ありませんが、私の質問が不満を感じる場合は、私は労働者に新しいです。:O – Achshar

3

javascriptライブラリを読み込むことができます。次の例を参照してください。

<body> 
    <button>Start</button> 
    <div id="output"></div> 
    <script id="worker_1" type="text/js-worker"> 
     importScripts(base_url + '/worker_lib2.js'); 

     function run(event) { 
      var msg = event.data; 
      this.postMessage({ answer: hello(event.data.name)}); 
     } 

     this.addEventListener('message', run, false); 
    </script> 

    <script> 
     var base_url = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, ''); 
     var array = ['var base_url = "' + base_url + '";' + $('#worker_1').html()]; 
     var blob = new Blob(array, {type: "text/javascript"}); 

     $('button').click(function() { 
      var url = window.URL.createObjectURL(blob); 
      console.log(url); 
      var worker = new Worker(url); 
      worker.addEventListener('message', function(event) { 
       $('#output').html(event.data.answer); 
      }, false); 
      worker.postMessage({ 
       name: 'Steve' 
      }); 
     }); 
    </script> 
</body> 

hello関数を含むworker_lib2.jsライブラリを使用します。

function hello(msg) { 
    return 'Hello... ' + msg; 
} 
関連する問題