Service Worker Network-Only for a single route

如何解决Service Worker Network-Only for a single route

我有一个 Apache VirtualHost，它被配置为充当反向代理，以便在 React 应用程序和节点服务器之间切换请求

<IfModule mod_ssl.c>
<VirtualHost *:443>
    
        ProxyPreserveHost On

        ServerAdmin ###     
        ServerName url.dom
        ServerAlias www.url.dom
    
    
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        ProxyPass /img http://0.0.0.0:8081/img/
        ProxyPassReverse /img http://0.0.0.0:8081/img/

        <Location /api/>

        ProxyPass http://0.0.0.0:8081/api/
        ProxyPassReverse http://0.0.0.0:8081/api/

        Header unset etag 
        Header add Cache-Control "no-store"
        </Location>

        ProxyPass / http://0.0.0.0:5000/
        ProxyPassReverse / http://0.0.0.0:5000/


SSLCertificateFile /etc/letsencrypt/live/candycandy.filippotiberio.it/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/candycandy.filippotiberio.it/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
</IfModule>

这很完美。

在我的 React 应用程序中，我有一个路由器，它为包括 404-notFound 在内的所有路由提供服务。

...
              <Route exact path="/notfound">
                <Navbar />
                <Sidebar />
                <div class="E404">
                  <h1>Oops.</h1>
                  <small>404 - Not Found</small>
                  <br />
                  <Link to="/" className="b2h">
                    Go to Home
                  </Link>
                </div>
              </Route>

              <Route>
                <Redirect to="/notfound" />
              </Route>
            </Switch>
...

这也很完美...

我还有一个 manifest.json 和一个 service worker，它允许我像 PWA 一样安装应用程序。 这再次完美运行...

现在我遇到了问题： 我需要一个将用户重定向到 https://url.dom/api/google 的按钮，这并不难... 当我单击按钮时，请求被 service worker 拦截，该请求将其发送到 React 而不是服务器上的 apache。该请求由呈现 notFound 页面的 React 处理。 禁用 Service Worker 不会出现问题，但 PWA 需要安装 Service Worker 才能工作。

请求网址：https://candycandy.filippotiberio.it/api/googleoauth/

请求方式：GET

状态代码：200 OK（来自服务工作者）

推荐人政策：strict-origin-when-cross-origin

我可以告诉 Service Worker 仅针对特定路径将请求直接发送到网络而不是从缓存中选择吗？

我曾尝试做这样的事情：

// Listen for requests
self.addEventListener("fetch",(event) => {
  if (event.request.url.indexOf("/api/") !== -1) {
    return false;
  }

  event.respondWith(
    caches.match(event.request).then(() => {
      return fetch(event.request).catch(() => caches.match("offline.html"));
    })
  );
});

但它不起作用。

这是整个 Service Worker：

const CACHE_NAME = "version-2";
const urlsToCache = ["index.html","offline.html"];
const self = this;
// Install SWw
self.addEventListener("install",(event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log("Opened cache");
      return cache.addAll(urlsToCache);
    })
  );
});
// Listen for requests
self.addEventListener("fetch",(event) => {
  if (event.request.url.indexOf("/api/") !== -1) {
    return false;
  }

  event.respondWith(
    caches.match(event.request).then(() => {
      return fetch(event.request).catch(() => caches.match("offline.html"));
    })
  );
});
// Activate the SW
self.addEventListener("activate",(event) => {
  const cacheWhitelist = [];
  cacheWhitelist.push(CACHE_NAME);
  event.waitUntil(
    caches.keys().then((cacheNames) =>
      Promise.all(
        cacheNames.map((cacheName) => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      )
    )
  );
});

我知道这不是一个好问题，但我无法摆脱它。 非常感谢！