Flutter Web：发布后缓存未清除导致旧内容持续存在

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

Flutter Web 应用程序最大的问题之一是浏览器在部署后无法正确清除缓存。这使得用户即使在更新 Web 应用程序后也可以查看旧内容。我不知道为什么浏览器会保留这些旧数据，这会导致加载旧的应用程序资源（如 javascript、css 文件或图像）而不是新安装的版本。浏览器不会从服务器请求更新的文件，而是继续接收这些旧的缓存版本。

HTML 代码：


<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="This Flutter project is about a fruit supermarket side admin">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="shndz_panel">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>shndz</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = {{flutter_service_worker_version}};

  </script>

</head>
<body>
<script src="flutter_bootstrap.js" async></script>
<!--<script src="flutter_bootstrap.js" async></script>-->
<script>
  {{flutter_js}}
  {{flutter_build_config}}

  function launchFlutter() {
    // Download main.dart.js
    _flutter.loader.load({
        serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
            engineInitializer.initializeEngine().then(function(appRunner) {
                appRunner.runApp();
            });
        }
    });
  }

  window.addEventListener('load', function(ev) {
    if ('serviceWorker' in navigator) {

        // getting rid of undesired to fetch remote version.json file updated
        var seconds = new Date().getTime();
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", '/version.json?v=' + seconds, true);
        xmlhttp.addEventListener('load', function() {
            if (xmlhttp.status == 200) {
                var buildNumber = xmlhttp.responseText;
                console.log('remote version is ' + buildNumber);
                var currentBuildNumber = window.localStorage.getItem('buildNumber');

                console.log('local version is ' + currentBuildNumber);
                // clear worker cache if remote and local version are different
                if (currentBuildNumber != buildNumber) {
                    console.log('App update is necessary. Clearing service workers cache');
                    caches.delete('flutter-app-manifest');
                    caches.delete('flutter-temp-cache');
                    caches.delete('flutter-app-cache');

                    // store new version number
                    window.localStorage.setItem('buildNumber', buildNumber);
                } else {
                    console.log('App is up to date');
                }
            }
            launchFlutter();
        });
        
window.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          return caches.delete(cacheName);
        })
      );
    })
  );
  window.clients.claim();
  

        xmlhttp.addEventListener('error', function() {
            launchFlutter();
        });

        xmlhttp.addEventListener('abort', function() {
            launchFlutter();
        });

        xmlhttp.addEventListener('timeout', function() {
            launchFlutter();
        });

        xmlhttp.send();
    } else {
        console.log('Service worker not found. Continue app loading.');
        launchFlutter();
    }

  });
 
  </script>
</body>
</html>

flutter --版本
enter image description here

我在 URL 脚本中添加了一个查询参数，以防止浏览器使用旧的缓存版本。具体来说，我实现了一个版本控制查询参数，例如 ?v=1.0，以确保浏览器获取更新的文件。您也可以在下面查看我的代码。

但是没有成功。

注意：服务器apache / Cpanel

我的代码

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="This Flutter project is about a fruit supermarket side admin">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="shndz_panel">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png?v=1.0"/>  <!-- Add versioning to favicon -->

  <title>shndz </title>
  <link rel="manifest" href="manifest.json?v=1.0">  <!-- Add versioning to manifest -->

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = {{flutter_service_worker_version}};
  </script>

</head>
<body>
<script src="flutter_bootstrap.js?v=1.0" async></script>  <!-- Add versioning to flutter_bootstrap.js -->
<script>
  {{flutter_js}}
  {{flutter_build_config}}

  function launchFlutter() {
    // Download main.dart.js
    _flutter.loader.load({
        serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
            engineInitializer.initializeEngine().then(function(appRunner) {
                appRunner.runApp();
            });
        }
    });
  }

  window.addEventListener('load', function(ev) {
    if ('serviceWorker' in navigator) {
        // Getting rid of undesired to fetch remote version.json file updated
        var seconds = new Date().getTime();
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", '/version.json?v=' + seconds, true);
        xmlhttp.addEventListener('load', function() {
            if (xmlhttp.status == 200) {
                var buildNumber = xmlhttp.responseText;
                console.log('remote version is ' + buildNumber);
                var currentBuildNumber = window.localStorage.getItem('buildNumber');

                console.log('local version is ' + currentBuildNumber);
                // Clear worker cache if remote and local version are different
                if (currentBuildNumber != buildNumber) {
                    console.log('App update is necessary. Clearing service workers cache');
                    caches.delete('flutter-app-manifest');
                    caches.delete('flutter-temp-cache');
                    caches.delete('flutter-app-cache');

                    // Store new version number
                    window.localStorage.setItem('buildNumber', buildNumber);
                } else {
                    console.log('App is up to date');
                }
            }
            launchFlutter();
        });

        window.addEventListener('activate', (event) => {
          event.waitUntil(
            caches.keys().then((cacheNames) => {
              return Promise.all(
                cacheNames.map((cacheName) => {
                  return caches.delete(cacheName);
                })
              );
            })
          );
          window.clients.claim();
        });

        xmlhttp.addEventListener('error', function() {
            launchFlutter();
        });

        xmlhttp.addEventListener('abort', function() {
            launchFlutter();
        });

        xmlhttp.addEventListener('timeout', function() {
            launchFlutter();
        });

        xmlhttp.send();
    } else {
        console.log('Service worker not found. Continue app loading.');
        launchFlutter();
    }
  });
</script>
</body>
</html>
flutter browser-cache
1个回答
0
投票

这里也一样。你可以试试这个：

https://stackoverflow.com/a/74124477/8526660

将此添加到 

  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="pragma" content="no-cache" />
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.