使用Service Worker缓存和显示GET请求

Question

因此，我在这方面是PWA和JS的新手，所以对我的问题和/或术语听起来很愚蠢感到抱歉... 我有一个 TYPO3 -扩展名 ajaxselectlist ，这是带有AJAX呼叫的简单选择列表，我想与Service Worker脱机。这是我的服务人员：

**sw.js**

var dataCacheName = 'pwa-typo3-dynamic-v1'; 
var cacheName = 'pwa-typo3-v2'; 
var filesToCache = [];

self.addEventListener('install', e => {
    e.waitUntil(
        caches.open(cacheName).then(cache => {
            return cache.addAll([
        '/',
        //HTML/JS        
        '/fileadmin/templates/index.html',
        '/fileadmin/templates/artikel.html',        
        '/fileadmin/templates/js/bootstrap.min.js',
        '/fileadmin/templates/js/holder.min.js',
        '/fileadmin/templates/js/custom.js',
        '/fileadmin/templates/js/jquery-slim.min.js',
        '/fileadmin/templates/js/popper.min.js',
        //CSS
         '/fileadmin/templates/css/bootstrap.min.css', 
         '/fileadmin/templates/css/blog.css',          
        //Fonts        
        //Images
      ])
                .then(() => self.skipWaiting());
        })
    )
});

self.addEventListener('fetch', (event) => {
  event.respondWith(async function() {
    const cache = await caches.open('pwa-typo3-dynamic-v1');
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) return cachedResponse;
    const networkResponse = await fetch(event.request);
    event.waitUntil(
      cache.put(event.request, networkResponse.clone())
    );
    return networkResponse;
  }());
});

self.addEventListener('activate', function (e) {
   console.log('[ServiceWorker] Activate');
   e.waitUntil(
     caches.keys().then(function (keyList) {
       return Promise.all(keyList.map(function (key) {
         if (key !== cacheName && key !== dataCacheName) {
           console.log('[ServiceWorker] Removing old cache', key);
           return caches.delete(key);
         }
       }));
     })
   );
   return self.clients.claim();
 });

带有AJAX调用的Ajax选择列表模板：

<f:layout name="Default"/>

<f:section name="main">

    <f:if condition="{optionRecords}">
        <f:then>
            <f:form
                    action="ajaxCall"
                    object="{optionRecord}"
                    name="optionRecord"
                    id="ajaxselectlist-form">
                    
                <f:form.select
                        options="{optionRecords}"
                        optionLabelField="title"
                        class="ajaxFormOption"
                        name="optionRecord"/>

                <f:form.hidden name="action" value="ajaxCall"/>
                <input type="hidden" name="type" value="{settings.typeNum}">
                <input type="hidden" name="L" value="{sysLanguageUid}">
            </f:form>
        </f:then>
        <f:else>
            <f:translate key="tx_ajaxselectlist_domain_model_optionrecord.noEntriesFound"/>
        </f:else>
    </f:if>


    <f:comment>The record entry is loaded inside this element.</f:comment>
    <div id="ajaxCallResult"></div>


    <script>
        jQuery(document).ready(function ($) {


            var form = $('#ajaxselectlist-form');
            var selectForm = $('.ajaxFormOption');
            var resultContainer = $('#ajaxCallResult');
            var service = {
                ajaxCall: function (data) {
                    $.ajax({
                        url: 'index.php',
                        cache: true, // default: false 
                        data: data.serialize(),

                        //success: function (result) {
                            //resultContainer.html(result).fadeIn('fast');
                            // IMPORTANT! When using a lightbox for images, you'll need to call it again after Ajax is done adding the new DOM to the document:
                            // $('.lightbox').magnificPopup({
                            //  type: 'image'
                            // });
                        //},
                        success: function(result) {
                            console.log(typeof(result));
                            resultContainer.html(result).fadeIn('fast');
                            },
                        error: function (jqXHR, textStatus, errorThrow) {
                            resultContainer.html('Ajax request - ' + textStatus + ': ' + errorThrow).fadeIn('fast');
                        }
                    });
                }
            };
            form.submit(function (ev) {
                ev.preventDefault();
                service.ajaxCall($(this));
            });
            selectForm.on('change', function () {
                resultContainer.fadeOut('fast');
                form.submit();
            });
            selectForm.trigger('change');
        });
    </script>

</f:section>

我只是不了解如何正确缓存XHR请求。结果似乎已被缓存，我的意思是HTML结构和内容： Not sure why it got content-lenght 0 though

我应该重写Service Worker还是AJAX调用，以使其在脱机时不执行？ 将不胜感激！非常感谢你！