Очистить старый кеш рабочего ящика в SPA, обслуживаемом Pyramid - PullRequest
0 голосов
/ 30 июня 2018

Я новичок в PWA и сервисных работниках. Я начал тестировать рабочий ящик с приложением Pyramid, которое обслуживает приложение preact в комплекте с веб-пакетом 4. Это шаблон home.jinja2:

<!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>

СПА звонит на /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 в основном равен макету home.jinja2 (оба содержат URL-адреса хэшированных активов). Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я делаю изменения во внешнем интерфейсе и внедряю их, после завершения процесса обновления работника службы браузер запрашивает как новые, так и старые ресурсы (43f6a4e6 - это хэш нового активы).

network_requests

Обновление не действует вообще, даже через 24 часа. Я удаляю старые ресурсы при каждом развертывании, поэтому все запросы к старым ресурсам выдают ошибку и отображается пустая страница. Мне временно пришлось перенаправить старые запросы активов на новые.

Я реализовал этот рецепт https://developers.google.com/web/tools/workbox/guides/advanced-recipes#warm_the_runtime_cache и сайт полностью сломан. Firefox отображает ошибку данных. Любые идеи будут высоко ценится.

...