如何使用Service Worker处理index.html文件的缓存?

问题描述 投票:0回答:1

我目前正在使用create-react-app默认服务工作程序来开发渐进式Web应用程序。

发布新的JavaScript块之一时,我在清除缓存时遇到问题。

[构建时,输出的javascript文件使用contenthash来确保JS文件中的内容更改时,文件名也更改。在没有服务工作者的情况下运行时,这可以成功清除缓存。

但是,当使用create-react-app服务工作者时,包括我的index.html文件的所有静态资产都被缓存。这意味着向用户提供了旧的index.html,其中包括我的旧缓存javascript文件的<script>标记,而不是更新后的contenthash的新标记。

我已经弹出并修改了webpack.config.js WorkboxWebpackPlugin以排除我的index.html文件:

 new WorkboxWebpackPlugin.GenerateSW({
      clientsClaim: true,
      exclude: [/\.map$/, /asset-manifest\.json$/, /index.html/],
      importWorkboxFrom: "cdn",
      navigateFallbackBlacklist: [
          // Exclude URLs starting with /_, as they're likely an API call
             new RegExp("^/_"),
          // Exclude URLs containing a dot, as they're likely a resource in
          // public/ and not a SPA route
            new RegExp("/[^/]+\\.[^/]+$")
          ]
        }),

并且这似乎适当地停止了对我的索引文件的缓存,从而允许其在脚本标签中包含更新的main.[contenthash].js。但是,现在我知道我的PWA将不能脱机工作,因为服务工作者不提供index.html文件,也不能从脱机连接中提供它。

处理此问题的最佳方法是什么?完全脱机访问不是essential,但很高兴,我想知道其他开发人员如何在不完全删除index.html从其缓存中删除index.html的情况下为其索引文件处理服务工作者缓存的“破坏”。服务人员?在包含内容散列的index.html重新标记中,它们是否具有更实用的功能来处理此更改?

谢谢

javascript reactjs service-worker create-react-app
1个回答
0
投票

仅在生产环境中启用服务工作者,例如npm run build的输出。建议您不要在开发环境中启用脱机优先服务工作者,因为当使用先前缓存的资产并且不包括您在本地进行的最新更改时,这会导致失败。

从-https://create-react-app.dev/docs/making-a-progressive-web-app/

热门问题
推荐问题
最新问题