将VitePWA插件用于离线站点

Anthony Fu的VitePWA插件是通过离线功能增强基于Vite的网站的强大工具。此插件简化了添加服务工作者来处理离线支持，资产缓存和更新通知的过程。让我们探索服务工作者以及如何使用VitePWA实施他们。

了解服务人员

服务工作者是独立于您的Web应用程序运行的背景脚本。它的关键功能是拦截网络请求，实现各种操作。尽管能够进行复杂的任务，例如即时的打字稿汇编或视频转编码，但其最常见的用途是用于绩效增强和离线访问的缓存资产。

VitePWA创建了一个服务工作者，该服务工作者在初次访问时预先访问HTML，CSS和JavaScript文件。随后的访问从缓存中加载这些资源，从而消除了网络请求。即使在第一次访问中，随后的点击次数也经常加载预先播放的内容，从而显着提高速度。

版本控制和清单文件

当代码更改需要仔细版本操作时，管理服务工作者更新。构建系统通常会生成结合文件哈希的文件名（例如， foo-ABC123.js ）。更新导致新的文件名（例如， foo-XYZ987.js ）。服务人员必须有效处理这些更改。

服务工作者API是低级的。手动管理缓存文件很复杂。 Google库Wookbox简化了这一点，但仍需要您的构建过程中的详细资产信息。 VitePWA通过与工作箱集成并将其与Vite的构建输出一起自动配置来优雅地解决此问题。

使用VitePWA实施服务工作者

1. 安装：使用npm i vite-plugin-pwa安装插件。

2. Vite配置：导入并将插件添加到您的vite.config.js ：

   从“ vite-plugin-pwa”中导入{vitepwa};
   
   导出默认decteConfig（{
     插件：[vitepwa（）]，
     // ...其他配置
   }）;

3. 服务工作人员注册：在您的应用程序的入口点注册服务工作人员：

   导入{compistersw}来自“虚拟：pwa-register”;
   
   如果（Navigator中的“ ServiceWorker”）{
     registersw（）; //考虑为开发环境添加条件逻辑
   }

   registerSW功能处理服务工作者生命周期。有条件的逻辑（例如，不包括localhost ）可以防止在开发过程中激活服务工作者。

4. 离线功能： VitePWA提供的预播可以自动启用基本的离线功能。即使没有网络访问，也可以从高速缓存提供资产。有关更高级的离线功能（例如，使用索引db），需要自定义服务工作者逻辑。

服务工作者更新

当代码更改时，将生成具有更新的Pre-Cache清单的新服务工作者。旧的服务工作者继续运行，直到关闭所有选项卡并重新打开，以确保在会话之间保持一致的用户体验。

改进的更新处理与onNeedRefresh

registerSW函数允许更平滑的更新过程。当有新的服务工作者可用时，触发了onNeedRefresh回调，提供了通知用户并启动受控重新加载的机会：

 registersw（{
  Onneedrefresh（）{
    //向用户显示通知，提示他们更新
    // ...
  }
}）;

运行时缓存

VitePWA的workbox配置选项启用运行时缓存，以便在应用程序执行过程中获取资产。这将离线功能扩展到了预先曝光的资源之外：

 vitepwa（{
  工作箱：{
    runtimecaching：[ / * ...您的运行时缓存配置... * /]
  }
}））

添加自定义服务工作者代码

要合并自定义逻辑，请在workbox配置中使用importScripts选项以包含外部JavaScript文件：

 vitepwa（{
  工作箱：{
    importScripts：[“ sw-code.js”]
  }
}））

结论

VitePWA极大地简化了服务工作者的实施，为离线功能和增强性能提供了强大的基础。尽管高级功能需要自定义代码，但插件处理缓存和更新的复杂性，使开发人员可以专注于应用程序逻辑。从离线功能开始，并根据需要探索更多的高级服务工作者功能。

以上是将VitePWA插件用于离线站点的详细内容。更多信息请关注PHP中文网其他相关文章！