Nuxt PWA前端硬刷新后未更新 新标签页打开需再次强制刷新求助
- 以下是我们的nuxt和nuxt-pwa配置。
- Nuxt pwa可识别新版本可用,我们会提示用户执行强制刷新/重载操作。
- 重载完成后新UI即可正常运行。
- 但如果在新标签页打开站点,会显示加载动画,无法加载最新前端内容,需要再次执行强制刷新。
- 访问localhost:8080时我们的前端默认重定向到/dashboard,该页面是从serviceworker的缓存数据中加载的。
- 该问题对我们属于严重问题,恳请协助解决。

新标签页打开时显示的加载动画:

export default { ssr: false, target: 'static', head: { titleTemplate: '', title: 'NocoDB', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: './favicon-32.png' } ] }, plugins: [ // plugins ], buildModules: [ '@nuxtjs/vuetify', '@nuxtjs/pwa' ], modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', 'vue-github-buttons/nuxt', '@nuxtjs/toast' ], axios: { baseURL: process.env.NC_BACKEND_URL || (process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080') }, router: { mode: 'hash', base: process.env.NODE_ENV === 'production' ? './' : '', middleware: ['auth'] }, vuetify: { defaultAssets: { icons: false }, optionsPath: '@/config/vuetify.options.js', treeShake: true, customVariables: ['./config/variables.scss'] }, build: { parallel: true, plugins: [ new MonacoEditorWebpackPlugin({ languages: ['sql', 'json', 'javascript'], features: ['!gotoSymbol'] }) ], extend(config, { isDev, isClient }) { if (isDev) { config.devtool = isClient ? 'source-map' : 'inline-source-map' } config.externals = config.externals || {} config.externals['@microsoft/typescript-etw'] = 'FakeModule' return config } }, pwa: { workbox: { assetsURLPattern: /\/_nuxt\//, config: { debug: true } }, icon: { publicPath: './' }, manifest: { name: 'NocoDB', start_url: '../?standalone=true', theme_color: '#ffffff' } } }
Lighthouse报告:
内容的提问来源于stack exchange,提问作者Pranav C Balan
相关产品推荐
相关产品推荐

