Question

我是PWA和服务人员的新手。我开始使用Pyramid应用程序测试工作箱，该应用程序提供了与Webpack 4捆绑在一起的预先应用程序。这是tryAddtoGr gr (MyParsedData !val1 !val2) = ...模板：

home.jinja2

SPA呼叫<!DOCTYPE html> <html lang="{{request.locale_name}}"> <head> ... <link href="{{request.static_url('app:static/app.css')}}" rel="stylesheet"> <script type="text/javascript" src="{{request.static_url('app:static/runtime.js')}}"></script> <script type="text/javascript" src="{{request.static_url('app:static/vendor.js')}}"></script> </head> <body> <div id="app"/> {% block scripts %} {% endblock %} <script type="text/javascript"> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); }); } </script> </body> </html>。我想提供网络初体验。这是webpack配置的一部分：

/api/v1/

生成的optimization: { runtimeChunk, }, output: { path: path.resolve(path.join(__dirname, '..', 'app', 'static')), }, plugins: [ new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: false, }), new ManifestPlugin({ publicPath: '', }), new WebpackCleanupPlugin({ exclude: [ 'robots.txt', ], }), new GenerateSW({ clientsClaim: true, skipWaiting: true, runtimeCaching: [ { urlPattern: /\//, handler: 'networkFirst', }, { urlPattern: /https:\/\/fonts.(?:googleapis|gstatic).com\/(.*)/, handler: 'staleWhileRevalidate', }, ], navigateFallback: '/app-shell', navigateFallbackBlacklist: [/^\/api/], templatedUrls: { '/app-shell': 'index.html', }, }), ],基本等于index.html布局（均包含散列的资产网址）。我面临的问题是，每当我对前端进行更改并部署它们时，一旦服务工作者的更新过程完成，浏览器就会请求新资产和旧资产（43f6a4e6是新资产）。

即使在24小时后，刷新也完全没有效果。我在每个部署上都删除了旧资产，因此所有对旧资产的请求都会出错，并显示空白页面。我暂时不得不将旧资产请求重定向到新资产。

我实施了此食谱https://developers.google.com/web/tools/workbox/guides/advanced-recipes#warm_the_runtime_cache，该站点已完全损坏。 Firefox显示数据损坏错误。任何想法将不胜感激。

清理金字塔提供的SPA中的旧工作箱缓存

0 个答案: