Service Worker の claim()
2016/04/26 : ready イベントの使い方にミスがあったため修正しました。Jxck さんに指摘していただきました。ありがとうございます。 2016/04/26 : claim() の挙動は Jxck さんの screen cast によるチュートリアルが分かりやすいです (中級者向け Service Worker Tutorial - blog.jxck.io)。 Service Worker のスコープとページコントロールについて解説する記事のその 2 です。既に Service Worker の基本について理解していて、かつ、前回の記事を読んでいることを前提にしています。今回は「まだコントロールされていないページをコントロール状態にする claim()」について紹介します。claim() は Chrome ではバージョン 42 から使用することができます (リリースノート)
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のコントロール
メッセージングによるService Workerのコントロール Service Workerでハンドルするリソースは、Service Workerのスクリプトに静的に記述しているケースが多い。Service Workerでやっているアレコレをメッセージングで動的にできないか試行錯誤したログ。 よくある?キャッシュパターン チュートリアル等でもよく見かける、Service Workerのインストール時に指定のリソースをキャッシュしているパターン。 const CACHE_KEY = 'cache-key'; const CACHE_LIST = [ 'index.html', 'app.js', 'app.css' ]; self.addEventListener('install', e => { // CACHE_KEYをキーにとるCacheオブジェクトを開いて // CACHE_LIS
ServiceWorkerをproductionで使ってる話 - 橋本商会
https://gyazo.com/343caf0f14cc565ce656a43e9a02aad2https://gyazo.com/471d8cab15bf364febe29e6f2cafb5ad
ServiceWorker as a Service, または Universal ServiceWorker という発想 - mizchi's blog
ServiceWorker とは本質的に リクエスト＆レスポンスモデルであるので、それをサーバーサイドで実装で一種のサーバーロジックとして動かしてしまって良いはずだ ー という発想に目から鱗だったので、ちょっと考えてみたいと思う。 www.publickey1.jp ここで試せる。 https://cloudflareworkers.com/#a9bc9ef6b4248289c71518581df30bc7:https://tutorial.cloudflareworkers.com Cloudflare はCDN業者なので、 それに特化して Service Worker as a Service みたいな表現はしていないが、実態としてはサーバーサイド ServiceWorker だ。Fastly では varnish のミドルウェアなどでキャッシュ破棄設定のロジックやリダイレクトを書いて
Google Codelabs
Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS. Codelab tools on GitHubnorth_east �� V 0~ � V
Cross-origin Service Workers: Experimenting with Foreign Fetch | Web Updates - Google Developers
Background Service workers give web developers the ability to respond to network requests made by their web applications, allowing them to continue working even while offline, fight lie-fi, and implement complex cache interactions like stale-while-revalidate. But service workers have historically been tied to a specific origin—as the owner of a web app, it's your responsibility to write and deploy
Is service worker ready?
ChromeSupported FirefoxSupported OperaSupported Samsung InternetSupported SafariSupported EdgeSupported Chrome: Shipped.Firefox: Shipped.Samsung Internet: Shipped. Based on Chromium 44.2403 with some additions and changes. (See "Service Worker" section.)Safari: Shipped.Edge: Shipped.Support does not include iOS versions of third-party browsers on that platform (see Safari support). ChromeSupported
Instant Loading Web Apps with an Application Shell Architecture | Blog | Chrome for Developers
An application shell is the minimal HTML, CSS, and JavaScript powering a user interface. The application shell should: load fast be cached dynamically display content An application shell is the secret to reliably good performance. Think of your app's shell like the bundle of code you'd publish to an app store if you were building a native app. It's the load needed to get off the ground, but might
Service Worker の claim() について
Service Worker の claim() について Apr 18, 2015 Programming Service Worker のスコープとページコントロールについて解説する記事のその 2 です。既に Service Worker の基本について理解していて、かつ、前回の記事を読んでいることを前提にしています。今回は「まだコントロールされていないページをコントロール状態にする claim()」について紹介します。claim() は Chrome ではバージョン 42 から使用することができます (リリースノート)。 ページコントロールが始まるタイミング (前回の復習) 前回の記事で「Service Worker がページをコントロールするかどうかは、そのページを開いた時に判断される」と説明しました。次のコードは前回の記事からのコピーで、ページを開いた後に登録された Servic
Service Worker 開発するときのデバッグ方法 - Qiita
Service Worker Hackathon で教えてもらったのでまとめておく。 2015/04/05 時点での記事。 前提 Chrome Canary を入れておく(今のところ、これが無いと話にならない) localhost か https な環境を使う でも、Dropbox public link な環境はダメ Service Worker Inspector を有効にする Chrome Canary で以下を設定。なお、43.0.2350.0 canary (64-bit) で確認。そのうち設定箇所や方法が変わったり、stable でも使えるようになるかもしれない。 chrome://flags にアクセスし、デベロッパーツールのテストを有効にする #enable-devtools-experiments の項目を有効にする Chrome 再起動 デベロッパーツールを開き Set
[Service Worker] プッシュ通知の使い方
Push Notifications for the web Eiji Kitamura | April 4th 2015
![[Service Worker] プッシュ通知の使い方](https://cdn-ak-scissors.b.st-hatena.com/image/square/38ad78f99ff3a401d80f3b5bde89795d5e793102/height=288;version=1;width=512/https%3A%2F%2Flh7-us.googleusercontent.com%2Fdocs%2FAHkbwyKTQVRil0t1BERsP7YK5zi0Xa7A19BGQhK7UZW1GDQ-XaFBOJNr4sVa23wuW-tmsUeyZjktUasm-0KJuyVPPTLRmNOKciF-kDhKKJJMqbMdy-c%3Dw1200-h630-p)
Service Worker Primer (nhiroki@)
Service Worker Primer Hiroki Nakagawa (nhiroki@chromium.org) 2015/04/04
Simple Push Demo
Send a Push via XHR This Browsers SubscriptionBelow is your current subscription. Supported Content EncodingsA change to the web push spec moves browsers from "aesgcm" to "aes128gcm" content encoding. To determine which is supported the current browser you can view PushManager.supportedContentEncodings. Below is the list of supported encodings. CURL CommandCopy and paste the following CURL command
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - 1000ch/service-worker-demo: Service Worker demo
GitHub - 1000ch/service-worker-events: Service Worker Events
GitHub - GoogleChrome/workbox: 📦 Workbox: JavaScript libraries for Progressive Web Apps
GitHub - PolymerElements/platinum-sw: Service Worker Polymer element
https://github.com/kuu/the-offline-cookbook-ja/blob/master/ja.md
Trained To Thrill