{"id":4959,"date":"2023-11-08T16:29:53","date_gmt":"2023-11-08T09:29:53","guid":{"rendered":"https:\/\/mhgvietnam.com\/?p=4959"},"modified":"2023-11-08T16:30:00","modified_gmt":"2023-11-08T09:30:00","slug":"service-worker-la-gi-cac-chu-y-khi-lam-viec-voi-service-worker","status":"publish","type":"post","link":"https:\/\/mhgvietnam.com\/en\/service-worker-la-gi-cac-chu-y-khi-lam-viec-voi-service-worker\/","title":{"rendered":"Service Worker L\u00e0 G\u00ec? C\u00e1c Ch\u00fa \u00dd Khi L\u00e0m Vi\u1ec7c V\u1edbi Service Worker"},"content":{"rendered":"<\/p>\n
\n
<\/div>\n

Service worker l\u00e0 g\u00ec<\/strong>? Khi l\u00e0m c\u00f4ng vi\u1ec7c service worker c\u1ea7n ch\u00fa \u00fd \u0111\u1ebfn nh\u1eefng v\u1ea5n \u0111\u1ec1 n\u00e0o? \u0110\u00e2y l\u00e0 m\u1ed9t trong s\u1ed1 nh\u1eefng th\u1eafc m\u1eafc c\u1ee7a nhi\u1ec1u b\u1ea1n \u0111\u1ecdc trong th\u1eddi gian g\u1ea7n \u0111\u00e2y khi nh\u1eafc \u0111\u1ebfn c\u00f4ng vi\u1ec7c service worker. <\/p>\n

\u0110\u1ec3 gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00f4ng vi\u1ec7c n\u00e0y, Ch\u00fang t\u00f4i \u0111\u00e3 t\u1ed5ng h\u1ee3p c\u00e1c th\u00f4ng tin li\u00ean quan \u0111\u1ebfn service worker trong b\u00e0i vi\u1ebft sau \u0111\u00e2y, theo d\u00f5i ngay \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c c\u00e2u tr\u1ea3 l\u1eddi ch\u00ednh x\u00e1c nh\u1ea5t cho nh\u1eefng th\u1eafc m\u1eafc c\u1ee7a m\u00ecnh nh\u00e9.\u00a0<\/p>\n

<\/span>Service worker l\u00e0 g\u00ec?<\/strong><\/span><\/h2>\n

Service worker \u0111\u01b0\u1ee3c nhi\u1ec1u ng\u01b0\u1eddi bi\u1ebft \u0111\u1ebfn l\u00e0 m\u1ed9t t\u1ec7p ph\u01b0\u01a1ng tr\u00ecnh \u0111\u01b0\u1ee3c vi\u1ebft b\u1eb1ng ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh javascript, \u0111\u01b0\u1ee3c browser ch\u1ea1y ng\u1ea7m v\u00e0 t\u00e1ch bi\u1ec7t kh\u1ecfi trang web. service worker gi\u00fap m\u1edf ra c\u00e1nh c\u1eeda cho c\u00e1c t\u00ednh n\u0103ng kh\u00f4ng \u0111\u00f2i h\u1ecfi v\u1ec1 giao di\u1ec7n ho\u1eb7c t\u01b0\u01a1ng\u00a0 t\u00e1c v\u1edbi ng\u01b0\u1eddi d\u00f9ng v\u00ed d\u1ee5 nh\u01b0: \u0111\u1ed3ng b\u1ed9 ng\u1ea7m v\u00e0 push notifications, v.v.<\/p>\n

Trong t\u01b0\u01a1ng lai kh\u00f4ng xa, service worker s\u1ebd h\u1ed7 tr\u1ee3 \u0111\u1ecbnh v\u1ecb \u0111\u1ecba l\u00fd ho\u1eb7c \u0111\u1ed3ng b\u1ed9 \u0111\u1ecbnh k\u1ef3, n\u1eafm b\u1eaft \u0111\u01b0\u1ee3c kh\u1ea3 n\u0103ng x\u1eed l\u00fd c\u00e1c request tr\u00ean m\u1ea1ng v\u00e0 c\u00f3 th\u1ec3 qu\u1ea3n l\u00fd vi\u1ec7c cache c\u00e1c response tr\u1ea3 v\u1ec1. Nh\u1edd \u0111\u00f3, c\u00f3 th\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c website trong tr\u01b0\u1eddng h\u1ee3p kh\u00f4ng c\u00f3 m\u1ea1ng.\u00a0<\/p>\n

C\u1ee5 th\u1ec3 h\u01a1n service worker h\u1ed9i t\u1ee5 c\u00e1c \u0111i\u1ec3m sau:<\/p>\n

    \n
  • Service worker l\u00e0 m\u1ed9t file javascript kh\u00f4ng c\u00f3 s\u1ef1 can thi\u1ec7p tr\u1ef1c ti\u1ebfp v\u00e0 DOM c\u1ee7a website, thay v\u00e0o \u0111\u00f3 qu\u00e1 tr\u00ecnh giao ti\u1ebfp s\u1ebd th\u00f4ng qua c\u00e1c page c\u1ee7a m\u1ed9t giao di\u1ec7n \u0111\u1eb7c bi\u1ec7t, \u0111\u1ed3ng th\u1eddi t\u01b0\u01a1ng t\u00e1c v\u1edbi DOM th\u00f4ng qua c\u00e1c page \u0111\u00f3.\u00a0<\/li>\n
  • SW c\u00f2n l\u00e0 m\u1ed9t m\u1ea1ng c\u00f3 th\u1ec3 l\u1eadp tr\u00ecnh \u0111\u01b0\u1ee3c, n\u00f3 cho ph\u00e9p ch\u00fang ta \u0111i\u1ec1u khi\u1ec3n c\u00e1ch m\u00e0 c\u00e1c request s\u1ebd th\u1ef1c hi\u1ec7n x\u1eed l\u00fd.\u00a0<\/li>\n
  • T\u1ef1 \u0111\u1ed9ng t\u1eaft khi kh\u00f4ng d\u00f9ng \u0111\u1ebfn v\u00e0 kh\u1edfi \u0111\u1ed9ng l\u1ea1i khi c\u1ea7n.\u00a0<\/li>\n
  • service worker r\u1ed9ng r\u00e3i kh\u00e1i ni\u1ec7m Promise.<\/li>\n<\/ul>\n
    \n
    \"service\"service<\/figure>\n<\/div>\n

    <\/span>V\u00f2ng \u0111\u1eddi c\u1ee7a service workers<\/strong><\/span><\/h2>\n

    \u0110\u1ec3 c\u00e0i \u0111\u1eb7t service worker<\/strong> c\u1ee7a m\u1ed9t trang web, b\u1ea1n c\u1ea7n \u0111\u0103ng k\u00fd n\u00f3 b\u1eb1ng javascript c\u1ee7a trang web. Khi \u0111\u0103ng k\u00fd \u0111\u0103ng k\u00fd th\u00e0nh c\u00f4ng s\u1ebd b\u1eaft \u0111\u1ea7u \u0111\u0103ng k\u00fd SW ng\u1ea7m, \u1edf b\u01b0\u1edbc n\u00e0y n\u1ebfu mu\u1ed1n b\u1ea1n c\u00f3 th\u1ec3 cache c\u00e1c assets t\u0129nh, khi cache ho\u00e0n th\u00e0nh c\u00f3 ngh\u0129a SW \u0111\u01b0\u1ee3c c\u00e0i \u0111\u1eb7t ho\u00e0n ch\u1ec9nh.\u00a0<\/p>\n

    Trong tr\u01b0\u1eddng h\u1ee3p c\u00e1c t\u1ec7p kh\u00f4ng \u0111\u01b0\u1ee3c cache th\u00e0nh c\u00f4ng ho\u1eb7c kh\u00f4ng t\u1ea3i th\u00e0nh c\u00f4ng th\u00ec SW worker s\u1ebd kh\u00f4ng th\u1ec3 c\u00e0i \u0111\u1eb7t \u0111\u01b0\u1ee3c v\u00e0 kh\u00f4ng active, sau khi c\u00e0i \u0111\u1eb7t sw\u00a0 th\u00e0nh c\u00f4ng s\u1ebd qua b\u01b0\u1edbc giai \u0111o\u1ea1n active.\u00a0<\/p>\n

    \u0110\u1ed1i v\u1edbi giai \u0111o\u1ea1n active sw b\u1ea1n c\u1ea7n ti\u1ebfn h\u00e0nh \u0111i\u1ec1u khi\u1ec3n web page trong ph\u1ea1m vi cho ph\u00e9p c\u1ee7a n\u00f3. Khi sw n\u1eafm \u0111\u01b0\u1ee3c quy\u1ec1n \u0111i\u1ec1u khi\u1ec3n n\u00f3 s\u1ebd r\u01a1i v\u00e0o 2 tr\u1ea1ng th\u00e1i c\u1ee5 th\u1ec3:<\/p>\n

      \n
    • SW s\u1ebd k\u1ebft th\u00fac lu\u00f4n \u0111\u1ec3 t\u1ed1i \u01b0u b\u1ed9 nh\u1edb ho\u1eb7c x\u1eed l\u00fd vi\u1ec7c t\u00ecm ki\u1ebfm v\u00e0 hi\u1ec3n th\u1ecb c\u00e1c event khi c\u00f3 y\u00eau c\u1ea7u qua m\u1ea1ng.\u00a0<\/li>\n
    • Ho\u1eb7c notification di\u1ec5n ra.<\/li>\n<\/ul>\n

      <\/span>Vai tr\u00f2 c\u1ee7a service worker l\u00e0 g\u00ec?\u00a0<\/strong><\/span><\/h2>\n
        \n
      • Ki\u1ec3m so\u00e1t Network Traffic: D\u1ec5 d\u00e0ng qu\u1ea3n l\u00fd c\u00e1c Network Traffic c\u1ee7a trang v\u00e0 can thi\u1ec7p v\u00e0o n\u1ebfu c\u1ea7u thi\u1ebft.\u00a0<\/li>\n
      • Cache: C\u00f3 th\u1ec3 cache b\u1ea5t c\u1ee9 c\u1eb7p request\/response n\u00e0o v\u1edbi service workers<\/strong> v\u00e0 Cache API. Cu\u1ed1i c\u00f9ng l\u00e0 access nh\u1eefng n\u1ed9i dung offline n\u00e0y b\u1ea5t c\u1ee9 l\u00fac n\u00e0o.<\/li>\n
      • Qu\u1ea3n l\u00fd push notification: D\u1ec5 d\u00e0ng h\u01a1n trong vi\u1ec7c qu\u1ea3n l\u00fd push notification v\u1edbi service worker v\u00e0 hi\u1ec3n th\u1ecb tin nh\u1eafn \u0111\u1ebfn ng\u01b0\u1eddi d\u00f9ng.\u00a0<\/li>\n
      • Kh\u00f4ng c\u00f3 k\u1ebft n\u1ed1i v\u1eabn s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c: Trong tr\u01b0\u1eddng h\u1ee3p b\u1ecb m\u1ea5t k\u1ebft n\u1ed1i v\u1eabn c\u00f3 th\u1ec3 start b\u1ea5t k\u1ef3 process n\u00e0o th\u00f4ng qua Background Sync v\u00e0 service worker.<\/li>\n
      • Kh\u00f4ng th\u1ec3 access object window: M\u1eb7c d\u00f9 kh\u00f4ng\u00a0 th\u1ec3 qu\u1ea3n l\u00fd DOM element nh\u01b0ng v\u1eabn c\u00f3 th\u1ec3 giao ti\u1ebfp v\u1edbi window th\u00f4ng qua postMessage v\u00e0 process n\u1ebfu mu\u1ed1n.\u00a0<\/li>\n
      • Kh\u00f4ng th\u1ec3 l\u00e0m vi\u1ec7c tr\u00ean port 80: Hi\u1ec7n t\u1ea1i service worker ch\u1ec9 c\u00f3 th\u1ec3 l\u00e0m vi\u1ec7c trong tr\u00ean giao th\u1ee9c HTTPS, ngo\u00e0i ra b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 l\u00e0m vi\u1ec7c tr\u00ean localhost trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n.\u00a0<\/li>\n<\/ul>\n

        <\/span>\u0110\u0103ng k\u00fd sw. nh\u01b0 th\u1ebf n\u00e0o?<\/strong><\/span><\/h2>\n

        \u0110\u1ec3 \u0111\u0103ng k\u00fd SW b\u1ea1n c\u1ea7n \u0111\u0103ng k\u00fd th\u00f4ng qua javascript \u1edf trang web, c\u00e1ch n\u00e0y gi\u00fap b\u1ea1n th\u00f4ng b\u00e1o v\u1edbi browser c\u00e1ch \u0111\u1eb7t file service worker.\u00a0<\/p>\n

        if (\u2018serviceWorker\u2019 in navigator) {<\/p>\n

        \u00a0\u00a0window.addEventListener(\u2018load\u2019, function() {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0navigator.serviceWorker.register(\u2018\/sw.js\u2019).then(function(registration) {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Registration was successful<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\u2018ServiceWorker registration successful with scope: \u2018, registration.scope);<\/p>\n

        \u00a0\u00a0\u00a0\u00a0}, function(err) {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ registration failed \ud83d\ude41<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\u2018ServiceWorker registration failed: \u2018, err);<\/p>\n

        \u00a0\u00a0\u00a0\u00a0});<\/p>\n

        \u00a0\u00a0});<\/p>\n

        }<\/p>\n

        \u0110o\u1ea1n code tr\u00ean gi\u00fap b\u1ea1n ki\u1ec3m tra s\u1ef1 h\u1ed7 tr\u1ee3 c\u1ee7a browser v\u1edbi sw, trong tr\u01b0\u1eddng h\u1ee3p c\u00f3 h\u1ed7 tr\u1ee3 s\u1ebd ti\u1ebfn h\u00e0nh \u0111\u0103ng k\u00fd file SW khi trang \u0111\u01b0\u1ee3c ch\u1ea1y.\u00a0<\/p>\n

        Th\u00f4ng qua \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 g\u1ecdi giao th\u1ee9c register () m\u00e0 kh\u00f4ng ph\u1ea3i quan t\u00e2m SW \u0111\u00e3 c\u00e0i \u0111\u1eb7t hay ch\u01b0a, browser s\u1ebd bi\u1ebft SW \u0111\u00e3 \u0111\u01b0\u1ee3c c\u00e0i \u0111\u1eb7t theo y\u00eau c\u1ea7u hay ch\u01b0a ho\u1eb7c kh\u00f4ng c\u1ea7n ch\u1ea1y theo ph\u01b0\u01a1ng th\u1ee9c tr\u00ean. Trong qu\u00e1 tr\u00ecnh \u0111\u0103ng k\u00fd b\u1ea1n c\u1ea7n l\u01b0u \u00fd \u0111\u1ebfn ph\u1ea1m vi c\u1ee7a n\u00f3.<\/p>\n

        <\/span>H\u01b0\u1edbng d\u1eabn c\u01a1 b\u1ea3n v\u1ec1 s\u1eed d\u1ee5ng worker service<\/strong><\/span><\/h2>\n

        <\/span>C\u00e1ch c\u00e0i \u0111\u1eb7t service worker<\/strong><\/span><\/h3>\n

        S\u1eed d\u1ee5ng \u0111o\u1ea1n code sau \u0111\u00e2y \u0111\u1ec3 c\u00e0i \u0111\u1eb7t service worker:<\/p>\n

        const PRECACHE = \u201cmy-precache-v1\u201d;<\/p>\n

        const RUNTIME = \u201cmy-runtime\u201d; \/\/ A list of local resources want to be cached.<\/em><\/p>\n

        const PRECACHE_URLS = [<\/p>\n

        \u00a0\u00a0\u201cindex.html\u201d,<\/p>\n

        \u00a0\u00a0\u201c.\/\u201d, \/\/ Alias for index.html<\/em><\/p>\n

        \u00a0\u00a0\u201cstyle.css\u201d,<\/p>\n

        \u00a0\u00a0\u201cmain.js\u201d,<\/p>\n

        ];<\/p>\n

        \/\/ The install handler takes care of precaching the resources we always need.<\/em><\/p>\n

        self.addEventListener(\u201cinstall\u201d, (event) => {<\/p>\n

        \u00a0\u00a0event.waitUntil(<\/p>\n

        \u00a0\u00a0\u00a0\u00a0caches<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.open(PRECACHE)<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then((cache) => cache.addAll(PRECACHE_URLS))<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then(self.skipWaiting())<\/p>\n

        \u00a0\u00a0);<\/p>\n

        });<\/p>\n

        M\u1ee5c \u0111\u00edch ch\u00ednh c\u1ee7a vi\u1ec7c c\u00e0i \u0111\u1eb7t l\u00e0 \u0111\u1ec3 l\u01b0u c\u00e1c resources \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a \u1edf array PRECACHE_URLS v\u00e0o b\u1ed9 nh\u1edb \u0111\u1ec7m cache v\u1edbi t\u00ean \u0111\u1ecbnh ngh\u0129a PRECACHE. Sau khi \u0111\u00e3 l\u01b0u th\u00e0nh c\u00f4ng t\u1ea5t c\u1ea3 c\u00e1c resources c\u1ea7n thi\u1ebft, b\u1ea1n d\u00f9ng h\u00e0m self.skipWaiting() \u0111\u1ec3 d\u1eebng ti\u1ebfn tr\u00ecnh c\u00f4ng vi\u1ec7c hi\u1ec7n t\u1ea1i v\u00e0 chuy\u1ec3n sang th\u1ef1c hi\u1ec7n c\u00f4ng vi\u1ec7c ti\u1ebfp theo.\u00a0<\/p>\n

        \n
        \"service\"service<\/figure>\n<\/div>\n

        <\/span>C\u00e1ch k\u00edch ho\u1ea1t service worker<\/strong><\/span><\/h3>\n

        S\u1eed d\u1ee5ng \u0111o\u1ea1n code sau \u0111\u00e2y \u0111\u1ec3 k\u00edch ho\u1ea1t service worker:<\/p>\n

        \/\/ The activate handler takes care of cleaning up old caches.<\/em><\/p>\n

        self.addEventListener(\u201cactivate\u201d, (event) => {<\/p>\n

        \u00a0\u00a0const currentCaches = [PRECACHE, RUNTIME];<\/p>\n

        \u00a0\u00a0event.waitUntil(<\/p>\n

        \u00a0\u00a0\u00a0\u00a0caches<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.keys()<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then((cacheNames) => {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return cacheNames.filter(<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(cacheName) => !currentCaches.includes(cacheName)<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then((cachesToDelete) => {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Promise.all(<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cachesToDelete.map((cacheToDelete) => {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return caches.delete(cacheToDelete);<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then(() => self.clients.claim())<\/p>\n

        \u00a0\u00a0);<\/p>\n

        });<\/p>\n

        M\u1ee5c \u0111\u00edch c\u1ee7a c\u00f4ng vi\u1ec7c n\u00e0y l\u00e0 x\u00f3a c\u00e1c b\u1ed9 nh\u1edb \u0111\u1ec7m cache c\u0169, gi\u1eefa l\u1ea1i c\u00e1c cache m\u1edbi v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 k\u00edch ho\u1ea1t service worker.<\/p>\n

        <\/span>X\u1eed l\u00fd l\u1ec7nh fetch nh\u01b0 th\u1ebf n\u00e0o?<\/strong><\/span><\/h3>\n

        \u0110o\u1ea1n code \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 x\u1eed l\u00fd l\u1ec7nh fetch:<\/p>\n

        \/*<\/em><\/p>\n

        \u00a0* The fetch handler serves responses for same-origin resources from a cache.<\/em><\/p>\n

        \u00a0* If no response is found, it populates the runtime cache with the response<\/em><\/p>\n

        \u00a0* from the network before returning it to the page.<\/em><\/p>\n

        \u00a0*\/<\/em><\/p>\n

        self.addEventListener(\u201cfetch\u201d, (event) => {<\/p>\n

        \u00a0\u00a0\/\/ Skip cross-origin requests, like those for Google Analytics.<\/em><\/p>\n

        \u00a0\u00a0if (event.request.url.startsWith(self.location.origin)) {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0event.respondWith(<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0caches.match(event.request).then((cachedResponse) => {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (cachedResponse) {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return cachedResponse;<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return caches.open(RUNTIME).then((cache) => {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return fetch(event.request).then((response) => {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Put a copy of the response in the runtime cache.<\/em><\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return cache.put(event.request, response.clone()).then(() => {<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return response;<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<\/p>\n

        \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})<\/p>\n

        \u00a0\u00a0\u00a0\u00a0);<\/p>\n

        \u00a0\u00a0}<\/p>\n

        });<\/p>\n

        Quy tr\u00ecnh x\u1eed l\u00fd l\u1ec7nh fetch nh\u01b0 sau:<\/p>\n

          \n
        • B\u01b0\u1edbc 1: Khi c\u00f3 request \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u t\u1eeb ph\u00eda tr\u00ecnh duy\u1ec7t n\u1ebfu URL kh\u00f4ng thu\u1ed9c c\u00f9ng trang web c\u00f3 th\u1ec3 b\u1ecf qua.<\/li>\n
        • B\u01b0\u1edbc 2: N\u1ebfu tr\u00f9ng URL c\u1ea7n th\u1ef1c hi\u1ec7n ki\u1ec3m tra b\u1ed9 nh\u1edb cache \u0111\u1ec3 xem \u0111\u00e3 c\u00f3 response t\u01b0\u01a1ng \u1ee9ng hay ch\u01b0a. Tr\u01b0\u1eddng h\u1ee3p t\u1ed3n t\u1ea1i tr\u1ea3 v\u1ec1 response \u0111\u00f3 cho tr\u00ecnh duy\u1ec7t.<\/li>\n
        • B\u01b0\u1edbc 4: Ng\u01b0\u1ee3c l\u1ea1i, g\u1eedi request l\u00ean server r\u1ed3i l\u1ea5y response tr\u1ea3 v\u1ec1.\u00a0<\/li>\n
        • B\u01b0\u1edbc 5: Th\u1ef1c hi\u1ec7n clone response r\u1ed3i l\u01b0u v\u00e0o RUNTIME cache \u0111\u1ec3 th\u1ef1c hi\u1ec7n cho l\u1ea7n request ti\u1ebfp theo, sau \u0111\u00f3 tr\u1ea3 v\u1ec1 response \u0111\u00f3 cho tr\u00ecnh duy\u1ec7t.<\/li>\n<\/ul>\n

          \u0110\u1ecdc th\u00eam<\/strong>: C\u00e1c V\u1ecb Tr\u00ed Trong Ng\u00e0nh C\u00f4ng Ngh\u1ec7 Th\u00f4ng Tin<\/p>\n

          <\/span>L\u1eddi k\u1ebft\u00a0<\/strong><\/span><\/h2>\n

          Tr\u00ean \u0111\u00e2y l\u00e0 to\u00e0n b\u1ed9 nh\u1eefng th\u00f4ng tin v\u1ec1 service worker l\u00e0 g\u00ec<\/strong> m\u00e0 Ch\u00fang t\u00f4i mu\u1ed1n chia s\u1ebb \u0111\u1ebfn b\u1ea1n \u0111\u1ecdc. Hy v\u1ecdng nh\u1eefng chia s\u1ebb tr\u00ean c\u1ee7a ch\u00fang t\u00f4i s\u1ebd gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 service worker v\u00e0 nh\u1eefng th\u00f4ng tin li\u00ean quan \u0111\u1ebfn n\u00f3.\u00a0<\/p>\n

          <\/p>\n

          <\/div>\n
          \n
          <\/div>\n<\/p><\/div>\n

          <\/p>\n

          <\/div>\n

          <\/p>\n

          <\/div>\n

          <\/p>\n

          \"t\u1ea3i\"t\u1ea3i<\/div>\n

          \n <\/div>\n","protected":false},"excerpt":{"rendered":"

          Service worker l\u00e0 g\u00ec? Khi l\u00e0m c\u00f4ng vi\u1ec7c service worker c\u1ea7n ch\u00fa \u00fd \u0111\u1ebfn nh\u1eefng v\u1ea5n \u0111\u1ec1 n\u00e0o? \u0110\u00e2y l\u00e0 m\u1ed9t trong s\u1ed1 nh\u1eefng th\u1eafc m\u1eafc c\u1ee7a nhi\u1ec1u b\u1ea1n \u0111\u1ecdc trong th\u1eddi gian g\u1ea7n \u0111\u00e2y khi nh\u1eafc \u0111\u1ebfn c\u00f4ng vi\u1ec7c service worker. \u0110\u1ec3 gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00f4ng vi\u1ec7c n\u00e0y, Ch\u00fang t\u00f4i \u0111\u00e3 […]<\/p>\n","protected":false},"author":1,"featured_media":7026,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[],"class_list":["post-4959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cong-nghe"],"_links":{"self":[{"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/posts\/4959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/comments?post=4959"}],"version-history":[{"count":1,"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/posts\/4959\/revisions"}],"predecessor-version":[{"id":7027,"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/posts\/4959\/revisions\/7027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/media\/7026"}],"wp:attachment":[{"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/media?parent=4959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/categories?post=4959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mhgvietnam.com\/en\/wp-json\/wp\/v2\/tags?post=4959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}