Workbox is not working and nothing show up in cache

Question

I have added service worker and workbox as following In template file:

<script type="text/javascript">
    (function () {
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker
                .register('sw.js')
                .then(function(registration) {
                    console.log('Service Worker registration successful with scope: ',
                        registration.scope);
                })
                .catch(function(err) {
                    console.log('Service Worker registration failed: ', err);
                });
        }
    })();
</script>

And in sw.js, I have

importScripts('workbox-sw.prod.v2.1.2.js');

const workboxSW = new WorkboxSW();
if (workboxSW) {
    console.log('Yay! workboxSW is loaded');
    const staleWhileRevalidateStrategy = workboxSW.strategies.staleWhileRevalidate();
    workboxSW.router.registerRoute('/*\.css/', staleWhileRevalidateStrategy);
} else {
    console.log('Boo! workboxSW didn\'t load');
}

I can see in the console log that "Service Worker registration successful" and "Yay! workboxSW is loaded". But I don't see anything under cache storage (Application -> Cache Storage). How can I update it so that I can see cache content by the service worker?