何を今さらって感じですが・・。 ぱっと思い出せなくて調べたので、忘れないようにメモっとく。 Browser → ServiceWorker これは割と簡単で、`navigator.serviceWorker.controller`に生えてる`postMessage()`を使えばいい。 // Browser (async function main() { // もちろん前もって登録しておいて await navigator.serviceWorker.register('./sw.js'); const ctrl = navigator.serviceWorker.controller; ctrl.postMessage({ type: 'data', payload: { x: 1 }}); }()); こうやって送って、受け取り側はこう。 // ServiceWorker self.a
Service Workerのテストを書こうとしてメッセージのやりとりにMessageChannelを使おうとしていたところ、同僚氏からこんなことを教えてもらったので備忘録代わりにメモ。 いくつか方法があるから分かりにくいですよね。ExtendableMessageEvent.source を知らずに、わざわざ別途 MessagePort を渡して通信してるのをたまに見る気がする— nhiroki (@nhiroki_) November 8, 2018 まさにコレだった・・・・ page.html <script> self. () => { const controller = navigator.serviceWorker.controller; if (!controller) { console.log('no controller.'); conso
Service Workerとは ブラウザが Web ページとは別にバックグラウンドで実行するスクリプト オフラインのアプリを実現・サポートするために作られたものです ちなみに、ブラウザの対応状況はこんな感じ http://caniuse.com/#search=service%20workers 特徴 DOM にアクセスできない DOM を操作したい場合は、Service Worker がコントロールしているページ(js)と postMessage でメッセージのやり取りをして行う リクエストをプロキシすることが可能 Service Worker はブラウザが必要に応じて起動・終了するので、変数の値を保持しておけない Cache、IndexedDB 等で値を保存して、必要になった時に取り出すようにする Promise を多用する https か localhost 上でしか動作しない ラ
Service Worker、はじめの一歩 第1回 Service Workerとは Service Workerは、Webページの裏側で働く独立したJavaScript環境です。今回はその概要と、どのようなライフサイクルを持っているのかを解説します。全体像が把握しやすくなるはずです。 はじめに このシリーズで扱うService Workerとは、Webページの裏側で働く独立したJavaScript環境です。Service Workerを利用すると、Webページのオフライン対応をはじめ、これまでのWebではできなかった機能が実現できます。 Service Workerは2016年10月現在、Chrome、Firefox、Operaの各ブラウザがすでにサポートをしています。Microsoft Edgeは開発中、Safariは検討を進めています。それぞれのブラウザの実装状況はIs Servic
Service Worker のライフサイクル コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Service Worker のライフサイクルは最も複雑な部分です。攻撃者の目的やメリットがわからなければ、戦いのように感じられます。しかし、その仕組みを理解すれば、ウェブ パターンとネイティブ パターンの長所を組み合わせた、シームレスで目立たないアップデートをユーザーに届けることができます。 ここでは深く掘り下げますが、知っておくべきことの大半は、各セクションの冒頭の箇条書きに記載されています。 インテント ライフサイクルの目的は次のとおりです。 オフライン ファーストを可能にする。 現在の Service Worker を中断することなく、新しい Service Worker が準備を完了できるようにします。 全体を通して、スコープ内のページが同じ Serv
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
はじめに Service Workerって聞いたことあります？ Service Workerとは Webページとは別にバックグランドで実行するスクリプト DOMに直接アクセスできない ブラウザを開いていなくても動作可能 プログラム可能なネットワークプロキシとして動作可能 HTTPS必須（またはlocalhost） どんな時に使える？ Cache APIやPush API、Fetch APIと一緒に使うとこで下記のようなことが可能になる キャッシュ・アセットの制御 プッシュ通知 オフライン対応 PWA対応 利用事例（1） Webでプッシュ通知するサービスを個人開発で作ってみた＋ServiceWorkerPushAPIの実装方法まとめ Service Worker + Push APIでプッシュ通知のSaasを作った話 実装についても説明してある 利用事例（2） Mercari Web版 に
PWAで一番厄介な問題と言えばキャッシュではないでしょうか。開発中などで、キャッシュを更新したい時にできなかったり、キャッシュを読み込んでしまって修正が反映されずにバグ解決に時間を取られるかも知れません。 そこでちょっとしたTipsを紹介します。 Service Worker登録時の工夫 それは registration.onupdatefound を仕込んでおくということです。このメソッドはService Workerが更新されているかどうかを検知してくれます。もし更新されている場合は、updateメソッドを使って更新できます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, o
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Service Workerを無効化にしようという記事が話題になっておりますが、 そもそもService Workerってなんだっけ？ というおさらいをしようというのが、今回の趣旨になります。 記事のスコープ 今回の記事は、概要さらっとおさらいすることを目的としたので、技術的な話や設計については省いております。 特にCacheのことについて掘り下げて調べました。 （cacheの設計や実装については後ほど詳細をまとめた記事を書く予定です。) Service Workerを使って何ができたっけ？(できるんだろう?) という方の理解
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く