Service Worker - Qiita
概要 Service Worker とは、バックグラウンドで動く JavaScript。オフラインで動くウェブアプリを作るために便利なイベントが定義されている。今まで Application Cache 等の宣言的なキャッシュ方法が提案されて来たが、なかなか全てのユースケースをカバーするのは難しいので、柔軟なキャッシュを実装するための低レベル API を提案してみたという事らしい。なので、実際には https://workboxjs.org/ 等のライブラリ経由で使う方が楽。 Service Worker の動作には HTTPS サーバか localhost で動くウェブサーバが必要。開発には Web Server for Chrome が便利。他の人に見せたい場合は Github pages や Amazon Cloud Front を使えば良い。 登録と削除 登録には、navigato
vue-pwa-plugin で Service Worker をカスタマイズする - Qiita
はじめに vue-cliにはPWAのプラグインがあってデフォルトでキャッシュなどの処理を行ってくれるServiceWorkerを作成するようになっています。しかし、WebPushなどの別の機能も利用したい、というときがありますよね。そうしたときに、ServiceWorkerをカスタマイズする方法を紹介します。 Vue.jsやvue-cli自体について詳しく知りたい方は、こちらの記事をおすすめします。 - Vue.js を vue-cli を使ってシンプルにはじめてみる 環境 vue: 2.5.16 vue/cli: 3.0.1 vue/cli-plugin-pwa: 3.0.1 インストール プロジェクトを作成したい場所で以下のコマンドを実行します。 $ npm install -g vue-cli $ vue create my-project ? Please pick a prese
「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える
Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの
Service Worker触ってみた - Qiita
この記事はGunosy Advent Calendar 2017の11日目の記事です。 昨日は@okataiさんのDDLを使って0クリックから始めるパーソナライズでした。 どーも広告技術部の@k_7016です。 普段はRails書いたりしてます。 皆さん、かなりちゃんと記事書いてて焦るところですが、空気読まずゆるふわやってみた系の記事書こうと思います。 最近話題のProgressive Web Appをやってみたいなと思いまして色々読んでたんですが範囲広くて爆死しそうになったのでとりあえず Service Woker 触ってみました。 やること Service Workerで 静的ファイルキャッシュ 動的リクエストキャッシュ ができたらゴール。 対象サンプルアプリ Reactでブログっぽいもの作ってfirebase に hosting しました。 この辺もやってみたいなーと思ってやってみた
Service Workerってなんなのよ (Service Workerのえほん) - Qiita
私 「ねぇ、Service Workerってあなた何者？」 Service Worker 「プログラム可能なネットワークプロキシです」 私 「.....(´Α｀lll)o0(ｲﾐﾌ)」 (この記事は元々英語で投稿した記事の翻訳版です。挿絵に入っているテキストが英語のままなのはご了承ください🙏) Service Workerってなんかカッコ良さそうだけど、実際問題なんなのかよくわからない ２０１５年７月、私はテキサス州オースティンで開催されたJavaScriptのカンファレンスに参加していた。ステージに立っていたのはJake Archibald、当時はなんかトイレの話ばっかりするおもしろイギリス人くらいにしか思ってなかったけれど、後々Service Workerのスペック策定に関わっているちょっとすごい人だと知る。 (なぜか)公衆トイレで発見したUXパターンについて話す傍ら、JakeはSe
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
The service worker lifecycle | Articles | web.dev
The service worker lifecycle Stay organized with collections Save and categorize content based on your preferences. The lifecycle of the service worker is its most complicated part. If you don't know what it's trying to do and what the benefits are, it can feel like it's fighting you. But once you know how it works, you can deliver seamless, unobtrusive updates to users, mixing the best of web and
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. This course is designed for those new to web performance, a
ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを作った際に、オフラインでも動くようにするために、HTML5の新しい技術Service Workerを使った。なお、下の動画でホーム画面からネイティブアプリっぽく起動しているのはWeb App Manifestのおかげである。 Service Worker Service Workerは、通常のページの環境とは別に、バックグラウンドで実行されるJavaScript実行環境で、ページからのネットワークリクエストを横取りしたり、ウェブサイトからのPush通知を受けとって表示するといった、今まではできなかった処理をすることができる。Push通知の方は、去年Facebookが使い始めたので有名になったが、今回はPush通知ではなく、ネットワークリクエストを横取りする機能を使ってオフライン対応をした。 ネットワ
Service Worker の update()
Service Worker の update() Jun 22, 2015 | tags : serviceworker Chromium に ServiceWorkerRegistration.update() を実装したのでその紹介。順調に行けばバージョン 45 から使用することができます (Canary ではもう使えます)。 [spec] Service Workers - update() [blink-dev] Intent-to-Ship Chromium Issue Service Worker は適当なタイミングでスクリプトのアップデートチェックが走ります。例えば Service Worker のコントロール下にあるページを開いたときにチェックします (Handle Fetch Algorithm 参照)。このアップデートチェックはスクリプトの Cache-Control
service workerを実際のRailsで開発しているサービスに導入してみよう - Qiita
「service worker」とは？ Chrome ソフトウェアエンジニアの@nhiroki_さんによると、 ページのバックグラウンドで動くイベント駆動の JavaScript 環境 （ゆえに “Service” Worker） とのこと。 大きくは現在は2つ特徴がある。 Cache機能 (オフライン環境でのアクセスを可能に) Push機能 (アプリと同様にリエンゲージメントを高める) 引用:Service Worker の紹介 Service Workerのライフサイクルは上記。 - 引用: Service Worker hackathon 2015 - introduction talk 1秒ってのは、人がシームレスに感じる(=違和感なくかなり心地よい)秒数だが、実際今のmobileでの1秒の内訳は上記にある通り、コネクション張ったり通信を発生させる部分で既に大枠を使っている・・・w
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 で prefetch - Block Rockin’ Codes
update 2015/3/31 @hirano_y_aa さんの指摘頂き訂正しました。 response.body の clone TextDecoder の利用 intro Service Worker の「オフライン以外」の利用第二弾です。 以前、 Service Worker で XHR のモック をしましたが、今回は Prefetch を実装してみようと思います。 prefetch とは 例えば /index.html が以下のような HTML だったとします。 <!DOCTYPE html> <meta charset="utf-8"> <title>title</title> <ul> <li><a href="1.html">1</a></li> <li><a href="2.html">1</a></li> <li><a href="3.html">1</a></li>
アプリを使わなくてもPush通知が来る！
3月9日に発表されたGoogle Chromeの最新ベータ版v42.0.2311.22でPush APIがサポートされニュースになりました。早速このPush APIをGoogle Chromeのサンプルを使って試してみたので、そのレビューを書きたいと思います。VASILYでインターンをしている茨木です。 3月9日に発表されたGoogle Chromeの最新ベータ版v42.0.2311.22でPush APIがサポートされニュースになりました。ブラウザからスマホにプッシュ通知が送れるというものです。 スマホ向けウェブサービスをやっている方ならみんな気になるこの機能、早速試してみました。かなりシンプルなので皆さんもぜひ触ってみてください。 以下のサンプルやサイトを参考にしました。 〇サイト http://updates.html5rocks.com/2015/03/push-not
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - bahmutov/express-service: Package ExpressJS server to run inside a ServiceWorker
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
REST API in ServiceWorker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
ServiceWorkerハッカソン ブラウザ上で動くパッケージマネージャ作った
