Latihan 1 dari materi Service Worker Caching di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Lengkapi class CacheStrategy di kode awal dengan tiga method. Cache-nya sebuah Map (key url, value data), dan network-nya pura-pura: hasil ambil dari network untuk url apa pun adalah string "fetched:" + url, misalnya "fetched:/api/news". Tiap method mengembalikan object dengan dua key, berurutan source lalu data.
cacheFirst(url, cache): kalau cache.has(url), kembalikan { source: "cache", data: cache.get(url) }. Kalau gak ada, simpan "fetched:" + url ke cache dengan cache.set, lalu kembalikan { source: "network", data: "fetched:" + url }.networkFirst(url, cache): network di latihan ini selalu online, jadi selalu ambil dari network: simpan "fetched:" + url ke cache, lalu kembalikan { source: "network", data: "fetched:" + url }. Isi cache yang lama gak dipakai, tapi ditimpa dengan yang baru.staleWhileRevalidate(url, cache): kalau ada di cache, kembalikan isi lama { source: "cache", data: <isi cache> } lalu perbarui cache dengan "fetched:" + url. Kalau gak ada, sama seperti cache first: simpan, lalu kembalikan { source: "network", data: "fetched:" + url }.Yang dicek:
new CacheStrategy().cacheFirst("/img/logo.png", new Map()) mengembalikan { source: "network", data: "fetched:/img/logo.png" }new CacheStrategy().networkFirst("/api/news", new Map()) mengembalikan { source: "network", data: "fetched:/api/news" }new CacheStrategy().staleWhileRevalidate("/profile", new Map()) mengembalikan { source: "network", data: "fetched:/profile" }cacheFirst("/css/main.css", c) dipanggil dua kali dengan Map yang sama, dan panggilan kedua harus { source: "cache", data: "fetched:/css/main.css" }.networkFirst dengan Map yang sudah berisi "old" untuk "/api/news" tetap mengembalikan { source: "network", ... }, dan isi cache-nya jadi "fetched:/api/news".staleWhileRevalidate dengan Map yang sudah berisi "old" untuk "/profile" mengembalikan { source: "cache", data: "old" }, dan isi cache-nya jadi "fetched:/profile"."cached-font" untuk "/fonts/roboto.woff2", dan cacheFirst harus mengembalikan { source: "cache", data: "cached-font" }, isinya apa adanya.Baris const cache, const strategy dan console.log di kode awal biarkan saja.
