...
Service workers occur on their own threads. This means service workers' tasks won't compete for attention with other tasks on the main thread.
Debugging service worker
...
Workbox
Why do we use workbox?
There's lots of complex interactions that are hard to get right [in service workers APi and logic]. Workbox is a set of modules that simplify common service worker routing and caching. Each module available addresses a specific aspect of service worker development. Workbox aims to make using service workers as easy as possible, while allowing the flexibility to accommodate complex application requirements where needed. https://developer.chrome.com/docs/workbox/what-is-workbox/
How service worker is composed in MageSuite
Registration
Before the body end register service worker template is added:
...
| Code Block |
|---|
<?php
/** @var $block \MageSuite\Pwa\Block\Data */
$url = $block->getBaseUrl() . 'service-worker.js';
?>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('<?= /* @noEscape */ $url ?>');
}
</script>
|
service-worker.js file
pwa_serviceworker_index.xml layout composes service worker script ( service-worker.js ) with smaller templates.
templates/service-worker.phtml - parent template
Service worker file chunks
Import workbox script
service-worker/workbox.phtml - import workbox script and set optional debug mode (can be configured in the admin panel)
...
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-strategies/#cache-first-cache-falling-back-to-network combined with workbox expiration plugin: https://developer.chrome.com/docs/workbox/modules/workbox-expiration/ with expiration time set to 30 days
...
service-worker/media.phtml
Cache name: media
...
Use CacheFirst strategy: https: //developer.chrome.com/docs/workbox/modules/workbox-strategies/#cache-first-cache-falling-back-to-network 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 navigation
service-worker/mobile-navigation.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
service-worker/offline-pages.phtml1.
Product reviews
service-worker/product-reviews.phtml
Cache name: product-reviews
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. |
Offline pages
service-worker/offline-pages.phtml
when a page is reloaded navigation request is added to offline-pages cache for 1 hour.
Cache name: offline-pages
Offline fallback
service-worker/offline-fallback.phtml
Result: Display offline page when a user if offline;
Example of composer service-worker script: https://demo.magesuite.io/service-worker.js
Debugging workbox
...
Manifest
pwa_manifest_index.xml layout adds a link to manifest.json, which is generated based on admin configuration
...