extends resessh

[RyoNkmr]

this extends #1

わかったこと

• ts組み込みの lib.dom lib.webworker はどっちもだめ

lib.dom

そもそもDOM用なので、self は当然 Window

lib.webworker

ServiceWorkerGlobalScope が定義されていて惜しいんだけど var self: WebworkerGlobalScope でこれは上書きできない

あと、

Window clients are represented by the more-specific WindowClient. You can get Client/WindowClient objects from methods such as Clients.matchAll() and Clients.get().

とか言ってるくせに直後に

interface Clients {
    // ...
    matchAll(options?: ClientQueryOptions): Promise<ReadonlyArray<Client>>;
    // ...
}

// https://github.com/Microsoft/TypeScript/blob/b8def16e92f609327971f07232757fa6c7d29a56/lib/lib.webworker.d.ts#L695

となっていて WindowClient が取れない。

shqld/types-serviceworker

microsoft/TypeScript#11781
SWの型付け困ってる人はいるもんで、既存の型定義を組み合わせて修正した人がいて

これは

• declare var self: ServiceWorkerGlobalScope; なので self 問題は解決する
• だけど、 Clients.matchAll の型がやっぱり Client しか取り出せないまま

なのでNG

というわけで

lib.webworker.d.ts を DefinitelyTyped から持ってきて、

• declare var self: <>; を消す（コンテキストによって使い分ける）
• Clients.matchAll の戻り値のtypeを Promise<ReadonlyArray<Client | WindowClient>>; に修正

これをおいて tsconfig.json で読み込ませて解決してます

---

WindowClient 周りの仕様は まだWorking Draftなので、揺れまくっててAPI側の変更に全然TS側の追いついていないだけかなーと思います
Stage進んだらDefinitelyTypedでも全然だいじょうぶになると思うのですが、それまでは自前で型管理するしかなさそう

[k-mats]

すいません、他の仕事に追われててこちらを見れてませんでした 🙇
@RyoNkmr @resessh yarnもTypeScriptも何も分かってなかったので勉強になりました、ありがとうございます 🙏

それで、動作確認してみたらService Workerが動きませんでした。
ServiceWorkeにはスコープの概念があって、Service Workerを /example/ 以下に置くと /example/ 以下のページでしか動作しないようです。

cf. https://developers.google.com/web/fundamentals/primers/service-workers/

今回の場合index.htmlの中でapp.jsを読み込んで、更にapp.jsの中で navigator.serviceWorker を参照しているので、つまりService Workerのjsファイルはプロジェクト直下に置く必要がある、ということだと思います。

一方でService Workerの型定義の問題を解決するためにはlib.webworker.d.tsを読み込み分ける必要があり、そのためにはtsconfig.jsonを分ける必要があるため、結果的にsw/以下をまるっとプロジェクト直下に移動させることになる...と理解しています。

（プロジェクト直下とbrowser/以下にtsconfig.jsonが2つあってプロジェクト直下の方はServiceWorker専用ということになるんですが、これはこれで問題ないんでしょうか 🤔）

sw/以下を全てプロジェクト直下に移動して、index.tsをsw.tsにリネームして、以下のように一部を書き換えて実行してみたら今度は動きました。

diff --git a/browser/app.ts b/browser/app.ts
index 21111b6..49ca475 100644
--- a/browser/app.ts
+++ b/browser/app.ts
@@ -1,5 +1,5 @@
 if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('sw/index.js').then(() => {
+    navigator.serviceWorker.register('sw.js').then(() => {
         console.log('Service worker registered!')
     }).catch(error => {
         console.log(error)

diff --git a/package.json b/package.json
index 1f27585..5146015 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "build": "npm-run-all -c --parallel build:**",
     "build:browser": "tsc -p browser/tsconfig.json",
-    "build:sw": "tsc -p sw/tsconfig.json",
+    "build:sw": "tsc -p tsconfig.json",
     "start": "http-server",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

[k-mats]

あとlib.webworker.d.tsなんですが、これってWeb Worker用の型定義ファイルですよね？
Web WorkerとService Workerって別物だと思うんですが...と思ったらどちらもWorkerの一種なんですね
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API