SlideShare uma empresa Scribd logo
1 de 19
Baixar para ler offline
Service Worker を知る
Arcana meetup #53 2019/08/26
r.kashiwagi
Service Worker の基本
Webページの裏側で動く独立したJavaScript
環境
画像引用元
https://qiita.com/y_fujieda/items/f9e765ac9d
89ba241154
Service Worker のできること
•
ロ
カ
ル
プ
ロ
キ
シ
•
リ
ク
エ
ス
ト
に
加
工
し
た
り
で
き
る
•
オ
フ
ラ
イ
ン
キ
シ
•
オ
フ
ラ
イ
ン
時
の
使
用
が
可
能
•
現
時
点
で
は
一
番
恩
恵
を
受
け
ら
れ
る
の
が
コ
レ
•
プ
シ
通
知
•
ア
プ
リ
を
閉
じ
て
い
て
も
プ
シ
通
知
を
受
け
ら
れ
る
•
賛
否
両
論
で
す
が
•
バ
ク
グ
ラ
ウ
ン
ド
同
期
•
ジ
オ
フ
ン
シ
ン
グ
(
未
実
装
)
引
用
https://qiita.com/poster-
keisuke/items/
00
05
6
b
8
d
5
d
62
75
afdb
1
a
ひととおり知っていただけたので
サービス
システム
ここ !!
本日は SW のオフラインキャッシュ
について
オフラインキャッシュの経緯
•
今
ま
で
有
線
で
イ
ン
タ
ネ
ト
に
接
続
し
て
い
て
気
に
な
ら
な
か
た
け
ど
Wi-Fi
環
境
に
し
て
み
た
ら
読
み
込
み
に
時
間
か
か
る
ね
•
一
回
読
み
込
ん
だ
ら
ブ
ラ
ウ
ザ
で
キ
シ
し
て
く
れ
る
て
思
て
い
た
け
ど
都
度
取
て
き
て
る
ぽ
い
ね
•
サ
イ
ネ
ジ
の
画
像
や
動
画
を
毎
回
CF
に
リ
ク
エ
ス
ト
す
る
と
サ
バ
代
が
か
さ
む
よ
ね•
プ
リ
ダ
ウ
ン
ロ
ド
し
て
そ
れ
を
表
示
で
き
な
い
?
•
サ
ビ
ス
ワ
カ
導
入
し
ま
す
か
•
結
果
的
に
オ
フ
ラ
イ
ン
で
も
動
く
よ
ね
•
わ
い
や
た
キャッシュ します!
ブラウザ(サイネージ) サーバー(CF)
SW
SWのキャッシュ
オンライン
差異があれば取得
SWを導入した結果
キャッシュすることに成功し
ました。
キャッシュすることに成功し
ました。
無事実装は
中間リリースに間に合いました。
画像はイメージです
が、しかし問題発生
PCではキャッシュできたのですが、
サイネージではキャッシュすることができない
WHY?
#arcana-pl-
signage
引用
Google Developersの情報 [*2] によると、一般的に
Chrome ブラウザでは、アプリは空きディスク領
域の最大 6% まで使用できる仕様になっているよ
うです。(Chromium ベースなので Opera も同様
かと思います)
[*2]
https://developers.google.com/web/fundamentals/instan
t-and-offline/web-storage/offline-for-pwa?hl=ja
サイネージとして採用したハードウェアに
制限があり、Service Worker の利用できる
キャッシュ領域が非常に少なかったため!
まとめ
•SW
を
導
入
し
た
の
が
中
間
リ
リ
ス
の
2
(
3
)
週
間
前
な
の
で
サ
ビ
ス
の
設
計
段
階
か
ら
検
討
し
た
か
た
ご
利
用
は
計
画
的
に
•
結
局
SW
は
使
用
し
て
い
な
い
•
知
て
い
る
と
い
う
こ
と
は
大
事
•
技
術
者
と
し
て
視
野
を
広
げ
て
い
き
た
い
•
ま
た
い
つ
か
SW
を
使
い
た
い

Mais conteúdo relacionado

Mais procurados

RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話yoshioka_cb
 
A-Frameで作ったギャラリーのお話
A-Frameで作ったギャラリーのお話A-Frameで作ったギャラリーのお話
A-Frameで作ったギャラリーのお話KatsuyaENDOH
 
KUSANAGIユーザグループ東京 第1回勉強会 資料
KUSANAGIユーザグループ東京 第1回勉強会 資料KUSANAGIユーザグループ東京 第1回勉強会 資料
KUSANAGIユーザグループ東京 第1回勉強会 資料Sumito Tsukada
 
2017/09/02 CloudGaragere lease tour in okayama LT
2017/09/02 CloudGaragere lease tour in okayama LT2017/09/02 CloudGaragere lease tour in okayama LT
2017/09/02 CloudGaragere lease tour in okayama LTTakeshi Furusato
 
Cloud garage使って ECサイトの構築
Cloud garage使って ECサイトの構築Cloud garage使って ECサイトの構築
Cloud garage使って ECサイトの構築毅 佐藤
 
async / await の話
async / await の話async / await の話
async / await の話yoitakeda
 
AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話Kaoru Kitauchi
 
JAWS-UG四国クラウドお遍路2014
JAWS-UG四国クラウドお遍路2014JAWS-UG四国クラウドお遍路2014
JAWS-UG四国クラウドお遍路2014Shiraishi Masayuki
 
sensuとその周辺のはなし
sensuとその周辺のはなしsensuとその周辺のはなし
sensuとその周辺のはなしNobutoshi Ogata
 
OWASP_Kyushu_Local_Chapter_Meeting_7th
OWASP_Kyushu_Local_Chapter_Meeting_7th OWASP_Kyushu_Local_Chapter_Meeting_7th
OWASP_Kyushu_Local_Chapter_Meeting_7th ShuyaMotouchi1
 
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupJava + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupToshiaki Maki
 
そろそろSSH/Telnetを離れて自動化したい
そろそろSSH/Telnetを離れて自動化したいそろそろSSH/Telnetを離れて自動化したい
そろそろSSH/Telnetを離れて自動化したいnetopscoding
 
Ansible/Vagrantでアドテク環境を最速構築
Ansible/Vagrantでアドテク環境を最速構築Ansible/Vagrantでアドテク環境を最速構築
Ansible/Vagrantでアドテク環境を最速構築kaboccha
 
DevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJSDevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJSGo Tanaka
 

Mais procurados (17)

RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
 
A-Frameで作ったギャラリーのお話
A-Frameで作ったギャラリーのお話A-Frameで作ったギャラリーのお話
A-Frameで作ったギャラリーのお話
 
KUSANAGIユーザグループ東京 第1回勉強会 資料
KUSANAGIユーザグループ東京 第1回勉強会 資料KUSANAGIユーザグループ東京 第1回勉強会 資料
KUSANAGIユーザグループ東京 第1回勉強会 資料
 
2017/09/02 CloudGaragere lease tour in okayama LT
2017/09/02 CloudGaragere lease tour in okayama LT2017/09/02 CloudGaragere lease tour in okayama LT
2017/09/02 CloudGaragere lease tour in okayama LT
 
Cloud garage使って ECサイトの構築
Cloud garage使って ECサイトの構築Cloud garage使って ECサイトの構築
Cloud garage使って ECサイトの構築
 
async / await の話
async / await の話async / await の話
async / await の話
 
AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話
 
JAWS-UG四国クラウドお遍路2014
JAWS-UG四国クラウドお遍路2014JAWS-UG四国クラウドお遍路2014
JAWS-UG四国クラウドお遍路2014
 
Nursecall
NursecallNursecall
Nursecall
 
sensuとその周辺のはなし
sensuとその周辺のはなしsensuとその周辺のはなし
sensuとその周辺のはなし
 
OWASP_Kyushu_Local_Chapter_Meeting_7th
OWASP_Kyushu_Local_Chapter_Meeting_7th OWASP_Kyushu_Local_Chapter_Meeting_7th
OWASP_Kyushu_Local_Chapter_Meeting_7th
 
実戦Scala
実戦Scala実戦Scala
実戦Scala
 
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetupJava + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
 
そろそろSSH/Telnetを離れて自動化したい
そろそろSSH/Telnetを離れて自動化したいそろそろSSH/Telnetを離れて自動化したい
そろそろSSH/Telnetを離れて自動化したい
 
Night Hack LT
Night Hack LTNight Hack LT
Night Hack LT
 
Ansible/Vagrantでアドテク環境を最速構築
Ansible/Vagrantでアドテク環境を最速構築Ansible/Vagrantでアドテク環境を最速構築
Ansible/Vagrantでアドテク環境を最速構築
 
DevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJSDevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJS
 

Semelhante a Service Worker を知る

今日から始めるDigitalOcean
今日から始めるDigitalOcean今日から始めるDigitalOcean
今日から始めるDigitalOceanMasahito Zembutsu
 
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テストDevice Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト健一 辰濱
 
インフラエンジニアのお仕事 ~ daemontools から systemdに乗り換えた話 ~
インフラエンジニアのお仕事 ~ daemontools から systemdに乗り換えた話 ~インフラエンジニアのお仕事 ~ daemontools から systemdに乗り換えた話 ~
インフラエンジニアのお仕事 ~ daemontools から systemdに乗り換えた話 ~KLab Inc. / Tech
 
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~normalian
 
EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会Kentaro Ohkouchi
 
俺のZabbixがこんなに可愛いわけがない(おかわり)
俺のZabbixがこんなに可愛いわけがない(おかわり) 俺のZabbixがこんなに可愛いわけがない(おかわり)
俺のZabbixがこんなに可愛いわけがない(おかわり) Seiichiro Ishida
 
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことJavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことMayu Kimura
 
初心者がOpenIndianaで自宅サーバを作ったよって話
初心者がOpenIndianaで自宅サーバを作ったよって話初心者がOpenIndianaで自宅サーバを作ったよって話
初心者がOpenIndianaで自宅サーバを作ったよって話Masataka Tsukamoto
 
機械学習を用いたMackerelの異常検知機能について
機械学習を用いたMackerelの異常検知機能について機械学習を用いたMackerelの異常検知機能について
機械学習を用いたMackerelの異常検知機能についてsyou6162
 
Automation with SoftLayer and Zabbix
Automation with SoftLayer and ZabbixAutomation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbixsoftlayerjp
 
JAZUG 4周年総会 「トラブルから学ぶAzure世渡り術」
JAZUG 4周年総会 「トラブルから学ぶAzure世渡り術」JAZUG 4周年総会 「トラブルから学ぶAzure世渡り術」
JAZUG 4周年総会 「トラブルから学ぶAzure世渡り術」Yui Ashikaga
 
We Should Know About in this SocialNetwork Era 2011_1112
We Should Know About in this SocialNetwork Era 2011_1112We Should Know About in this SocialNetwork Era 2011_1112
We Should Know About in this SocialNetwork Era 2011_1112Masahito Zembutsu
 
20130118 movable type_seminar
20130118 movable type_seminar20130118 movable type_seminar
20130118 movable type_seminarSix Apart
 
さくらインターネットにおけるServerspec導入事例(DevOps勉強会 #3 Serverspecの巻)
さくらインターネットにおけるServerspec導入事例(DevOps勉強会 #3 Serverspecの巻)さくらインターネットにおけるServerspec導入事例(DevOps勉強会 #3 Serverspecの巻)
さくらインターネットにおけるServerspec導入事例(DevOps勉強会 #3 Serverspecの巻)さくらインターネット株式会社
 
T119_5年間の試行錯誤で進化したMVPVMパターン
T119_5年間の試行錯誤で進化したMVPVMパターンT119_5年間の試行錯誤で進化したMVPVMパターン
T119_5年間の試行錯誤で進化したMVPVMパターン伸男 伊藤
 
Serf / Consul 入門 ~仕事を楽しくしよう~
Serf / Consul 入門 ~仕事を楽しくしよう~Serf / Consul 入門 ~仕事を楽しくしよう~
Serf / Consul 入門 ~仕事を楽しくしよう~Masahito Zembutsu
 
ご注文は監視自動化ですか?
ご注文は監視自動化ですか?ご注文は監視自動化ですか?
ご注文は監視自動化ですか?Masahito Zembutsu
 
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用Tokuhiro Matsuno
 
OpenCV4Androidで画像処理アプリのススメ
OpenCV4Androidで画像処理アプリのススメOpenCV4Androidで画像処理アプリのススメ
OpenCV4Androidで画像処理アプリのススメMasaki Otsuki
 

Semelhante a Service Worker を知る (20)

今日から始めるDigitalOcean
今日から始めるDigitalOcean今日から始めるDigitalOcean
今日から始めるDigitalOcean
 
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テストDevice Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト
 
インフラエンジニアのお仕事 ~ daemontools から systemdに乗り換えた話 ~
インフラエンジニアのお仕事 ~ daemontools から systemdに乗り換えた話 ~インフラエンジニアのお仕事 ~ daemontools から systemdに乗り換えた話 ~
インフラエンジニアのお仕事 ~ daemontools から systemdに乗り換えた話 ~
 
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
 
EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会EC-CUBE API プラグイン勉強会
EC-CUBE API プラグイン勉強会
 
俺のZabbixがこんなに可愛いわけがない(おかわり)
俺のZabbixがこんなに可愛いわけがない(おかわり) 俺のZabbixがこんなに可愛いわけがない(おかわり)
俺のZabbixがこんなに可愛いわけがない(おかわり)
 
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなことJavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
 
初心者がOpenIndianaで自宅サーバを作ったよって話
初心者がOpenIndianaで自宅サーバを作ったよって話初心者がOpenIndianaで自宅サーバを作ったよって話
初心者がOpenIndianaで自宅サーバを作ったよって話
 
機械学習を用いたMackerelの異常検知機能について
機械学習を用いたMackerelの異常検知機能について機械学習を用いたMackerelの異常検知機能について
機械学習を用いたMackerelの異常検知機能について
 
Automation with SoftLayer and Zabbix
Automation with SoftLayer and ZabbixAutomation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
 
JAZUG 4周年総会 「トラブルから学ぶAzure世渡り術」
JAZUG 4周年総会 「トラブルから学ぶAzure世渡り術」JAZUG 4周年総会 「トラブルから学ぶAzure世渡り術」
JAZUG 4周年総会 「トラブルから学ぶAzure世渡り術」
 
We Should Know About in this SocialNetwork Era 2011_1112
We Should Know About in this SocialNetwork Era 2011_1112We Should Know About in this SocialNetwork Era 2011_1112
We Should Know About in this SocialNetwork Era 2011_1112
 
20130118 movable type_seminar
20130118 movable type_seminar20130118 movable type_seminar
20130118 movable type_seminar
 
さくらインターネットにおけるServerspec導入事例(DevOps勉強会 #3 Serverspecの巻)
さくらインターネットにおけるServerspec導入事例(DevOps勉強会 #3 Serverspecの巻)さくらインターネットにおけるServerspec導入事例(DevOps勉強会 #3 Serverspecの巻)
さくらインターネットにおけるServerspec導入事例(DevOps勉強会 #3 Serverspecの巻)
 
Osoljp201204
Osoljp201204Osoljp201204
Osoljp201204
 
T119_5年間の試行錯誤で進化したMVPVMパターン
T119_5年間の試行錯誤で進化したMVPVMパターンT119_5年間の試行錯誤で進化したMVPVMパターン
T119_5年間の試行錯誤で進化したMVPVMパターン
 
Serf / Consul 入門 ~仕事を楽しくしよう~
Serf / Consul 入門 ~仕事を楽しくしよう~Serf / Consul 入門 ~仕事を楽しくしよう~
Serf / Consul 入門 ~仕事を楽しくしよう~
 
ご注文は監視自動化ですか?
ご注文は監視自動化ですか?ご注文は監視自動化ですか?
ご注文は監視自動化ですか?
 
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用
 
OpenCV4Androidで画像処理アプリのススメ
OpenCV4Androidで画像処理アプリのススメOpenCV4Androidで画像処理アプリのススメ
OpenCV4Androidで画像処理アプリのススメ
 

Mais de kasikasikasi

キミスカのフロントエンドを Monorepo化しない話
キミスカのフロントエンドを Monorepo化しない話キミスカのフロントエンドを Monorepo化しない話
キミスカのフロントエンドを Monorepo化しない話kasikasikasi
 
Changing the matching function from two years ago to now.
Changing the matching function from two years ago to now.Changing the matching function from two years ago to now.
Changing the matching function from two years ago to now.kasikasikasi
 
Changing the matching function from two years ago to now.
Changing the matching function from two years ago to now.Changing the matching function from two years ago to now.
Changing the matching function from two years ago to now.kasikasikasi
 
社内システムのAWSアカウントにIAMのベストプラクティスを導入した
社内システムのAWSアカウントにIAMのベストプラクティスを導入した社内システムのAWSアカウントにIAMのベストプラクティスを導入した
社内システムのAWSアカウントにIAMのベストプラクティスを導入したkasikasikasi
 
This is toast ui calendar presentation
This is toast ui calendar presentationThis is toast ui calendar presentation
This is toast ui calendar presentationkasikasikasi
 
Copy Smallchat Arcana meetup#43
Copy Smallchat Arcana meetup#43Copy Smallchat Arcana meetup#43
Copy Smallchat Arcana meetup#43kasikasikasi
 
Favarite appinchina
Favarite appinchinaFavarite appinchina
Favarite appinchinakasikasikasi
 
How to name variables
How to name variablesHow to name variables
How to name variableskasikasikasi
 
Laravel多言語化対応
Laravel多言語化対応Laravel多言語化対応
Laravel多言語化対応kasikasikasi
 

Mais de kasikasikasi (12)

キミスカのフロントエンドを Monorepo化しない話
キミスカのフロントエンドを Monorepo化しない話キミスカのフロントエンドを Monorepo化しない話
キミスカのフロントエンドを Monorepo化しない話
 
Changing the matching function from two years ago to now.
Changing the matching function from two years ago to now.Changing the matching function from two years ago to now.
Changing the matching function from two years ago to now.
 
Changing the matching function from two years ago to now.
Changing the matching function from two years ago to now.Changing the matching function from two years ago to now.
Changing the matching function from two years ago to now.
 
社内システムのAWSアカウントにIAMのベストプラクティスを導入した
社内システムのAWSアカウントにIAMのベストプラクティスを導入した社内システムのAWSアカウントにIAMのベストプラクティスを導入した
社内システムのAWSアカウントにIAMのベストプラクティスを導入した
 
Let's CI/CD
Let's CI/CDLet's CI/CD
Let's CI/CD
 
This is toast ui calendar presentation
This is toast ui calendar presentationThis is toast ui calendar presentation
This is toast ui calendar presentation
 
Copy Smallchat Arcana meetup#43
Copy Smallchat Arcana meetup#43Copy Smallchat Arcana meetup#43
Copy Smallchat Arcana meetup#43
 
About Nuxt.js
About Nuxt.jsAbout Nuxt.js
About Nuxt.js
 
Favarite appinchina
Favarite appinchinaFavarite appinchina
Favarite appinchina
 
How to name variables
How to name variablesHow to name variables
How to name variables
 
Laravel多言語化対応
Laravel多言語化対応Laravel多言語化対応
Laravel多言語化対応
 
転職とLaravel
転職とLaravel転職とLaravel
転職とLaravel
 

Service Worker を知る