ServiceWorkerとのやり取りにMessageChannelを使う - console.lealog();
何を今さらって感じですが・・。 ぱっと思い出せなくて調べたので、忘れないようにメモっとく。 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
MessageChannelを使わずにService WorkerとpostMessageをしよう - 知見（・・）！
Service Workerのテストを書こうとしてメッセージのやりとりにMessageChannelを使おうとしていたところ、同僚氏からこんなことを教えてもらったので備忘録代わりにメモ。 いくつか方法があるから分かりにくいですよね。ExtendableMessageEvent.source を知らずに、わざわざ別途 MessagePort を渡して通信してるのをたまに見る気がする— nhiroki (@nhiroki_) November 8, 2018 まさにコレだった・・・・ page.html <script> self.onload = async () => { const controller = navigator.serviceWorker.controller; if (!controller) { console.log('no controller.'); conso
Service Workerの基本とそれを使ってできること - function
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、はじめの一歩 第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 のライフサイクル | Articles | web.dev
サービス ワーカーのライフサイクルは、最も複雑な部分です。何をしようとしているのか、どのようなメリットがあるのかわからないと、AI が自分と戦っているように感じられることがあります。仕組みを理解すれば、ウェブとネイティブのパターンの長所を組み合わせて、シームレスで邪魔にならないアップデートをユーザーに提供できます。 詳細な説明ですが、各セクションの冒頭にある箇条書きに、知っておくべきことがほとんど記載されています。 インテント このライフサイクルの目的は次のとおりです。 オフラインファーストを可能にする。 現在のサービス ワーカーを中断することなく、新しいサービス ワーカーが準備できるようにします。 スコープ内のページが、全体で同じ Service Worker によって制御されている（または Service Worker が使用されていない）ことを確認します。 一度に実行されるサイトのバ
Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
Service Worker入門〜導入方法から事例紹介まで〜@オトナのプログラミング勉強会 - Qiita
はじめに 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におけるキャッシュの更新方法
PWAで一番厄介な問題と言えばキャッシュではないでしょうか。開発中などで、キャッシュを更新したい時にできなかったり、キャッシュを読み込んでしまって修正が反映されずにバグ解決に時間を取られるかも知れません。 そこでちょっとしたTipsを紹介します。 Service Worker登録時の工夫 それは registration.onupdatefound を仕込んでおくということです。このメソッドはService Workerが更新されているかどうかを検知してくれます。もし更新されている場合は、updateメソッドを使って更新できます。 This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To
「Service Workerってなんだっけ？」のおさらい - Qiita
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を使って何ができたっけ？(できるんだろう?) という方の理解
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
