測試漸進式 Web 應用程式

  • 5 分鐘

您擁有 Web 應用程式，且其已發佈至 Azure。 現在您可以確定其能作為漸進式 Web 應用程式來運作。

設定漸進式 Web 應用程式

在大部分的情況下，Vue CLI 已經建立您需要要用於漸進式 Web 應用程式的檔案。 如果您查看 /public/images/icons 資料夾，將會發現現成圖示，讓使用者可以在桌面上為應用程式建立書簽。 建置程序也會建立 service-workers.js 檔案，以啟動負責處理離線功能的服務程式。 藉由再將一個檔案新增至應用程式，以確定真的可以建立服務程式：vue.config.js 檔案。

將名為 vue.config.js 的新檔案新增至 Web 應用程式的根目錄。 這個檔案可協助 Webpack 篩選會阻止建立服務程式的檔案。

在該檔案中新增下列程式碼。

module.exports = {
    pwa: {
        workboxOptions: {
            exclude: [/\.map$/, /web\.config$/],
        },
    },
};

現在，當您將程式碼推送至 GitHub 並加以建置時，系統就應該會建立服務程式。 您可以使用開發人員工具來判斷頁面的 Lighthouse 分數，這是量測漸進式 Web 應用程式效能的好方法。

lighthouse score.

測試應用程式

若要測試您的 Lighthouse 分數，請在瀏覽器中開啟 Web 應用程式，然後開啟 [開發人員工具]。 瀏覽至 [稽核]，並建立 Web 應用程式的稽核報告。 您可以在 [開發人員工具] 區域中選取 [應用程式]，然後選取 [服務程式]，來測試其離線功能。 按一下 [離線] 核取方塊以讓應用程式離線，然後試用應用程式。 模型應該會正確執行推斷，彷彿其正在線上運作。

嘗試在自訂視覺 AI 中使用全新的影像建置新的模型來進行測試和驗證，然後透過建置程序再次載入模型。 服務程式應該會發現有新模型的出現，並在主控台中警示有新模型存在。 當您重新整理畫面時，應該就會出現新的模型。