Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Webapp does not load the second time on Chrome

I have created a Flutter webapp and deployed it using a DigitalOcean droplet.

Given below is my web/index.html –

<!DOCTYPE html>
<html>
<head>
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Webapp for Occulead">

  <!-- 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="Occulead">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

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

  <title>Occulead</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
<script src="flutter_bootstrap.js" async></script>
<!--<script>-->
<!--  // Register service worker-->
<!--  if ('serviceWorker' in navigator) {-->
<!--    window.addEventListener('load', function() {-->
<!--      navigator.serviceWorker.register('/service- 
   worker.js').then(function(registration) {-->
<!--        console.log('ServiceWorker registration successful with scope: ', 
    registration.scope);-->
<!--      }, function(err) {-->
<!--        console.log('ServiceWorker registration failed: ', err);-->
<!--      });-->
<!--    });-->
<!--  }-->
<!--</script>-->
</body>
</html>

Given below is my nginx configuration –

server {
    listen 80;
    server_name my_IP;

    location / {
        root /var/www/occulead_flutter/web;
        index index.html;
        try_files $uri $uri/ /index.html;

        # Disable caching
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy- 
        revalidate, max-age=0";
        add_header Pragma "no-cache";
        add_header Expires 0;

        types {
            text/html html;
            text/css css;
            application/javascript js;
        }
    }
}

Issue – The webapp works fine on Safari, but on Chrome, if the load the webapp for the first time, it loads perfectly. But if close the tab and try and open the webapp again, it does not open. It works for 1 time if I clear the local browser cache and history. But the second load doesn’t work again!

What I’ve tried –

  1. Disable the service workers of the Flutter application, as you can see from the index.html.
  2. Disabled caching through nginx, as you can see from the nginx configuration.
  3. Checked the access logs of nginx, and have confirmed that I can only see the access logs for the first time. The second time, I see no logs, which means that the browser is somehow not trying to request the server the second time.
  4. Disabled caching in the browser developer tools, and tried the whole process.
  5. I’m using the latest Flutter version – 3.22.1 (Stable channel)

Where could I be going wrong? What can I do?
Thanks in advance!

Tags:

2

Answers


  1. 0

    Try enabling Flutter Dev Tools. Maybe it will help you understand what kind of bug you’re dealing. Here is a link of google official documentation showing you how to use it: https://docs.flutter.dev/tools/devtools/overview

    Login or Signup to reply.
  2. 0

    the issue might be related to the way Flutter Web handles caching. Even though you’ve disabled service workers in your index.html and caching in your nginx configuration, Flutter web might still be using its own caching mechanism.

    try to replace flutter_service_worker.js?v=<some-version-number> –> flutter_service_worker.js?v=<some-new-version-number> , inside flutter_bootstrap.js

    This will force the browser to download the new service worker file instead of using the cached one.

    If this doesn’t solve the issue let me know if I can help:)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search