service-worker.js.phtml

<?php
/**
 * Copyright © Monsoon Consulting. All rights reserved.
 * @license   Open Software License ("OSL") v. 3.0
 */

/** @var $block \Magento\Framework\View\Element\Template */
/** @var $viewModel Monsoon\Pwa\ViewModel\ServiceWorker */

$viewModel = $block->getViewModel();
?>
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

const SW_VERSION = <?= $block->escapeJs($viewModel->getSwVersion()) ?>;
const CACHE_LIFETIME = <?= $block->escapeJs($viewModel->getCacheLifetime()) ?>;
const {registerRoute, NavigationRoute, setDefaultHandler, setCatchHandler} = workbox.routing;
const {CacheFirst, NetworkOnly, StaleWhileRevalidate} = workbox.strategies;
const {CacheableResponsePlugin} = workbox.cacheableResponse;
const {ExpirationPlugin} = workbox.expiration;

<?php if ($viewModel->isSkipWaitingEnabled()): ?>
const {skipWaiting} = workbox.core;
skipWaiting();
<?php endif ?>

<?php if ($viewModel->isClientsClaimEnabled()): ?>
const {clientsClaim} = workbox.core;
clientsClaim();
<?php endif ?>

/**
 * Pre-cache fallback responses
 * https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offline_page_only
 */
const OFFLINE_CACHE_NAME = 'offline-html';
const OFFLINE_FALLBACK_HTML_URL = '<?= $block->escapeUrl($viewModel->getOfflinePageUrl()) ?>';

/**
 * Populate the cache with the offline HTML page when the service worker is installed.
 */
self.addEventListener('install', async (event) => {
    event.waitUntil(
        caches.open(OFFLINE_CACHE_NAME)
            .then((cache) => cache.add(OFFLINE_FALLBACK_HTML_URL))
    );
});

workbox.navigationPreload.enable();

const networkOnly = new NetworkOnly();

/**
 * Attempt a network request. If it fails, return the cached HTML.
 */
const navigationHandler = async (params) => {
    try {
        return await networkOnly.handle(params);
    } catch (error) {
        return caches.match(OFFLINE_FALLBACK_HTML_URL, {
            cacheName: OFFLINE_CACHE_NAME,
            plugins: [
                new CacheableResponsePlugin({
                    statuses: [0, 200]
                }),
                new ExpirationPlugin({
                    maxAgeSeconds: CACHE_LIFETIME,
                    maxEntries: 1
                })
            ]
        });
    }
};

/**
 * Register this strategy to handle all navigations.
 */
registerRoute(new NavigationRoute(navigationHandler));

<?php if ($viewModel->isGaOfflineEnabled()): ?>
workbox.googleAnalytics.initialize();
<?php endif ?>

<?php if ($viewModel->isCacheStaticAssetsEnabled()): ?>
registerRoute(
    /^(.*)(static)(.*)(.(png|jpeg|jpg|gif|svg|css|js|woff|woff2|ttf|eot|ico|json))$/,
    new StaleWhileRevalidate({
        cacheName: 'static-assets',
        plugins: [
            new CacheableResponsePlugin({
                statuses: [0, 200]
            }),
            new ExpirationPlugin({
                maxAgeSeconds: CACHE_LIFETIME,
                maxEntries: 1000
            })
        ]
    })
);
<?php endif ?>

<?php if ($viewModel->isCacheMediaAssetsEnabled()): ?>
registerRoute(
    /^(.*)(media)(.*)(.(png|jpeg|jpg|gif|css|js|svg|pdf))$/,
    new StaleWhileRevalidate({
        cacheName: 'media-assets',
        plugins: [
            new CacheableResponsePlugin({
                statuses: [0, 200]
            }),
            new ExpirationPlugin({
                maxAgeSeconds: CACHE_LIFETIME,
                maxEntries: 5000
            })
        ]
    })
);
<?php endif ?>

<?php if ($viewModel->isCacheGoogleFontsEnabled()): ?>
/**
 * Cache fonts
 * https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts
 */
registerRoute(function (_ref) {
    var url = _ref.url;
    return url.origin === 'https://fonts.gstatic.com';
}, new CacheFirst({
    cacheName: 'google-fonts-webfonts',
    plugins: [
        new CacheableResponsePlugin({
            statuses: [0, 200]
        }),
        new ExpirationPlugin({
            maxAgeSeconds: CACHE_LIFETIME,
            maxEntries: 30
        })
    ]
}));

registerRoute(
    function (_ref) {
        var url = _ref.url;
        return url.origin === 'https://fonts.googleapis.com';
    },
    new StaleWhileRevalidate({
        cacheName: 'google-fonts-stylesheets',
        plugins: [
            new CacheableResponsePlugin({
                statuses: [0, 200]
            }),
            new ExpirationPlugin({
                maxAgeSeconds: CACHE_LIFETIME,
                maxEntries: 30
            })
        ]
    })
);
<?php endif ?>

<?php if ($block->getChildHtml()): ?>
    <?= $block->getChildHtml() ?>
<?php endif ?>