from electron 2 web

インターネットのリソースを無駄遣いして検索におけるUXを下げてごめんなさい

圧倒的文章力のNASAでゴミみたいなチラ裏のようなメモを量産してしまい全ての"Web開発者"にごめんなさい

ServiceWorkerを知らない人が翻訳をしてしまった話~技術編~

完全に初心者の状態からの勉強ログです。

技術的な解説

ServiceWorkerはJSworkerの一つ。そのためDOMへのアクセスが不可。元のページとはpostMassage経由でアクセス可能。
postMassageはXHRみたいなやつ。

つまり完全に外部との通信

JSworkerなので自分自身のスレを持ってる。

Service Worker はプログラム可能なネットワークプロキシです。ページからのネットワークリクエストをコントロールできます。

???
プロキシに使えるのは知ってる。

ServiceWorkerは使用していない間は終了するため連続的(恒久的)なデータを扱うにはindexedDBとか使うと良い。

ServiceWorkerはwebページとは全く違うプロセスをする。 まずJSのdocument.navigetor.serviceWorkerオブジェクトを使う。
serviceWorker.registarでそのページ(ドメインなのか?)のServiceWorkerを登録。

Service Worker を使うと接続へのハイジャック、改ざん、フィルタリングができてしまいます。とても強力です。

ServiceWoerkerはHTTPS環境とlocalhostのみで使用できる。

Service Worker のスコープが origin 全体ということです。つまり、この Service Worker はこのドメイン下ですべての fetch イベントを受け取ります。

ServiceWorkerはプッシュ通知が出来る? さらにウェブソケみたいな使い方もできる????

謎すぎィ!

個人的には3つのアプローチがあると思う。

  • セキュリティ的な使い方(mitm)
  • ウェブソケ&notification的な使い方
  • オフラインキャッシュ

f:id:lv7777:20151227121935p:plain

Service Worker Primer (nhiroki@) - Google スライド

良さ。上記の疑問が少しずつわかってきた。 ブラウザ内HTTPプロキシって言葉がホントに的を得ている。

  • そのページ内のhttpイベントを監視できる。
  • 一度インストールすればローカルで動く。
  • ページを開かなくても実行できる

fetchイベントは登録されたページがhttpイベントを発行する時にdispatchする

フロントのfetchとサビ残ワーカーのfetch

なんかレシピとかクックブックとか大量出てきた。

P.S. ServiceWorker Cookbookをcookbookと呼んでる。

serviceworke.rsのAPIアナライシスの全体図

fetchはブラウザ側のfetchとサビ残fetch(ry 複雑すぎィ!

index.jsがページ(つまり今貴女が見ている普通のjs) service-worker.jsがServiceWorker server.jsがサーバー側(node.js)

インデックスjsがsw.jsを登録 それと同時に(非同期に(イベント読んでないからよくわからんけど多分ServiceWorkerが登録終わったら発火するんだと思う。))indexjsがapi/quotationsにfetch

sw.jsがfetchでリクをぶんどる。fetchを'report/logs'に偽装。ここのfetchはまずonfetch(サビ残fetch)でぶんどってきてそのあとブラウザfetchをsw.js内で使っている。返り値はPromise。 (???もしかしてログreport/logsを送信した後通常のurlもなげてる?)

report/logs

return fetch(reports/logs, { method: 'POST', body: JSON.stringify(data), headers: { 'content-type': 'application/json' } })

//鯖ではリクエストしたjsonが配列に格納され、レスポンスはリクエストと全く同じ

.then(returnRequest, returnRequest); //中身はreturn Promise.resolve(request);

.then(fetch) //は???(多分動作としては元のページのリクエストを投げてるんだと思うけど) こんなときこそgithubや→投げた もしそうだと仮定するとその後api/quotaationにgetをServiceWorkerが投げる

help my code reading!!! · Issue #184 · mozilla/serviceworker-cookbook · GitHub

indexjsでボタンがsubmitされるとpostでapi/quotationに投げる この時もlogをsw.jsが投げる

鯖はquotation(デフォルトでロードされる奴)配列に追加

https://serviceworke.rs/api-analytics_service-worker_doc.html

Dependency Injection 依存注入

ServiceWorker Cookbook

上級編むずい。

  • クライアント側

actual-controller.js,bootstrap.js

actual-dialogs.js、mock-dialogs.js

あれ?SWってwindowオブジェクト使えたっけな?使えない希ガス。きっと"こっち"側だな

  • SW

injector.js

production-sw.js,test-sw.js ブートストラップ.jsから最初に呼ばれるSW

  • 謎 default-mapping.js(swっぽい)

The file default-mapping.js contains the specification about how abstract resources are mapped to concrete ones. default-mapping.jsファイルには詳細(抽象的なものを具体的にする)が含まれます。

流れ

bootstrap.js->productionjsの登録

bootstrapjsのregisterは navigator.serviceWorker.oncontrollerchange のなかではないので注意

window.onhashchange...location.hash(http://example.com#hashのhashの部分)

window.onhashchange - Web API インターフェイス | MDN

window.location - Web API インターフェイス | MDN

importScripts('injector.js'); importScripts('default-mapping.js');

importspricts()を使いリソースをSWが読み込むことができます。 www.html5rocks.com

下のボタンをクリックすると?

urlにハッシュがつくー>bootstrapのhashevent発火

上のhlefは?

こっちもハッシュ