1. Anuncie Aqui ! Entre em contato fdantas@4each.com.br
Anuncie aqui Patrocinador Anuncios

[Flutter] Flutter Web: Cache Not Clearing After Release and Causing Old Content to Persist

Discussão em 'Mobile' iniciado por Stack, Outubro 1, 2024 às 11:42.

  1. Stack

    Stack Membro Participativo

    One of my biggest issues with the Flutter web app is that the browser doesn't properly clear the cache after deployment. This allows users to view old content even after updating the web application. I'm not sure why the browser keeps this old data, which results in loading old app assets (like javascript, css files or images) instead of newly installed versions. Instead of requesting updated files from the server, the browser continues to receive these old cached versions.

    HTML CODE :


    <!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 --version
    [​IMG]

    I added a query parameter to the URL script to prevent the browser from using the old cached version. Specifically, I implemented a versioning query parameter, such as ?v=1.0, to ensure that the browser fetches the updated file. You can also check my code below.

    But it was not successful.

    Notice: Server apache / Cpanel

    MY CODE

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

    Continue reading...
    Stack, Outubro 1, 2024 às 11:42
    #1

Compartilhe esta Página