如何将 PWA 添加到不是使用 Vue CLI 创建的 Vue.js 3 应用程序？

Posted 2023-03-10

【中文标题】如何将 PWA 添加到不是使用 Vue CLI 创建的 Vue.js 3 应用程序？

【英文标题】：How to add PWA to Vue.js 3 app not created with Vue CLI?

【发布时间】：2021-06-16 21:53:20

【问题描述】：

我了解在 Vue.js 上启用 PWA 的首选插件是 @vue/cli-plugin-pwa，但这似乎适用于使用 vue-cli 及其版本的 Webpack + Workbox 创建的项目。

我有一个不使用vue-cli 的Vue.js 3 应用程序。也就是说，该项目是从头开始创建的，Webpack 5 是单独安装的。

我是否仍使用 vue-cli 中的 vue add pwa 在此应用上启用 PWA，还是必须使用 this one 之类的指南手动逐步添加？

【参考方案1】：

您可以使用 Workbox CLI 工具在任何项目中添加 PWA。

全局安装 Workbox CLI：

npm install workbox-cli --global

使用向导在您的分发 (dist) 文件夹中设置工作箱。

workbox wizard

在主入口点 html 文件 (index.html) 中添加 service worker。

  <script defer="defer">
    if ('serviceWorker' in navigator) 
      window.addEventListener('load', () => 
        navigator.serviceWorker.register('/sw.js');
      );
    
  </script>

构建 Vue 项目，然后通过运行构建工作箱 pwa：

workbox generateSW workbox-config.js

你就完成了！

注意：要自动化构建过程，请在您的 package.json 文件中添加以下脚本。

    "build:pwa": "vue-cli-service build && workbox generateSW workbox-config.js",

现在您可以使用 pwa 构建项目：

npm run build:pwa

详细了解Workbox CLI。