Kanazawa.js Remote Meetup #06ã®è³‡æ–™ã§ã™ã€‚ https://kanazawajs.connpass.com/event/188109/
Service Workerã¨ã¯ã€ãれを使ã£ã¦ã§ãã‚‹ã“㨠/ what-is-service-worker
Kanazawa.js Remote Meetup #06ã®è³‡æ–™ã§ã™ã€‚ https://kanazawajs.connpass.com/event/188109/
Cache API を利用ã—ãŸãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚ャッシュ - ボクココ
ã©ã‚‚ã€@kimihom ã§ã™ã€‚ 今回㯠Cache API を使ã†æ©Ÿä¼šãŒã‚ã£ãŸã®ã§ã€èª¿æŸ»çµæžœã¨åˆ©ç”¨ã®ãƒ¦ãƒ¼ã‚¹ã‚±ãƒ¼ã‚¹ã¨å…±ã«ç´¹ä»‹ã—よã†ã€‚サーãƒãƒ¼ã‚µã‚¤ãƒ‰ã‚’ã©ã‚“ãªã«é«˜é€ŸåŒ–ã™ã‚‹ã‚ˆã‚Šã‚‚ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã§ ãã‚‚ãもリクエストをã•ã›ãªã„ 仕組ã¿ã«ã™ã‚Œã°ã€ãã‚ŒãŒæœ€ã‚‚速ã„ã¨ã„ã†ã®ã‚’改ã‚ã¦æ„Ÿã˜ãŸã€‚ Service Worker 㨠Cache API 「Service Worker を使ãˆã°ã€ã‚ªãƒ•ãƒ©ã‚¤ãƒ³ã§ã‚‚アクセスã§ãるよã†ã«ãªã‚‹ã€ã£ã¦ã„ã†ã®ãŒã‚ˆãèžã話ã ã‚ã†ã€‚ã“れを実ç¾ã™ã‚‹ã«ã¯ã€Cache API 㨠Service Worker ã®2ã¤ã‚’組ã¿åˆã‚ã›ã‚‹ã“ã¨ã§å®Ÿç¾ã§ãる。Service Worker を使ã†ã¨ã€ãƒšãƒ¼ã‚¸ãƒªã‚¯ã‚¨ã‚¹ãƒˆæ™‚ã®ã‚¤ãƒ™ãƒ³ãƒˆã‚’横å–ã‚Šã™ã‚‹ã“ã¨ãŒã§ãã‚‹ã‹ã‚‰ã€ãã‚ŒãŒå®Ÿç¾ã§ãる。詳ã—ãã¯ä»¥ä¸‹ã® Qiita ãŒå‚考ã«ãªã‚‹ã€‚ ServiceWorkerã¨Cache APIを使ã£ã¦ã‚ªãƒ•ãƒ©ã‚¤ãƒ³ã§ã‚‚å‹•ãWebアプリを
Service WorkerãŒã‚‚ã¤åœ§å€’çš„ãªåŠ›ã€‚SEO担当者ã¯å¤‰åŒ–ã«é©å¿œãŒå¿…è¦ | Moz - SEOã¨ã‚¤ãƒ³ãƒã‚¦ãƒ³ãƒ‰ãƒžãƒ¼ã‚±ãƒ†ã‚£ãƒ³ã‚°ã®å®Ÿè·µæƒ…å ±
PWAã€SPAã€Service Workerã¨ã¯ï¼Ÿï¼ˆå‰ç·¨ã§è§£èª¬ï¼‰SPAã‚’å¯èƒ½ã«ã™ã‚‹App Shellアーã‚テクãƒãƒ£ï¼ˆä¸ç·¨ã§è§£èª¬ï¼‰Service WorkerãŒã‚‚ã¤åœ§å€’çš„ãªåŠ›ã¾ã¨ã‚3. Service WorkerãŒã‚‚ã¤åœ§å€’çš„ãªåŠ›æœ€åˆã«ã¯ã£ãã‚Šã•ã›ã¦ãŠããŸã„ã“ã¨ãŒã‚る。ãã‚Œã¯ã€ã“ã“ã¾ã§ã§è§£èª¬ã—ã¦ããŸã€ŒSPAã€ã¨ã€ã“ã“ã‹ã‚‰å–り上ã’る「Service Worker（サービス・ワーカー）ã€ã¯ã€äº’ã„ã«æŽ’ä»–çš„ãªã‚‚ã®ã§ã¯ãªã„ã¨ã„ã†ã“ã¨ã 。 ã¤ã¾ã‚Šã“ã®2ã¤ã¯å…±å˜ã™ã‚‹ã‚‚ã®ã ã¨ã„ã†ã“ã¨ã 。ã©ã¡ã‚‰ã‚‚PWAã¨å‘¼ã°ã‚Œã‚‹ã‚‚ã®ã®åŸºç›¤ã¨ãªã£ã¦ã„ã‚‹ãŒã€SPAã§ã¯ãªã„PWAã‚’ã¤ãã‚‹ã“ã¨ã‚‚å¯èƒ½ã ã—ã€å¾“æ¥ã®é™çš„ãªã‚¦ã‚§ãƒ–サイト（クライアントサイドã§ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã™ã‚‹å‡¦ç†ãŒãªã„サイト）ã«Service Workerã‚’çµ±åˆã™ã‚‹ã“ã¨ã‚‚ã§ãる（近ã„å°†æ¥ã€ãã®ã‚ˆã†ãªã‚µã‚¤ãƒˆãŒå¢—ãˆã‚‹åƒ•ã¯æ€ã£ã¦ã„る）。 ã•ã‚‰ã«ã€Service Workerã¯ã‚¦ã‚§ãƒ–
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
Service Worker スクリプトã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨æ›´æ–°å‡¦ç†
Service Worker ã®å®Ÿè£…ãŒä¸»è¦ãƒ–ラウザã§æƒã„始ã‚ã¦ç››ã‚Šä¸ŠãŒã£ã¦ãã¾ã—ãŸã。ãã®æµã‚Œã«ä¾¿ä¹—ã—ã¦ä¹…ã—ã¶ã‚Šã« Service Worker ã®ä»•æ§˜ã‚„実装ã«é–¢ã™ã‚‹è¨˜äº‹ã‚’書ã„ã¦ã¿ã¾ã—ãŸã€‚今回㯠Service Worker スクリプトã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨æ›´æ–°å‡¦ç†ã«ã¤ã„ã¦ã§ã™ã€‚ ã“ã®è¨˜äº‹ã¯ Service Worker スクリプトを少ã—ã§ã‚‚手書ãã—ã¦å‹•ã‹ã—ãŸã“ã¨ãŒã‚る人を想定èªè€…ã«ã—ã¦ã„ã¾ã™ã€‚Service Worker ã«ã¤ã„ã¦å…¨ã知らãªã„人ã¯ã¾ãšåˆ¥ã®å…¥é–€è¨˜äº‹ã‚’å‚ç…§ã—ã¦ãã ã•ã„。ã¾ãŸã€ç´°ã‹ã„ã“ã¨ã‚’æ°—ã«ã›ãšã« Service Worker を使ã„ãŸã„人㯠Workbox ã¨ã„ã£ãŸãƒ©ã‚¤ãƒ–ラリやフレームワークã®åˆ©ç”¨ã‚’ãŠã™ã™ã‚ã—ã¾ã™ã€‚ æ›´æ–°å±¥æ´ 2019/09/24: Chrome 78 ã‹ã‚‰ importScripts() も更新対象ã«ãªã‚Šã¾ã—ãŸã€‚ãã‚Œã«ã¤ã„ã¦åŠ ç†ã—ã¾ã—ãŸã€‚ 2018/06/07:
Debugging Service Workers
プãƒã‚°ãƒ¬ãƒƒã‚·ãƒ– ウェブアプリ: オフライン コレクションã§ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’æ•´ç† å¿…è¦ã«å¿œã˜ã¦ã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã®ä¿å˜ã¨åˆ†é¡žã‚’è¡Œã„ã¾ã™ã€‚ 1. よã†ã“ã ã“ã®ãƒ©ãƒœã§ã¯ã€æ—¢å˜ã®ã‚¦ã‚§ãƒ– アプリケーションをオフラインã§ä½¿ç”¨ã§ãるよã†ã«ã—ã¾ã™ã€‚ã“ã‚Œã¯ã€ãƒ—ãƒã‚°ãƒ¬ãƒƒã‚·ãƒ– ウェブアプリ ワークショップã®ä¸€é€£ã®ã‚³ãƒ³ãƒ‘ニオン Codelab ã®æœ€åˆã§ã™ã€‚ã“ã®ã‚·ãƒªãƒ¼ã‚ºã«ã¯ã•ã‚‰ã« 7 ã¤ã® Codelab ãŒã‚ã‚Šã¾ã™ã€‚ å¦ç¿’内容 Service Worker を手動ã§ä½œæˆã™ã‚‹ æ—¢å˜ã®ã‚¦ã‚§ãƒ– アプリケーション㫠Service Worker ã‚’è¿½åŠ ã™ã‚‹ Service Worker 㨠Cache Storage API を使用ã—ã¦ãƒªã‚½ãƒ¼ã‚¹ã‚’オフラインã§ä½¿ç”¨ã§ãるよã†ã«ã™ã‚‹ å¿…è¦ãªäºˆå‚™çŸ¥è˜ 簡易 HTML 㨠JavaScript å¿…è¦ãªã‚‚ã® Service Worker をサãƒãƒ¼ãƒˆã™ã‚‹ãƒ–ラウザ 2. 準備 ã¾ãšã€ã“ã® Co
Service Workerã‚’WEBサイトã«æœ€å°æ§‹æˆã§å°Žå…¥ã—ã¦ã¿ãŸã‚µãƒ³ãƒ—ル
・WEB push通知 ・ãƒãƒƒã‚¯ã‚°ãƒ©ã‚¦ãƒ³ãƒ‰å‡¦ç† ・オフライン動作 ・PWA（Progressive Web Apps）化 ãªã©ãªã©ã€ãã®åˆã‚ã®ä¸€æ©ã¨ã—ã¦Service Workerを最å°æ§‹æˆã§å°Žå…¥ã—ã¦ã¿ãŸ å…¨ã¦åŒã˜ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªã«é…ç½® ├ index.html ├ main.js â”” sw.js index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Service Worker Test</title> <script src="main.js"></scri
ServiceWorkerã‚’ç°¡å˜ã«æ›¸ã‘ã‚‹workbox-swã®ä½¿ã„æ–¹ - Qiita
workbox-swã®ä½¿ã„æ–¹ GMOペパボ Advent Calendar 2017ã®11日分ã®ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã«ãªã‚Šã¾ã™ã€‚ 皆ã•ã‚“ã¯PWA(Progressive Web Apps)ã‚’ã”å˜çŸ¥ã§ã—ょã†ã‹ã€‚ 分ã‹ã‚Šã‚„ã™ã•ã‚’優先ã—ã¦è¨€ã†ãªã‚‰ã°ã€æ–°ã—ã„技術ã«ã‚ˆã£ã¦ãƒã‚¤ãƒ†ã‚£ãƒ–アプリã®ã‚ˆã†ãªå‹•ä½œãŒå¯èƒ½ã«ãªã£ãŸWebアプリケーションã®ã“ã¨ã§ã€ã‚ªãƒ•ãƒ©ã‚¤ãƒ³ã§å‹•ä½œã—ãŸã‚Šãƒ—ッシュ通知ãŒé€ã‚Œã‚‹Webアプリケーションを実ç¾ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ （詳細ã¯Google Developersã‚„ç§ã®ç™ºè¡¨ã‚¹ãƒ©ã‚¤ãƒ‰ã‚’ã”å‚ç…§ãã ã•ã„） ã•ã¦ä»Šå›žã¯PWA作æˆã«ã‚ãŸã£ã¦ã¨ã¦ã‚‚便利ãªãƒ©ã‚¤ãƒ–ラリã§ã‚ã‚‹workbox-sw（以下ã€workbox）ã®ç´¹ä»‹è¨˜äº‹ã¨ãªã‚Šã¾ã™ã€‚ workboxã¨ã¯ç°¡å˜ãªè¨˜è¿°ã§æœ€é©ãªServiceWorkerã®ã‚³ãƒ¼ãƒ‰ã‚’生æˆã—ã¦ãれるライブラリã§ã™ã€‚ PWA自体ã©ã†ã‚„らã¾ã èªçŸ¥åº¦ãŒä½Žãã€ãれを作るãŸã‚ã®ãƒ©ã‚¤ãƒ–ラリ関連もã¾ãŸ
pwa_study アウトラインメモ
pwa_study - connpassã«å‚åŠ ã—ã¦ããŸã®ã§ãƒ¡ãƒ¢ã€‚ 用語 SW = Service Worker XSS = cross site scripting Fetch = Fetch API ウェルカムLT クライアントサイドDDDãŒè¡Œã‚れるよã†ã«ãªã£ã¦ã㟠クライアントサイドã«ãƒã‚¸ãƒƒã‚¯ãŒå¯„ã£ã¦ãã¦ã‚‹ 難ã—ã„ Service Workerもクライアントサイドã«ãã†ã„ã†ãƒã‚¸ãƒƒã‚¯ã‚„仕組ã¿ãŒã‚ˆã£ã¦ããŸã¨ã„ã†ç¾è±¡ã®ä¸€ã¤ãªã®ã§ã¯ Service Worker Lifecycle - laco スライド: Service Worker Lifecycle by Suguru Inatomi SWã®ãƒ©ã‚¤ãƒ•ã‚µã‚¤ã‚¯ãƒ« Service Worker ã®ãƒ©ã‚¤ãƒ•ã‚µã‚¤ã‚¯ãƒ«  | Web  | Google Developers ã“れよã‚ã°å¤§ä½“分ã‹ã‚‹ スライド -> 記事èªã‚€ã¨è‰¯ã„ register -
Service Worker ã® Navigation Preload ã«ã‚ˆã‚‹è¡¨ç¤ºé…å»¶å›žé¿ | blog.jxck.io
Intro Service Worker 㧠Fetch ã‚’ Proxy ã™ã‚‹å ´åˆã€ Fetch 発生時㫠SW ãŒèµ·å‹•ã—ã¦ã„ãªã‘ã‚Œã°ã€ãã®èµ·å‹•ã‚’å¾…ã¤å¿…è¦ãŒå‡ºã‚‹ã€‚ ãã—ã¦ã€ã“ã® SW ã®èµ·å‹•ã«ã¯ç„¡è¦–ã§ããªã„時間ãŒã‹ã‹ã‚‹å ´åˆãŒã‚ã£ãŸã€‚ ã“れを改善ã™ã‚‹ Navigation Preload ã«ã¤ã„ã¦è§£èª¬ã™ã‚‹ã€‚ SW Bootup SW ㌠onfetch ã‚’ãƒãƒ³ãƒ‰ãƒ«ã—ã€ã‚ャッシュã‹ã‚‰ Response ã‚’è¿”ã™å ´åˆã¯ã€ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ I/O ã‚’ã›ãšã«ç”»é¢ã‚’レンダリングã§ãる。 ã—ã‹ã—〠SW ㌠onfetch をフックã—ã¦ã„ã¦ã‚‚ãªãŠã€å®Ÿéš›ã«ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ã«ãƒªã‚¯ã‚¨ã‚¹ãƒˆã‚’投ã’ã‚‹å ´åˆã¯å°‘ãªããªã„。 ã“ã®å ´åˆã€ã‚‚ã—ページã®ã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ©ã¨ãªã£ã¦ã„ã‚‹ SW ãŒèµ·å‹•ã—ã¦ã„ãªã„å ´åˆã¯ã€ onfetch ãƒãƒ³ãƒ‰ãƒ©ã‚’実行ã™ã‚‹ãŸã‚ã«ã€ SW ã®èµ·å‹•ã‚’å¾…ã¤å¿…è¦ãŒå‡ºã¦ãる。 SW ã®èµ·å‹•ã«ã¯ã€ã‚‚ã¡ã‚ん実行環境ã«ã‚ˆã‚‹ã¨ã“ã‚ãŒ
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. ã¿ãªã•ã‚“ã“ã‚“ã«ã¡ã¯ã€FRESH! ã§ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®é–‹ç™ºã—ã¦ã„る鈴木(sutiwo)ã§ã™ã€‚ å‰å›žã¯ã€FRESH!ã«ãŠã‘ã‚‹PCブラウザã®Flash脱å´ã¨ã„ㆠHLS ã® Web プレイヤーã«ã¤ã„ã¦è¨˜äº‹ã‚’書ãã¾ã—ãŸã€‚ 今回ã¯ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ãƒ» PC ã§ã®ãƒ–ラウザã«é–¢ã™ã‚‹ãƒ‘フォーマンス改善ã®å–り組ã¿ã¨ãã®çµæžœã«ã¤ã„ã¦ãŠçŸ¥ã‚‰ã›ã—ã¾ã™ã€‚ ã¾ãšã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆã‚µã‚¤ãƒ‰ã®ãƒ‘フォーマンス改善を行ã†ã«ã‚ãŸã‚Šã€å¼Šç¤¾ã® Web Initiative Center* ã‹ã‚‰ 1000ch æ°ã«åŠ ã‚ã£ã¦ã„ãŸã ãã©ã®ã‚ˆã†ãªã“ã¨ã‚’目標ã¨ã™ã‚‹ã‹è°è«–ã—ã¾ã—ãŸã€‚ * Web プãƒãƒ€ã‚¯ãƒˆã®å“質å‘上ã¨Web技術を使ã£ãŸãƒãƒ£ãƒ¬ãƒ³ã‚¸ã‚’目的ã«è¨ç«‹ã•ã‚ŒãŸå¼Šç¤¾ã®çµ„ç¹” è°è«–ã®æ§˜å è°è«–ã‚’è¡Œã£ãŸå¾Œã€ä»Šå›žã®æ”¹å–„ã§ä»¥ä¸‹ã®ã“ã¨ã«å–り組むã“ã¨ãŒæ±ºã¾ã‚Šã¾ã—ãŸã€‚ Service Worker ã§
jQuery.ajax()ã®ä»£æ›¿ã¨ã—ã¦Fetch APIã‚’ã–ã£ãり使ã£ã¦ã¿ã‚‹ - tacamy--blog
jQueryを使ã‚ãšã«Ajaxã‚’ã—ãŸãã¦ã€ã¨ã¯ã„ãˆç”Ÿã®XHR（XMLHttpRequest ）を扱ã†ã®ã¯ã‚ã‚“ã©ãã•ã„ã£ã¦ã„ã†ã¨ãã«ã€Fetch APIを使ã£ã¦ã¿ã¾ã—ãŸã€‚ãã®ã¨ã調ã¹ãŸã“ã¨ã®è¦šãˆæ›¸ãã§ã™ã€‚ Fetch APIã£ã¦ï¼Ÿ ã“ã“ã«ã€Jxck先生ã®ã™ã°ã‚‰ã—ã„記事ãŒã‚ã‚Šã¾ã™ã€‚ jxck.hatenablog.com æ£ç›´ãœã‚“ãœã‚“ç†è§£ã§ãã¦ãªã„ã®ã§ã™ãŒï¼ˆðŸ™‡ï¼‰ã€ã‚‚ã®ã™ã”ãã–ã£ãã‚Šã„ã†ã¨ã€ jQueryã®Ajax並ã«ç°¡æ½”ã«è¨˜è¿°ã§ãã‚‹ Promiseベースã®è¨è¨ˆã§ã€çµæžœã¯Promiseã§è¿”ã•ã‚Œã‚‹ XHRよりも細ã‹ãªåˆ¶å¾¡ãŒã§ãã‚‹ ã¿ãŸã„ãªæ„Ÿã˜ãªã®ã‹ãªã¨æ€ã„ã¾ã—ãŸã€‚ ã¡ãªã¿ã«ã€å…ˆã®è¨˜äº‹ã§ã¯å˜ãªã‚‹XHRã®ä»£ã‚ã‚Šã˜ã‚ƒãªã„ã¨è¨˜è¼‰ã•ã‚Œã¦ã‚‹ã®ã§ã€Fetchã¨ã‹Fetch APIã®ç†è§£ã«ã¯ãã¡ã‚‰ã‚’èªã‚“ã§ã‚‚らã£ãŸæ–¹ãŒã„ã„ã‹ã¨æ€ã„ã¾ã™ã€‚。 ブラウザサãƒãƒ¼ãƒˆçŠ¶æ³ Can I use... Support table
Service Workerã®åŸºæœ¬ã¨ãれを使ã£ã¦ã§ãã‚‹ã“㨠- Qiita
Service Workerã¨ã¯ ブラウザ㌠Web ページã¨ã¯åˆ¥ã«ãƒãƒƒã‚¯ã‚°ãƒ©ã‚¦ãƒ³ãƒ‰ã§å®Ÿè¡Œã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト オフラインã®ã‚¢ãƒ—リを実ç¾ãƒ»ã‚µãƒãƒ¼ãƒˆã™ã‚‹ãŸã‚ã«ä½œã‚‰ã‚ŒãŸã‚‚ã®ã§ã™ ã¡ãªã¿ã«ã€ãƒ–ラウザã®å¯¾å¿œçŠ¶æ³ã¯ã“ã‚“ãªæ„Ÿã˜ http://caniuse.com/#search=service%20workers 特徴 DOM ã«ã‚¢ã‚¯ã‚»ã‚¹ã§ããªã„ DOM ã‚’æ“作ã—ãŸã„å ´åˆã¯ã€Service Worker ãŒã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ«ã—ã¦ã„るページ(js)㨠postMessage ã§ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ã®ã‚„ã‚Šå–ã‚Šã‚’ã—ã¦è¡Œã† リクエストをプãƒã‚ã‚·ã™ã‚‹ã“ã¨ãŒå¯èƒ½ Service Worker ã¯ãƒ–ラウザãŒå¿…è¦ã«å¿œã˜ã¦èµ·å‹•ãƒ»çµ‚了ã™ã‚‹ã®ã§ã€å¤‰æ•°ã®å€¤ã‚’ä¿æŒã—ã¦ãŠã‘ãªã„ Cacheã€IndexedDB ç‰ã§å€¤ã‚’ä¿å˜ã—ã¦ã€å¿…è¦ã«ãªã£ãŸæ™‚ã«å–り出ã™ã‚ˆã†ã«ã™ã‚‹ Promise を多用ã™ã‚‹ https ã‹ localhost 上ã§ã—ã‹å‹•ä½œã—ãªã„ ラ
プãƒã‚°ãƒ¬ãƒƒã‚·ãƒ–ウェブアプリã«ã¤ã„ã¦~デモアプリã§åŠ¹æžœã‚’検証~ | エã‚サイト公å¼ã€€ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ãƒ–ãƒã‚°
ニュース技術ã®æ–‰è—¤ã§ã™ 07/13(金)ã«ç¤¾å†…ã®æ•°åã§GoogleforMobileã«å‚åŠ ã—ã¦ãã¾ã—㟠https://events.withgoogle.com/google-for-mobile/program/ 多ãã®ã‚»ãƒƒã‚·ãƒ§ãƒ³ãŒã‚ã‚Šã€å…¨ä½“ã¨ã—ã¦ã¯å…ˆæ—¥ã®GoogleI/Oã§ç™ºè¡¨ã•ã‚ŒãŸFireBaseã«ã¤ã„ã¦ã®å†…容ãŒå¤šãã€Googleã®Firebaseã«å¯¾ã™ã‚‹å¼·ã„æ„æ€ã‚’æ„Ÿã˜ã‚‰ã‚Œã¾ã—㟠ã“ã®è¨˜äº‹ã§ã¯GoogleforMobileã§ã‚‚2セッション発表ãŒã‚ã‚Šã¾ã—ãŸã€ãƒ—ãƒã‚°ãƒ¬ãƒƒã‚·ãƒ–ウェブアプリã®ç´¹ä»‹ã‚’ã—ã¾ã™ プãƒã‚°ãƒ¬ãƒƒã‚·ãƒ–ウェブアプリã¨ã¯webアプリã¨ãƒã‚¤ãƒ†ã‚£ãƒ–アプリ両方ã®è‰¯ã„部分を兼ãå‚™ãˆãŸã€webアプリã§ã™ (教科書通りã«å®Ÿè£…ã™ã‚Œã°)特徴ã¯ä¸‹è¨˜ã®é€šã‚Šã§ã™ ホーム画é¢ã‹ã‚‰ã®èµ·å‹•ãƒ›ãƒ¼ãƒ ç”»é¢ã«è¿½åŠ ã™ã‚‹ã“ã¨ã§ã€ã‚ãŸã‹ã‚‚ãƒã‚¤ãƒ†ã‚£ãƒ–アプリã‹ã®ã‚ˆã†ã«èµ·å‹•ã§ãã¾ã™ Pushãƒã‚¤ãƒ†ã‚£ãƒ–アプリã®ãƒ—ッシュ通知を
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通知ã§ã¯ãªãã€ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯ãƒªã‚¯ã‚¨ã‚¹ãƒˆã‚’横å–ã‚Šã™ã‚‹æ©Ÿèƒ½ã‚’使ã£ã¦ã‚ªãƒ•ãƒ©ã‚¤ãƒ³å¯¾å¿œã‚’ã—ãŸã€‚ #ãƒ
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
https://blog.mismithportfolio.com/web/sw-offline
Service Worker Lifecycle
https://qiita.com/aqz/items/c21408257a28c3fc287d
「ホーム画é¢ã«è¿½åŠ ã€ã‹ã‚‰ã¯ã˜ã‚る『PWA(Service Worker)〠- Qiita
{{#tags}}- {{label}}
{{/tags}}