使用PWA

问题描述

我刚刚将应用程序移到了vue cli，但是我在使PWA正常工作方面遇到了问题。当它试图加载它时，出现控制台错误

未捕获（承诺）的错误响应响应时间：错误的响应响应响应时间:: [{“ URL”：“ / wwwroot / index.html？ WB_REVISION = xxxxxxx”，“状态” ：404}]

我不是很确定这个错误是从哪里来的。实际的父级可以很好地加载，并且所有断言都可以，但是PWA index.html似乎是从错误的位置加载的。它在/index.html中而不是/ wwwrooot / html中。我不确定为什么要尝试从这里加载。这就是vue.config的样子

pwa: {
    name: 'app Portal',themeColor: '#CC0001',msTileColor: '#CC0001',appleMobileWebAppCapable: 'yes',appleMobileWebAppStatusBarStyle: 'black',workBoxOptions: {
        exclude: /\.cshtml$/,/*
            docs: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#skip_the_waiting_phase
            a new service worker does not serve pages until the old one releases control
            this is called the waiting phase

            skipwaiting means the new one immediately takes control. this may cause issues with people still using your application
        */
        skipwaiting: true,},

``

有什么想法为什么PWA似乎从错误的位置加载了index.html？

解决方法

我使用pwa webpack配置navigatefallback来解决此问题，请参阅：https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generateSW-navigateFallback

在vue路由器上启用历史记录模式后，pwa也会失败：

以下是我认为可以正确引导您的一些问题：

PWA doesn't load when router is in history mode (Vue CLI 3 based project)

和

Vue Router History Mode with PWA in Offline Mode