Bringing service workers to Google Search  | web.dev
Background Search for just about any topic on Google, and you're presented with an instantly recognizable page of meaningful, relevant results. What you probably didn't realize is that this search results page is, under certain scenarios, served by a powerful piece of web technology called a service worker. Rolling out service worker support for Google Search without negatively impacting the perfo
Service Worker スクリプトã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨æ›´æ–°å‡¦ç†
Service Worker ã®å®Ÿè£…ãŒä¸»è¦ãƒ–ラウザã§æƒã„始ã‚ã¦ç››ã‚Šä¸ŠãŒã£ã¦ãã¾ã—ãŸã。ãã®æµã‚Œã«ä¾¿ä¹—ã—ã¦ä¹…ã—ã¶ã‚Šã« Service Worker ã®ä»•æ§˜ã‚„実装ã«é–¢ã™ã‚‹è¨˜äº‹ã‚’書ã„ã¦ã¿ã¾ã—ãŸã€‚今回㯠Service Worker スクリプトã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨æ›´æ–°å‡¦ç†ã«ã¤ã„ã¦ã§ã™ã€‚ ã“ã®è¨˜äº‹ã¯ Service Worker スクリプトを少ã—ã§ã‚‚手書ãã—ã¦å‹•ã‹ã—ãŸã“ã¨ãŒã‚る人を想定èªè€…ã«ã—ã¦ã„ã¾ã™ã€‚Service Worker ã«ã¤ã„ã¦å…¨ã知らãªã„人ã¯ã¾ãšåˆ¥ã®å…¥é–€è¨˜äº‹ã‚’å‚ç…§ã—ã¦ãã ã•ã„。ã¾ãŸã€ç´°ã‹ã„ã“ã¨ã‚’æ°—ã«ã›ãšã« Service Worker を使ã„ãŸã„人㯠Workbox ã¨ã„ã£ãŸãƒ©ã‚¤ãƒ–ラリやフレームワークã®åˆ©ç”¨ã‚’ãŠã™ã™ã‚ã—ã¾ã™ã€‚ æ›´æ–°å±¥æ´ 2019/09/24: Chrome 78 ã‹ã‚‰ importScripts() も更新対象ã«ãªã‚Šã¾ã—ãŸã€‚ãã‚Œã«ã¤ã„ã¦åŠ ç†ã—ã¾ã—ãŸã€‚ 2018/06/07:
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 ã®ãƒŸãƒ‰ãƒ«ã‚¦ã‚§ã‚¢ãªã©ã§ã‚ãƒ£ãƒƒã‚·ãƒ¥ç ´æ£„è¨å®šã®ãƒã‚¸ãƒƒã‚¯ã‚„リダイレクトを書ã„ã¦
JavaScriptã®ã‚³ãƒ¼ãƒ‰ã¨Service Workerをユーザーã«è¿‘ã„CDNã®ã‚¨ãƒƒã‚¸ã§å®Ÿè¡Œå¯èƒ½ã€‚CloudflareãŒã€ŒCloudflare Workersã€ã‚’æ供開始
CDNプãƒãƒã‚¤ãƒ€ã®Cloudflareã¯ã€åŒç¤¾ãŒæä¾›ã™ã‚‹ã‚°ãƒãƒ¼ãƒãƒ«ãªã‚³ãƒ³ãƒ†ãƒ³ãƒ„デリãƒãƒªãƒ¼ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ï¼ˆCDN）ã®ã‚¨ãƒƒã‚¸ã«ãŠã„ã¦ã€é–‹ç™ºè€…ãŒJavaScriptã®ã‚³ãƒ¼ãƒ‰ã‚’é…ç½®ã—実行ã§ãる新機能「Cloudflare Workersã€ã®ä¸€èˆ¬æ供を開始ã—ãŸã¨ç™ºè¡¨ã—ã¾ã—ãŸã€‚ Cloudflare Workersを利用ã™ã‚‹ã¨ã€é–‹ç™ºè€…ã¯ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ã®å‘ã“ã†å´ã«ã‚るクラウドã§ã¯ãªãã€åˆ©ç”¨è€…ã«ã‚‚ã£ã¨ã‚‚è¿‘ã„CDNã®ã‚¨ãƒƒã‚¸ã«ä½ç½®ã™ã‚‹Cloudflareã®ãƒ‡ãƒ¼ã‚¿ã‚»ãƒ³ã‚¿ãƒ¼å†…ã§JavaScriptã®ã‚³ãƒ¼ãƒ‰ã‚’実行ã§ãるよã†ã«ãªã‚Šã¾ã™ã€‚ ã“ã‚Œã«ã‚ˆã£ã¦ã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆã«å¯¾ã—ã¦éžå¸¸ã«é«˜é€Ÿã«ãƒ¬ã‚¹ãƒãƒ³ã‚¹ã‚’è¿”ã™ã“ã¨ãŒã§ãã€åºƒç¯„囲ã«åˆ†æ•£ã•ã‚ŒãŸé«˜ã„冗長性をæŒã¤åˆ†æ•£ã‚·ã‚¹ãƒ†ãƒ ãŒæ§‹ç¯‰å¯èƒ½ã«ãªã‚Šã¾ã™ã€‚ åŒç¤¾ã¯æ—¥æœ¬ã‚’å«ã‚€ä¸–ç•Œä¸ã«127ã®ãƒ‡ãƒ¼ã‚¿ã‚»ãƒ³ã‚¿ãƒ¼ã‚’展開ã—ã¦ã„ã¾ã™ã€‚ 「クラウドã®å¤¢ã€ã€Cloudflare Workersã§ã§ãã‚‹ã“㨠Cloudf
Chromiumã®ãƒ—ãƒã‚»ã‚¹æ§‹æˆã¨ Worker/SharedWorker/ServiceWorkerã®ã†ã”ã - Qiita
ã“ã®è¨˜äº‹ã¯Chromium Browser Advent Calendar 2017ã®3日目ã®è¨˜äº‹ã«ãªã‚Šã¾ã™ã€‚ 今日ã®æ‹…当ã¯amiq11(twitter, chromium)ã§ã™ã€‚2016å¹´ã®4月ã‹ã‚‰Blink-Workerãƒãƒ¼ãƒ ã§ServiceWorkerã®å®Ÿè£…ã‚’ã—ã¦ã„ã¾ã™ã€‚ã“ã®advent calendarã«ç™»éŒ²ã—ã¦ã„ã‚‹chromiumコミッターã®ãªã‹ã§ã‚‚Chromiumæ´ãŒæµ…ã„ã®ã§ã¡ã‚‡ã£ã¨è¨˜äº‹ã‹ãã®ãƒ‰ã‚ドã‚ã—ã¡ã‚ƒã„ã¾ã™ãŒã€ãŒã‚“ã°ã‚Šã¾ã™Ù©(â—˙▿˙â—)Û¶ ã¯ã˜ã‚ã« ã•ã¦ã€ãªã†ã§ã‚„ã‚“ããªæ©Ÿèƒ½ã§ã‚ã‚‹ã¨ã“ã‚ã®ServiceWorkerã€ã¿ãªã•ã‚“ã¤ã‹ã£ã¦ã¾ã™ã‹ï¼Ÿ 最近ã¯WebKitã§ã‚‚開発ä¸ã«ãªã£ãŸã¨ã„ã†ã“ã¨ã§è©±é¡Œã«ãªã‚Šã¾ã—ãŸã‚ˆãï¼ PWA (Progressive Web App)を作る上ã§ã‚‚ベースã¨ãªã‚‹ã“ã®APIã€ãã®å†…部ã®å®Ÿè£…ã«ã¤ã„ã¦ã€ã“ã®ã‚¢ãƒ‰ãƒ™ãƒ³ãƒˆã‚«ãƒ¬ãƒ³ãƒ€ãƒ¼ã§ã¯å…¨ä½“ã®å‹•ãã¨æœ€è¿‘ã®é«˜é€ŸåŒ–
リニューアルã—ãŸæ—¥çµŒé›»å版ãŒé«˜é€Ÿã™ãŽã¦ãƒ¤ãƒã‚¤ä»¶ï½œã“ã‚“ã´ã‚…
日本経済新èžã¯å›½å†…を代表ã™ã‚‹çµŒæ¸ˆèªŒã 。ãã®é›»å版ã¯webã§ã®ç¶™ç¶šèª²é‡‘を大æˆåŠŸã•ã›ã€ã„ã¾ã‚„50万以上ã®æœ‰æ–™ä¼šå“¡ã‚’æ“ã™ã‚‹ãƒ¢ãƒ³ã‚¹ã‚¿ãƒ¼ã‚µã‚¤ãƒˆã 。 ãã®æ—¥çµŒé›»å版ãŒ11月6æ—¥ã«å…¨é¢ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«ã—ãŸã®ã ãŒã€å…¬é–‹å¾Œã€webæ¥ç•ŒãŒã«ã‚ã‹ã«ã–ã‚ã¤ã„ãŸã€‚表示速度ãŒçˆ†é€Ÿã ã£ãŸã®ã 。日経公å¼ã‚‚モãƒã‚¤ãƒ«ã§2å€ã®è¡¨ç¤ºé€Ÿåº¦ã‚’é”æˆã—ãŸã¨å ‚々ã¨å®£è¨€ã—ã¦ã„ãŸã€‚ webサービスã¯ç¶™ç¶šçŽ‡ã“ã神KPIã§ã€ãã®ç¶™ç¶šçŽ‡ã«ã¯é€Ÿåº¦ãŒå¤§ãã影響ã™ã‚‹ã€‚ ã“ã‚Œã¯ãƒã‚§ã‚らãªã„ã¨ãƒ¤ãƒã‚¤ã¨æ„Ÿã˜ã€å‹äººã®kitakã•ã‚“ã¨ã‚¹ãƒ”ードã®ç§˜å¯†ã‚’調査ã—ã¦ã¿ãŸã€‚ Fastlyをコンテンツã‚ャッシュã«ä½¿ã†æ®†ã©ã®ãƒ‡ãƒ¼ã‚¿ã¯Fastlyを経由ã—ã¦å–å¾—ã•ã‚Œã¦ã„ãŸã€‚Fastlyã¯æœ€è¿‘注目を集ã‚ã¦ã„ã‚‹CDN（世界ä¸ã«ã‚¨ãƒƒã‚¸ã‚µãƒ¼ãƒãƒ¼ã‚’é…ç½®ã—ã€é«˜é€Ÿã«ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’é…ä¿¡ã™ã‚‹ã‚µãƒ¼ãƒ“ス）ã§ã€éžå¸¸ã«é«˜æ©Ÿèƒ½ã§ãƒ¦ãƒ‹ãƒ¼ã‚¯ãªã‚µãƒ¼ãƒ“スã 。 一般ã«ã€CDNã¯ã„ã£ãŸã‚“世界ä¸ã«ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’ã°ã‚‰ã¾ãã¨ã€ãれを無
攻撃者視点ã§è¦‹ã‚‹ Service Worker / PWA Study SW
PWA Study( https://web-study.connpass.com/event/65267/ ) ã§ç™ºè¡¨ã—ãŸè³‡æ–™ã§ã™ã€‚
PWAã®å®Ÿè£…ã‚’ã—ã¦ã¿ãŸ - 技術探ã—
一年以上å‰ã®è¨˜äº‹ãªã®ã§ã€ã‚³ãƒ¼ãƒ‰ãŒå¤ã„ã§ã™ã€‚æ°—ã‚’ã¤ã‘ã¦èªã‚“ã§ãã ã•ã„。 PWAã¨ã¯ï¼Ÿ 目的 技術スタック Service Worker PWAã®view App Shell Content ã‚ャッシュ戦略 èªã¿è¾¼ã¿ãƒ•ãƒãƒ¼ Web App Manifest デザイン Firefoxã¨Chromeã—ã‹Service Workerãªã„ã‘ã©ã©ã†ã™ã‚‹ã®ï¼Ÿ ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ 実装 ライブラリ webpack-offline æ§‹æˆ ãƒ•ã‚¡ã‚¤ãƒ« ルーティング アセットã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ« API周り SSR 資料 ã•ã„ã”ã« ãã†ã„ãˆã°PWAã®å®Ÿè£…ã—ãŸã“ã¨ãŒãªã‹ã£ãŸãªã¨æ€ã£ãŸã®ã§å°‘ã—触ã£ã¦ã¿ãŸã€‚ PWAã¨ã¯ï¼Ÿ PWA(Progressive Web Apps) インストールãŒä¸è¦ã§ã€ä¸å®‰å®šãªãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ã§ã‚‚ç´ æ—©ãèµ·å‹•ã—ã€ãƒ—ッシュ通知をå¯èƒ½ã«ã—ã¾ã™ã€‚ ã¾ãŸã€ãƒ›ãƒ¼ãƒ ç”»é¢ã«ã‚¢ã‚¤ã‚³ãƒ³ã‚‚表示ã§ãã€ã‚¢ãƒ—リã¨åŒæ§˜ã®æ‰±ã„ã‚’ã™ã‚‹ã“ã¨ãŒå¯èƒ½
1
ランã‚ング
ãŠçŸ¥ã‚‰ã›
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}