如何將 PWA 添加到不是使用 Vue CLI 創建的 Vue.js 3 應用程序？

Question

我知道在 Vue.js 上啟用 PWA 的首選插件是@vue/cli-plugin-pwa ，但這似乎適用於使用vue-cli及其版本的 Webpack + Workbox 創建的項目。

我有一個Vue.js 3應用程序，它是在不使用vue-cli的情況下制作的。 也就是說，該項目是從頭開始創建的， Webpack 5是單獨安裝的。

我是否仍然使用 vue vue-cli中的vue add pwa在此應用程序上啟用 PWA，還是必須使用像這樣的指南逐步手動添加它？

Answer 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的更多信息。