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 –
- Disable the service workers of the Flutter application, as you can see from the index.html.
- Disabled caching through nginx, as you can see from the nginx configuration.
- 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.
- Disabled caching in the browser developer tools, and tried the whole process.
- 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!