Service Workers: Caching Strategies u0026 Offline Support Quiz Quiz

Assess your understanding of service workers, caching strategies, and offline support techniques. Explore key principles and best practices for managing resources and enabling offline access in modern web applications.

1. Strategy Selection

   Which caching strategy is most suitable for serving a blog's static assets like CSS and images to ensure fast repeat visits?

   1. Stale While Revalidate
   2. Network First
   3. Cache Only
   4. Cache First

   Explanation: Cache First is ideal for static assets because it quickly delivers resources from the cache on subsequent visits, ensuring fast load times. Network First is better for data that must be current, such as dynamic content. Stale While Revalidate offers fresh content eventually, but users might see outdated assets. Cache Only fails if the resource was not previously cached, risking missing files for first-time visitors.

2. Updating Cached Content

   When using a service worker, how can you ensure users receive updated cached assets after deploying a new version of your website?

   1. Set assets to 'private' in headers
   2. Update browser cookies automatically
   3. Disable caching in the service worker
   4. Change the cache name or version

   Explanation: Changing the cache name or version triggers the service worker to create a new cache and replace older assets, ensuring users receive updates. Setting headers to 'private' controls proxy caching, not client storage. Disabling caching prevents offline support rather than refreshing assets. Updating cookies does not influence service worker cache contents.

3. Offline Fallbacks

   If a network request for a page fails and is not in cache, what is a best practice for providing a good offline experience using a service worker?

   1. Redirect to the homepage
   2. Serve a custom offline HTML fallback
   3. Show a browser error page
   4. Return a 404 response

   Explanation: Serving a custom offline HTML page gives users a helpful message or limited functionality when the requested resource is unavailable. Simply displaying a browser error or a 404 response is less user-friendly. Redirecting to the homepage might confuse users when they are offline. A custom fallback improves the perceived reliability of the site.

4. Dynamic vs. Static Caching

   Which approach describes caching resources only after they are first requested, such as user profile pictures visited during a session?

   1. Cold caching
   2. Pre-caching
   3. Cache priming
   4. Runtime caching

   Explanation: Runtime caching stores resources in the cache the first time they are requested, which is ideal for content that can't be predicted ahead of time. Pre-caching saves known assets during service worker installation. Cache priming refers to populating the cache in advance for expected usage. Cold caching is not a standard caching term and is incorrect.

5. Cache Storage Limits

   What is a practical reason to periodically remove old or unused items from a service worker's cache?

   1. To prevent exceeding storage limits imposed by the browser
   2. To increase the number of service worker threads
   3. To speed up JavaScript execution
   4. To reduce network latency

   Explanation: Browsers often limit how much data can be stored via the service worker cache, so removing outdated items helps prevent quota issues and ensures space for new content. Reducing network latency is handled by effective caching strategies, not cache eviction. Cleaning up cache does not affect JavaScript processing speed or service worker thread management.