...
service-worker/static.phtml
Cache name: static
Route:
| Code Block |
|---|
new RegExp('<?= /* @noEscape */ $staticBaseUrl ?>.+\.(?:png|gif|jpg|jpeg|webp|svg|js|css|html|json|woff|woff2)$'), |
...
| Code Block |
|---|
new workbox.strategies.CacheFirst({
cacheName: 'static',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 300,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
}) |
Use CacheFirst strategy: https://developer.chrome.com/docs/workbox/modules/workbox-expiration/ with expiration time set to 30 days
Result: If there is an in the cache, it will served from the cache, otherwise there will be a network request and the response will be cached. An asset cache expires after 30 days. limit the number of entries in a cache to 300;
Detect requests for media files:
service-worker/media.phtml
Cache name: media
| Code Block |
|---|
new RegExp('<?= /* @noEscape */ $mediaBaseUrl ?>.+\.(?:png|gif|jpg|jpeg|webp|svg|js|css|html)$'), |
Use CacheFirst strategystrategies/#cache-first-cache-falling-back-to-network combined with workbox expiration plugin: https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-networkexpiration/ with expiration time set to 30 days
Result: If there is an in the cache, it will served from the cache, otherwise there will be a network request and the response will be cached. An asset cache expires after 30 days. limit the number of entries in a cache to 300;
Detect requests for media files:
service-worker/media.phtml
Cache name: media
Use CacheFirst strategy: combined with workbox expiration plugin: https://developer.chrome.com/docs/workbox/modules/workbox-expiration/ with expiration time set to 30 daysResult: If there is an in the cache, it will served from the cache, otherwise there will be a network request and the response will be cached. An asset cache expires after 30 days. Limit with expiration time set to 30 days and number of entries: 300
Mobile navigation
service-worker/mobile-navigation.phtml
Cache name: mobile-navigation
Use CacheFirst strategy and limit the number of entries in a cache to 300;Mobile navigation1.
Product reviews
service-worker/mobileproduct-navigationreviews.phtml
Cache name: mobile-navigation
| Code Block |
|---|
/navigation\/mobile\/index/, |
Use CacheFirst strategy and limit the number of entries in a cache to 1
service-worker/product-reviews.phtml: product-reviewsn
Use StaleWhileRevalidate strategy.
Result: Respond to the request with a cached response if available, falling back to the network request if it's not cached. The network request is then used to update the cache. https://developer.chrome.com/docs/workbox/modules/workbox-strategies/#stale-while-revalidate
| Info |
|---|
This is a fairly common strategy where having the most up-to-date resource is not vital to the application. |
service-worker/offline-pages.phtml
...