为了防止服务人员提出双重要求，应进行哪些更改? [英] What to change to prevent double request from service worker?

问题描述

请勿将其标记为重复项.这不是SO上其他类似问题的精确重复.它更具体且完全可重复.

1. 克隆

   ---

   或者，如果您要手动进行操作，请按照以下说明进行操作:

   1. yarn create-next-app app_name
   2. cd app_name&&纱线
   3. 在公用文件夹中，创建一个名为 service-worker.js 的文件，并粘贴以下代码:

     addEventListener("install"，(event)=> {self.skipWaiting();console.log(已安装Service worker！");});self.addEventListener("fetch"，(event)=> {event.respondWith((异步函数(){const promiseChain =提取(event.request.clone());//克隆没有区别event.waitUntil(promiseChain);//没有区别返回promiseChain;})());}); 

   4. 打开 pages/index.js 并在 import下面从"next/head"导入Head； 粘贴以下代码:

     if(导航器中的typeof窗口！=="undefined"&&"serviceWorker"){window.addEventListener("load"，function(){//可能需要检查一下sw是否已注册navigator.serviceWorker.register("/service-worker.js"，{作用域:"/"}).then(功能(注册){console.log("SW已注册:"，已注册)；}).catch(function(registrationError){console.log("SW注册失败:"，registrationError);});});} 

   5. yarn dev
   6. 转到 localhost:3000 并确保已在(F12)Applications/Service Workers下加载服务工作者
   7. 转到网络"标签，然后刷新页面几次.查看服务工作者如何针对每个请求发送两个请求

   ---

   我需要在 service-worker.js 代码中进行哪些更改，以确保没有重复请求?

   解决方案

   这是Chrome DevTools显示请求和预期的方式.

   从客户端JavaScript到Service Worker的资源请求，以及从Service Worker到服务器的请求.除非服务人员缓存了响应并且不需要检查服务器的更新，否则这种情况将始终发生.

   Please do not mark as duplicate. This is not an exact duplicate of the other similar questions here on SO. It's more specific and fully reproducible.

   1. Clone this repo.
   2. yarn && yarn dev
   3. Go to localhost:3000 and make sure under (F12)->Applications->Service workers, the service worker is installed.
   4. Go to Network tab and refresh a few times(F5)
   5. Observe how the network requests are doubled.

   Example of what I see:

   ---

   Or if you want to do it manually follow the instructions below:

   1. yarn create-next-app app_name
   2. cd app_name && yarn
   3. in public folder, create file called service-worker.js and paste the following code:

   addEventListener("install", (event) => {
     self.skipWaiting();
     console.log("Service worker installed!");
   });
   
   self.addEventListener("fetch", (event) => {
     event.respondWith(
       (async function () {
         const promiseChain = fetch(event.request.clone()); // clone makes no difference
         event.waitUntil(promiseChain); // makes no difference
         return promiseChain;
       })()
     );
   });
   

   4. open pages/index.js and just below import Head from "next/head"; paste the following code:

   if (typeof window !== "undefined" && "serviceWorker" in navigator) {
     window.addEventListener("load", function () {
       // there probably needs to be some check if sw is already registered
       navigator.serviceWorker
         .register("/service-worker.js", { scope: "/" })
         .then(function (registration) {
           console.log("SW registered: ", registration);
         })
         .catch(function (registrationError) {
           console.log("SW registration failed: ", registrationError);
         });
     });
   }
   

   5. yarn dev
   6. go to localhost:3000 and make sure the service worker has been loaded under (F12)Applications/Service Workers
   7. Go to the Network tab and refresh the page a few times. See how the service worker sends two requests for each one

   ---

   What do I need to change in the service-worker.js code so that there are no double requests?

   解决方案

   This is how Chrome DevTools shows requests and is expected.

   There is a request for a resource from the client JavaScript to the Service Worker and a request from the Service Worker to the server. This will always happen unless the service worker has the response cached and does not need to check the server for an update.

   这篇关于为了防止服务人员提出双重要求，应进行哪些更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！