网络优先，用于预缓存，在工作箱 PWA 中

Question

我正在使用以下代码（从https://create-react-app.dev/docs/making-a-progressive-web-app/生成）

// in service-worker.js
precacheAndRoute(self.__WB_MANIFEST);

// Set up App Shell-style routing, so that all navigation requests
// are fulfilled with your index.html shell. Learn more at
// https://developers.google.com/web/fundamentals/architecture/app-shell
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
registerRoute(
  // Return false to exempt requests from being fulfilled by index.html.
  ({ request, url }) => {
    console.log(request, url)
    // If this isn't a navigation, skip.
    if (request.mode !== 'navigate') {
      return false;
    } // If this is a URL that starts with /_, skip.

    if (url.pathname.startsWith('/_')) {
      return false;
    } // If this looks like a URL for a resource, because it contains // a file extension, skip.

    if (url.pathname.match(fileExtensionRegexp)) {
      return false;
    } // Return true to signal that we want to use the handler.

    return true;
  },
  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
);

它确实有效，我可以离线并刷新页面。

但是，当我进行更改时，它不会更新页面。

使用 google workbox 时是否可以采用“网络优先”的方法进行预缓存？

Answer 1

我使用了这个可以构建的简单版本。

const routes = self.__WB_MANIFEST

// I don't I need this because I request everythng on initial load anyway
// precache(routes);

registerRoute(
  () => true,
  new NetworkFirst()
)