中級者向け Service Worker Tutorial | blog.jxck.io
Intro Service Worker の初心者向けのチュートリアルや、使ってみた系のエントリも増えてきました。 しかし、 Service Worker は通常のブラウザ用 JS の開発と少し経路が違い、慣れるまで開発やデバッグもなかなか難しいと思います。 そこで特に難しい部分、そして分かっていないと実際にデプロイした際に難しいと思う部分について、実際に動きを確認しながら解説したいと思います。 なお、 Service Worker の基本的な概念などについては、他のチュートリアルなどを見て理解している前提で進めます。 思いつきで撮ったので色々ミスも有ります、また Chrome Dev Tools の UI はどうせ変わるのでそのつもりで見てください。 TODO になっている動画は、そのうち撮って追加します。 List claim controllerchange updatefound
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
Chrome Tech Talk Night #8 (2015/07/16 19:30〜)
2015 年 7 月 16 日（木）、 Chrome Tech Talk Night #8 を開催します。今回は Google の Developer Relations チームのメンバーが Google I/O の再演を中心に、Polymer や Service Worker、Material Design Lite などのホットな話題についてお話します。 なお、今回のイベントでは通訳は付きません。すべて英語での講演となることを予めご了承の上ご参加下さい。 イベントの詳細についてはこちらをご覧ください。 http://googledevjp.blogspot.com/2015/07/chrome-tech-talk-night-8.html ライブストリームはこちらのURLから配信する予定です。 https://plus.google.com/events/cnmigaqndm0v3h7
Service Worker で作る 最新モバイル ウェブ エクスペリエンス - Google Developers Summit まとめ
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Service Worker で進化する Cache - GMOインターネットグループ グループ研究開発本部
フロントエンド大好き D.M. です。最近ようやく Chrome で使えるようになってきた Service Worker について紹介します。 Service Worker とは？ Service Worker はブラウザ内でバックグラウンドで動作する Web プロキシです。これまでブラウザが内部でやっていたことをもっと低レベルなAPIで操作できるようになります。 基本情報を要点だけ書いていきます。 できること ・リクエストを横取りできる。 ・リクエスト：レスポンスをキー：バリューでキャッシュできる。 ・オフラインで動作できる。 ・サーバから PUSH 通知を受信できる。 ・バックグラウンドでコンテンツを同期できる。 できないこと ・ HTTP 通信ができない。（通信を横取する仕組みのためHTTPS限定。HTTPの場合、通信を他人にハイジャックされると改ざんされてしまうリスクがある。） ・
ServiceWorker のスコープとページコントロールについて
Chrome 40 から ServiceWorker が使えるようになりました。Opera もバージョン 27 から対応し、Firefox でも現在実装が進められています (参考「Is ServiceWorker ready?」)。ServiceWorker はページのライフタイムとは独立した JavaScript の実行コンテキストを提供する機能で、ページからのリクエストをフックしてキャッシュからレスポンスを返したり、サーバからのプッシュイベントを受けてそれをページに通知するといったことが可能になります。 ServiceWorker のコンセプトや基本的な使い方、ユースケースなどは下記のページが参考になります。 Service worker が拓く mobile web の新しいかたち Service Worker の紹介: Service Worker の使い方 - HTML5 Ro
ServiceWorkerでモックサーバーを作る - Qiita
実験環境は Chrome Canary 43.0.2314.0 だけど動かしてる分は現時点の安定版(40)でも動くはず やりたいこと http://localhost:3000/api/* へのリクエストを全部serviceworkerに任せたい。 先行実装として Jxck/response-injection がある。 やり方 sw.js(になるsw.coffee) console.log 'worker started' self.onfetch = (event) -> console.log 'onfetch', event.request.url if event.request.url.indexOf(location.origin+'/api') > -1 event.respondWith new Response '{"foo": "bar"}', status: 200
Service worker が拓く mobile web の新しいかたち
1. ServiceWorker が拓く Mobile Web の新しいかたち HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org ServiceWorker が拓く Mobile Web の新しいかたち 2. 自己紹介： Kinuko Yasuda @kinu / kinuko@chromium.org Chrome エンジニア 5年目くらい ￭ ストレージ、ネットワーク、Worker系など裏方っぽい API をよくいじっています ￭ File/Blob, FileSystem, Quota, XHR, Web Workers, ServiceWorker などなど ￭ 2013年秋頃か
Introduction to Service Worker
2015/2/21に開催されたFrontrend Conferenceの「Introduction to Service Worker」のセッションの資料です。
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Google I/O 2014 ── ServiceWorker でネイティブアプリとの差を縮めよう
Google I/O 2014 ── ServiceWorker でネイティブアプリとの差を縮めよう 矢倉 眞隆（myakura） 今回お届けするのは、Jake Archibald氏とAlex Russell氏によるServiceWorkerのセッション「Appy Times with ServiceWorker – Bridging the gap between the web and apps」です。 Alex氏はService Workers仕様のEditorで、古くはDojoやChrome Frameに携わっています。TC39やW3CのTAGのメンバーとしても活動し、Extensible Web構想を推し進める一人です。 Jake氏はService Workers仕様の「ゴーストオーサー」だそうです。とても面白い人で、今回も彼のユーモアが炸裂、笑いに包まれた楽しいセッションとなり
Service Workerに関する仕様とか機能とか
2014.12.29Service Workerに関する仕様とか機能とか今巷で流行りのService Workerについて調べ物してたので、まとめたメモ。 Service Workerが解決してくれることService WorkerはHTML・CSS・JS・画像等などのリソースを、JavaScriptのAPIから命令的にコントロールすることを実現する。Webページのパフォーマンスに関する指標としてネットワークを介して得るリソースをキャッシュさせたりすることが効果的であることは今更改めて挙げないが、Service Workerによって保持されたリソースは、オフライン状態でも返却することが可能という凄さを持っている。つまり、更新性の低いコンテンツであればオフラインでも閲覧させることが可能ということ。 更新性のあるコンテンツでも、回線が不安定な時はローカルに変更を保持して、サーバーに対してデータ
slightlyoff/NavigationController · GitHub
Service workers are a new browser feature that provide event-driven scripts that run independently of web pages. Unlike other workers, service workers can be shut down at the end of events, note the lack of retained references from documents, and they have access to domain-wide events such as network fetches. Service workers also have scriptable caches. Along with the ability to respond to network
Fetch API 解説、または Web において "Fetch する" とは何か？ - Block Rockin’ Codes
Update [14/11/11]: Chromium での実装が M40 からあるそうなので、末尾に引用追記させていただきました。 [14/11/12]: この記事を書くにあたって、色々なかたにレビューや助言を頂いたのですが、謝辞などが一切抜けてました、本当にすいません。追記しました、ご協力頂いた方々本当にありがとうございました。 WHATGW Fetch Spec WHATWG のメンテナンスするドラフトに Fetch Spec が追加されました。 もうすでに日本語訳もあります、すばらしい。Fetch Standard 日本語訳 この仕様には二つのことが定義されています。 "Fetching": Fetch するとは何か? の定義 "Fetch API": fetch() の定義 後者の定義に基づく fetch() という DOM API の実装も始まっています。(詳細は後述) しかし
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Chrome 40 で今すぐ ServiceWorker を試す - Qiita
Chrome では、リリース 40 からごく一部で「マシな AppCache」とも言われている ServiceWorker がデフォルトで使えるようになります。ServiceWorker はオフライン API の1つとして紹介されていることが多いですが、実は 「Webの世界観を変える (かもしれない) 大注目API」の1つです！ ここでは、Chrome 40 で出来たての ServiceWorker をひと通り試す方法を書いてみたいと思います。 ServiceWorker とは? 詳しいことは最新スペック (Editor's Draft)やHTML5Rocks の記事を見てもらうとして、ものすごくざっくり書くと ServiceWorker とはバックグラウンドで実行される Javascript 環境のことで、 ブラウザ内で動くJavascriptで書いたネットワークプロキシ のように動作さ
Chrome40にservice workersがきた
Chrome 40になってService workersが来たらしい。デモを動かしてみたり自分で書いてみたりして紹介記事でも書こうかなと思っていたが、 +Hajime Morrita はRebuild.fmに出演して紹介してしまったし、ほかにもすでにいくらか紹介記事が出始めてきた（たとえばhttp://qiita.com/kinu/items/2abd61b4390f9bbaffc9）。賑やかしにと自分もスクリーンキャストの動画も撮ってみた。 ここではデモの補足として、Service workersってどんなものなのかをふんわり考えてみる。 Service workers とは って項目を書いたのだがこの説明が難しい……。新しいウェブのAPI、だけだとだからなにって感じ。Service workersはweb workersの一種なのだが、って説明しはじめると泥沼に嵌りそうだ。 Servi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - GoogleChromeLabs/application-shell: Service Worker Application Shell Architecture
Workbox Broadcast Cache Update | Workbox | Google Developers
GitHub - GoogleChromeLabs/sw-precache: [Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.![GitHub - GoogleChromeLabs/sw-precache: [Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.](https://cdn-ak-scissors.b.st-hatena.com/image/square/94ca82b7fdf316c3e24d365c92e41d492a84bb7f/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F438c83628a2b57eeae14084ae6d91821ed0a74b824e21abda9ee4bb00e7de5fc%2FGoogleChromeLabs%2Fsw-precache)
