如何检查 s-s-r Nuxt 应用程序中的服务器构建是不是已更新

Posted 2023-02-22

【中文标题】如何检查 s-s-r Nuxt 应用程序中的服务器构建是不是已更新

【英文标题】：How to check if server build has been updated in s-s-r Nuxt application如何检查 s-s-r Nuxt 应用程序中的服务器构建是否已更新

【发布时间】：2022-01-08 00:47:03

【问题描述】：

如果浏览器中的 s-s-r Nuxt 应用程序与服务器端构建不兼容，我不知道如何解决问题，因为构建已更新。这意味着用户在浏览器中有旧版本的应用程序，需要刷新页面。我发现了这样的东西：https://dev-clone.nuxtjs.app/alejandroakbal/632139

所以我在插件目录中创建了 pwa-update.js 文件并将其注册到 nuxt.config.js 中。 但我在控制台中看不到任何 console.log() 。不明白如何使用它，以及它是否是正确的方法。

实现看起来像pwa-update.js

export default async (context) => 
  const workbox = await window.$workbox;

  if (!workbox) 
    console.debug("Workbox couldn't be loaded.");
    return;
   else 
    console.log('Workbox has been loaded.');  // Dont see any message.
  

  workbox.addEventListener('installed', (event) => 
    if (!event.isUpdate) 
      console.log('The PWA is on the latest version.');
      return;
    

    console.log('There is an update for the PWA, reloading...');
    // window.location.reload();
  );
;

nuxt.config.js

plugins: [
   src: '~/plugins/pwa-update.js', mode: 'client' ,
],

【问题讨论】：

我有点困惑，请澄清一下。结果是针对特定于 PWA 应用程序的，您的网站是 PWA 还是 s-s-r？如果是 s-s-r，则不需要手动更新，因为所有内容都在服务器端呈现。

是的，它是 s-s-r。所以你说它不是必需的，因为所有（我不确定是否真的全部）这些东西都是在服务器上生成的？

【参考方案1】：

如果您在开发构建过程中使用 Workbox 重新生成 Service Worker，则每次构建后都会安装一个新的 Service Worker。您可以在浏览器的开发工具中检查这一点。我相信工作箱会生成服务工作者调用skipWaiting()，以便立即安装新的服务工作者。

客户端应该自动获取新资源，因为 webpack JS 块名称更改（假设您使用的是 webpack，它生成的 JS 块在每次新构建后都会获取新名称，用于缓存清除目的）和服务工作者版本更改（工作箱自动增加服务工作者版本，也破坏了缓存）。换句话说，无论是否 s-s-r，只要您使用 Workbox 为您生成 Service Worker，您就无需担心任何版本不匹配。

【讨论】：

对不起，但不明白。 s-s-r 应用程序是否真的不需要它，因为一切都是在服务器上生成的？

不管s-s-r如何都不需要。即使您没有使用 s-s-r，workbox 也会确保您的服务工作者在您推送更新时在您的客户端上更新。只需确保在每次构建时都重新生成服务人员。对于你的 UI，因为你的 webpack 块名称会在你编辑你的 JS 时改变，所以这些新块将在每次构建后首次加载时被你的服务工作者预缓存。

我在 React 中执行此操作的方式是在我的构建脚本之后运行 && workbox injectManifest workbox-config.js。这样每次我构建时，workbox 都会生成一个新的 service-worker。然后当我访问我的应用程序时，新的 service worker 会立即安装并预缓存我最近构建的新生成的 webpack JS 块。

抱歉，“在每次构建时重新生成服务人员”是什么意思？我不明白这是什么意思。构建是纱线构建的简单调用。还不够吗？

你正在制作一个 PWA，它有一个由 workbox 生成的 javascript 服务工作者？正确的？ Workbox 让您编写代码来生成生产服务工作者。 service worker 不只是通过 yarn build 自动构建自己。你必须告诉它重建。所以你在你的构建脚本中添加一个像上面这样的行并创建一个像 workbox-config.js 这样的配置文件来告诉工作箱在哪里可以找到你的服务工作者代码以及在哪里放置生成的代码。然后在每次构建时，都会重新生成 service worker，这将为您销毁缓存。