Ajax "GET" to intra-service >> CMS serviceworker 离线时回答OK

Question

下午好，

我们正在使用开源 CMS。我们升级的上一个版本，它带有一个新功能，即 javascript serviceworker 实现来处理所有请求。

此 CMS 有一些用户交互的工作流表单（由我们设计）。在设计时，你可以在它们上面添加一些自定义的 html 作为一个特殊的片段元素，它可以容纳所有你想要的 JS，HTML 和 CSS 代码。

我们创建了一个按钮，单击该按钮后，将 $.get() 发送到 Python Flask 服务器，我们在同一机器实例 (https://localhost:5000) 上拥有 online/active /).

对于升级前的旧 CMS 版本（上面没有 serviceworker），如果我们停止 Flask 服务器，在按钮上单击 $.get() 我们会收到预期的错误 (404/500)，因此我们可以用 ".fail()" jQuery 部分来处理它。但如果 Flask 处于活动状态，我们将在“.done()”部分处理它。

现在，碰巧一切都落在“.done()”上，因为即使它应该失败（因为 Flask 处于离线状态），serviceworker 也会“中间捕获”它并以 OK (200) 解决：

当实际服务器关闭时：

那么，我们如何才能避免 serviceworker 捕获 ajax 调用，因为我们知道我们无法以任何方式更改 serviceworker 代码？我们能否以某种方式扩展它，在“fetch”侦听器上添加针对“/api”url 的验证只是“return;”？

这是捕捉点，正如 Chrome 所说：

还有一段函数代码：

self.addEventListener('fetch', function (event) {
//
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
    return;
}

var fetchRequest = event.request.clone();

event.respondWith(
    fetch(fetchRequest)
    .then(function (response) {
        //redirect links eg. /jw/home, userview root url, are of response.type 'opaqueredirect', and possibly response.status != 200
        //it is generally not a good idea to cache redirection because the content (target of redirection) might be changed
        //https://medium.com/@boopathi/service-workers-gotchas-44bec65eab3f
        //but without this the top-right home button (/jw/home) will never be cached and will always show offline page when being accessed offline
        //if (!response || response.status !== 200 || response.type !== 'basic' || event.request.method !== 'GET') {
        if (!response || event.request.method !== 'GET') {
            return response;

        } else {
            if(fetchRequest.url.indexOf('/web/json/workflow/currentUsername') === -1 
                    && fetchRequest.url.indexOf('/images/v3/cj.gif') === -1
                    && fetchRequest.url.indexOf('/images/favicon_uv.ico?m=testconnection') === -1){
                var responseToCache = response.clone();
                caches.open(cache)
                    .then(function (cache) {
                        cache.put(event.request, responseToCache);
                    });
            }
        }
        
        return response;
    })
    .catch(function () {
        if(event.request.method === 'POST' && formData !== null){
            console.log('form POST failed, saving to indexedDB');

            savePostRequest(event.request.clone().url, formUserviewAppId, formPageTitle, formData, formUsername);

            //redirect instead
            var response = Response.redirect(self.registration.scope + '/_/pwaoffline', 302);
            return response;

        }else{

            if(fetchRequest.url.indexOf('/images/favicon_uv.ico?m=testconnection') > -1){
                //var response = new Response(new Blob(), { "status" : 404 });
                return null;
            }

            return new Promise(function(resolve, reject) {
                caches.match(event.request).then(function(response){
                    if(response === undefined){
                        var offlineResponse = Response.redirect(self.registration.scope + '/_/offline', 302);
                        resolve(offlineResponse);
                    }else{
                        resolve(response);
                    }
                })
            });                

        }
    })
);

});

非常感谢和问候。

Answer 1

好吧，没有答案。好的

因此，如果有人感兴趣，我会解释我是如何解决它的。基本上，有了“牛仔竞技表演”：

无法更改 serviceworker 的功能（因为它是第三方软件，我无法编辑）。
所以唯一的方法是每次都“避免缓存”，每次 ajax 调用时都使用“缓存：false”。
这样 SW 就无法提供页面的“离线”版本，即使在线，我也不会每次都收到真实页面（缓存，但真实）。
因此，在调用 .done() 和 .fail() 时，一切都会转到“done()”（因为所有都是 200 OK），但我会检查那里的响应内容，就像过去一样。 .. 这样，如果服务器在线，它会使用正确的预期响应解析真正的 200 OK。但如果它处于离线状态，因为我使用“缓存：false”参数，即使使用 SW OK 200，响应也不会附带真正期望的响应文本。所以条件失败，我可以将其视为真正的 404。

很简单，仅此而已。

Ajax "GET" to intra-service >> CMS serviceworker 离线时回答OK

Ajax "GET" to intra-service >> CMS serviceworker answers OK when OFFLINE

javascript

ajax

request

flask

service-worker