...
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/product-reviews.phtml
Cache name: product-reviewsnreviews
Use StaleWhileRevalidate strategy.
...
| 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
...