B4J Question [BANano] Service Workers & PocketBase

[Mashiane]

Hi

I seem to be experiencing an issue. In my pocketbase based webapps, I have been trying to have my app working as a PWA. Each time I do this, all my calls to the database seem to be returning the same records even if I made updates. It dawned on me that perhaps the service worker caches the fetch calls to PocketBase. Also for some strange reason, even if I have removed the service worker settings on my app, the service worker seems to be executed, this file though is not on my dist app. Strange.

Fortunately I have ran an error just now, this is the service-worker.js file on the dev console

const PRECACHE = 'BMA-Data-v1728170497715';
const RUNTIME = 'BMA-runtime-v1728170497715';
const PRECACHE_URLS = ['./index.html?1728170497715', './manifest.json', './scripts/bananocore9.03.js', './scripts/flowbite.min.js', './scripts/tailwind.min.js', './scripts/fileSaver.min.js', './scripts/sweetalert2.all.min.js', './scripts/dayjs.min.js', './scripts/numeral.min.js', './scripts/insert-rule.min.js', './scripts/moment.min.js', './scripts/reinvented-color-wheel.min.js', './scripts/mdtoast.min.js', './scripts/jquery-3.7.1.min.js', './scripts/signature_pad.umd.min.js', './scripts/form-data-json.min.js', './scripts/jquery.scrollTo.min.js', './scripts/fuse.min.js', './scripts/pagination.min.js', './scripts/htmlParser.min.js', './scripts/anime.min.js', './scripts/countUp.umd.js', './scripts/formula.min.js', './scripts/rolldate.min.js', './scripts/flatpickr.min.js', './scripts/fplocale.min.js', './scripts/pocketbase.umd.js', './scripts/kinetic.min.js', './scripts/enjoyhint.min.js', './scripts/swiper-bundle.min.js', './scripts/pouchdb.min.js', './scripts/pouchdb.find.min.js', './scripts/core.min.js', './scripts/draggable.min.js', './scripts/droppable.min.js', './scripts/checkbox.min.js', './scripts/tree.min.js', './scripts/editor.min.js', './scripts/lottie-player.js', './scripts/chart.min.js', './scripts/chartjs-adapter-date-fns.bundle.min.js', './scripts/chartkick.min.js', './scripts/dragula.min.js', './scripts/jkanban.min.js', './scripts/fc.min.js', './scripts/fclocales.min.js', './scripts/evo-calendar.min.js', './scripts/docxtemplater.js', './scripts/pizzip.js', './scripts/pizzip-utils.js', './scripts/qrcode.min.js', './scripts/jspdf.umd.min.js', './scripts/jspdf.plugin.autotable.min.js', './scripts/html2canvas.min.js', './scripts/pdf-lib.min.js', './scripts/base64.min.js', './scripts/html5-qrcode.min.js', './scripts/eruda.js', './scripts/html-to-image.js', './scripts/app.js', './styles/loader-1.css', './styles/daisyui.min.css', './styles/fontawesome.min.css', './styles/sithasostyle.min.css', './styles/sweetalert2.min.css', './styles/reinvented-color-wheel.min.css', './styles/mdtoast.min.css', './styles/pagination.css', './styles/dragtabs.css', './styles/infobox.min.css', './styles/magicmenu.min.css', './styles/devices.min.css', './styles/flatpickr.min.css', './styles/material_blue.css', './styles/enjoyhint.min.css', './styles/swiper-bundle.min.css', './styles/core.min.css', './styles/checkbox.min.css', './styles/tree.min.css', './styles/editor.min.css', './styles/jkanban.min.css', './styles/fc.min.css', './styles/evo-calendar.min.css', './styles/evo-calendar.midnight-blue.min.css', './styles/evo-calendar.orange-coral.min.css', './styles/evo-calendar.royal-navy.min.css', './assets/600by600.jpg', './assets/casino_hand-webfont.svg', './assets/placeholderimg.jpg', './assets/red.png', './assets/casino_hand-webfont.ttf', './assets/sadface.png', './assets/SithasoDaisyLogo.jpg', './assets/casino_hand-webfont.woff', './assets/twitter.svg', './assets/casino_hand-webfont.woff2', './assets/DAISYUI LICENSE.txt', './assets/FA_LICENSE.txt', './assets/fa-brands-400.ttf', './assets/fa-brands-400.woff2', './assets/fa-regular-400.ttf', './assets/fa-regular-400.woff2', './assets/fa-solid-900.ttf', './assets/fa-solid-900.woff2', './assets/fa-v4compatibility.ttf', './assets/fa-v4compatibility.woff2', './assets/BANANO LICENSE.txt', './assets/FONTAAWESOME LICENSE.txt', './assets/gijgo-material.eot', './assets/gijgo-material.svg', './assets/gijgo-material.woff', './assets/google.svg', './assets/gray.png', './assets/green.png', './assets/beep.mp3', './assets/happyface.png', './assets/bjl.json', './assets/casino_hand-webfont.eot', './assets/neutralface.png', './assets/no-image-available.png', './assets/orange.png', './assets/bmabeauty.json', './assets/eccontractfinal.pdf', './assets/nameitem.html', './assets/ntg.png', './assets/ntglogo.png', './assets/pocketbase.txt'];
importScripts('./scripts/bananocore9.03.js');
var _B = this;
_B.addEventListener('install', function(event) {
    event.waitUntil(caches.open(PRECACHE).then(function(cache) {
        return cache.addAll(PRECACHE_URLS);
    }).then(_B.skipWaiting()));
});
_B.addEventListener('activate', function(event) {
    var currentCaches = [PRECACHE, RUNTIME];
    event.waitUntil(caches.keys().then(function(cacheNames) {
        return cacheNames.filter(function(cacheName) {
            return !currentCaches.includes(cacheName);
        });
    }).then(function(cachesToDelete) {
        return Promise.all(cachesToDelete.map(function(cacheToDelete) {
            return caches.delete(cacheToDelete);
        }));
    }).then(function() {
        return _B.clients.claim();
    }));
});
_B.addEventListener('fetch', function(event) {
    if (event.request.url.indexOf('donotdelete.gif') == -1 && event.request.method == 'GET') {
        event.respondWith(caches.match(event.request).then(function(cachedResponse) {
            if (cachedResponse) {
                return cachedResponse;
            }
            return caches.open(RUNTIME).then(function(cache) {
                return fetch(event.request).then(function(response) {
                    return cache.put(event.request, response.clone()).then(function() {
                        return response;
                    });
                });
            });
        }));
    }
});
_B.addEventListener('message', event => {
    if (event.data === 'skipWaiting')
        return skipWaiting();
}
);

How do I ensure that PocketBase fetch calls are not using the cache? My app works well without the service worker, but as soon as I add it, for some reason things dont work as expected, I could be missing something.

Also, as I dont have any service worker settings anymore on my app, Im not sure why this file "seem" to exist, its not on my dist folder, yes I had the settings on before and removed them, but it seems to be using it. Perhaps there is a setting that I might have missed, so, which settings are mandatory and will activate service workers if they are on. Below is my AppStart

Sub AppStart (Form1 As Form, Args() As String)
    'change this according to your needs
    'initialize banano for first use
    'this is the web-app builder
    BANano.Initialize("BANano", AppName, DateTime.now)
    BANano.HTML_NAME = "index.html"
    BANano.Header.Title = AppTitle
    BANano.Header.AddFavicon("./assets/600by600.jpg", "16x16")
    BANano.Header.AddAppleTouchIcon("./assets/600by600.jpg", "180x180")
    BANano.Header.Author ="Anele Mbanga (Mashy)"
    'BANano.Header.Charset = "iso-8859-1"
    BANano.Header.Description = "Beneficiary Management App"
    'BANano.header.Expires = "Mon, 22 Jul 2002 11:12:01 GMT"
    BANano.Header.Keywords = "banano,tailwindcss"
    BANano.Header.Language = "en"
    BANano.Header.AddMeta($"<meta name="copyright" content="&copy; 2022 SithasoDaisy">"$)
    BANano.Header.AddMeta($"<meta name="robots" content="ALL">"$)
   
    'BANano.Header.AddMSTileIcon("mstile-150x150.png", "144x144")
    'BANano.Header.SetMaskIcon("safari-pinned-tab.svg")
    'BANano.Header.AddManifestIcon("android-chrome-192x192.png", "192x192")
    'BANano.Header.AddManifestIcon("android-chrome-512x512.png", "512x512")
    BANano.TranspilerOptions.MinifyOnline = False
    BANano.TranspilerOptions.RemoveDeadCode = False
    BANano.TranspilerOptions.IgnoreWarningsOldBrowsers = True
    BANano.TranspilerOptions.ShowWarningDeadCode = False
    BANano.TranspilerOptions.MergeAllCSSFiles = False
    BANano.TranspilerOptions.MergeAllJavascriptFiles = False
    BANano.TranspilerOptions.EnableLiveCodeSwapping = False
    BANano.TranspilerOptions.DisableShortenVariableNames = False
    BANano.Header.OnDOMContentLoaded = SDUIShared.DOMContentLoaded
    'BANano.TranspilerOptions.DoNotDeleteFolderOnCompilation($"C:\laragon\www\${AppName}\assets"$)
    BANano.TranspilerOptions.ShowLogPosition = True
    '
    BANano.Header.AddJavascriptFile("exceljs.min.js")
    '
    'BANano.Header.AddCSSFile("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap")
    '
    ' a PWA must have a service worker.  Will be build automatically caching everything used in your Web App
    'BANano.SERVICEWORKER_NAME = "service-worker.js"
    'BANano.TranspilerOptions.UseServiceWorker = False
    ' this line makes sure our Web App becomes a PWA
    #if Release
        'BANano.TranspilerOptions.UseServiceWorkerWithUpdateMessage(True, "#26AE60", "Update available", "Click here to update the app to the latest version")
    #end if   
   
    ' optional: if your WebApp is not in the root
    'BANano.TranspilerOptions.SetPWAStartUrl($"${AppName}/index.html"$)
    'BANano.Header.BackgroundColor = "#1e1e1e"

    ' additonal JavaScript and CSS files we want to include
    ' BANano.Header.AddJavascriptFile("jsstore.min.js")

    ' settings needed for the PWA app icons, splash screens, etc…
    BANano.Header.AddMSTileIcon("mstile-150x150.png", "150x150")
    BANano.Header.MSTileColor = "#ffc40d"
   
    BANano.Header.AddManifestIcon("android-chrome-192x192.png", "192x192")
    BANano.Header.AddManifestIcon("android-chrome-512x512.png", "512x512")
    BANano.Header.SetAndroidMaskIcon("maskable_icon.png", "731x731")
    BANano.Header.MaskIconColor = "#1e1e1e"
   
    BANano.Header.AddAppleTouchIcon("apple-touch-icon.png", "")
    BANano.Header.SetAppleMaskIcon("safari.png")
    BANano.Header.AddAppleTouchStartupImage("iphone5_splash.png", "320px", "568px", "2")
    BANano.Header.AddAppleTouchStartupImage("iphone6_splash.png", "375px", "667px", "2")
    BANano.Header.AddAppleTouchStartupImage("iphoneplus_splash.png", "621px", "1104px", "3")
    BANano.Header.AddAppleTouchStartupImage("iphonex_splash.png", "375px", "812px", "3")
    BANano.Header.AddAppleTouchStartupImage("iphonexr_splash.png", "414px", "896px", "2")
    BANano.Header.AddAppleTouchStartupImage("iphonexsmax_splash.png", "414px", "896px", "3")
    BANano.Header.AddAppleTouchStartupImage("ipad_splash.png", "768px", "1024px", "2")
    BANano.Header.AddAppleTouchStartupImage("ipadpro1_splash.png", "834px", "1112px", "2")
    BANano.Header.AddAppleTouchStartupImage("ipadpro2_splash.png", "834px", "1194px", "2")
    BANano.Header.AddAppleTouchStartupImage("ipadpro3_splash.png", "1024px", "1366px", "2")
       
    BANano.Header.AddFavicon("favicon-16x16.png", "16x16")
    BANano.Header.AddFavicon("favicon-32x32.png", "32x32")
       
    'set php settings
'    BANano.PHP_NAME = $"${AppName}.php"$
'    #if release
'    'change to external host domain e.g http://www.google.com
'    'exclude the port address
'    #end if
'    BANano.PHPHost = $"${ServerIP}/${AppName}/"$
'    BANano.PHPAddHeader("Access-Control-Allow-Origin: *")
   
    'transpile the app to javascript
    BANano.Build(Publish)
   
    'open the default browser and show the generated index.html file
    Dim fx As JFX
    Dim appPath As String = $"${ServerIP}/${AppName}/index.html"$
    fx.ShowExternalDocument(appPath)
    #if release
    ExitApplication
    #end if
End Sub

Thanks in advance.