B4J Question [BANano] Creating a PWA with ...ForLater Header Calls

[Mashiane]

Good day

What is the best approach in creating a PWA e.g. BANano PWA using CSS & JS that is added with ...ForLater calls?

1. In my library I have added this on AppStart

BANano.Header.AddCSSFileForLater("daisyui.min.css")
        BANano.Header.AddJavascriptFileForLater("tailwind.min.js")
        BANano.Header.AddCSSFileForLater("fontawesome.min.css")
        BANano.Header.AddJavascriptFileForLater("fileSaver.min.js")
        BANano.Header.AddCSSFileForLater("sithasostyle.min.css")
        BANano.header.AddCSSFileForLater("sweetalert2.min.css")
        BANano.Header.AddJavascriptFileForLater("sweetalert2.all.min.js")
        '
        'BANano.Header.AddJavascriptFileForLater("alasql.min.js")
       
        '
        BANano.Header.AddJavascriptFileForLater("dayjs.min.js")
        BANano.Header.AddJavascriptFileForLater("numeral.min.js")
        BANano.Header.AddJavascriptFileForLater("insert-rule.min.js")
        BANano.Header.AddJavascriptFileForLater("moment.min.js")
        '
        BANano.Header.AddCSSFileForLater("reinvented-color-wheel.min.css")
        BANano.Header.AddJavascriptFileForLater("reinvented-color-wheel.min.js")
        '
        BANano.Header.AddCSSFileForLater("mdtoast.min.css")
        BANano.Header.AddJavascriptFileForLater("mdtoast.min.js")
   
        BANano.Header.AddJavascriptFileForLater("jquery-3.6.3.min.js")
        BANano.Header.AddJavascriptFileForLater("signature_pad.umd.min.js")
        BANano.Header.AddJavascriptFileForLater("form-data-json.min.js")

2. I have defined this method to load the files

Sub LoadAssetsOnDemand(Key As String, Items As List)
    Dim iTot As Int = Items.size - 1
    Dim iCnt As Int = 0
    For iCnt = 0 To iTot
        Dim fn As String = Items.Get(iCnt)
        If fn.EndsWith(".js") Then
            If fn.StartsWith("./scripts/") = False Then
                Items.Set(iCnt, $"./scripts/${fn}"$)
            End If
        End If
        If fn.EndsWith(".css") Then
            If fn.StartsWith("./styles/") = False Then
                Items.Set(iCnt, $"./styles/${fn}"$)
            End If
        End If
    Next
    Dim pathsNotFound() As String
    If Banano.AssetsIsDefined(Key) = False Then
        'load the assets
        pathsNotFound = Banano.AssetsLoadWait(Key, Items)
        If Banano.IsNull(pathsNotFound) = False Then
            Banano.Console.Warn($"${Key} not fully loaded..."$)
            For Each path As String In pathsNotFound
                Log(path)
            Next
        End If
    End If
End Sub

3. I can call this sub in my library to load the files.

Private Sub UsesCore
    Banano.Await(LoadAssetsOnDemand("Core", Array("daisyui.min.css","tailwind.min.js", "fileSaver.min.js", "dayjs.min.js","numeral.min.js","jquery-3.6.3.min.js", "insert-rule.min.js","moment.min.js","sweetalert2.min.css","sweetalert2.all.min.js","fontawesome.min.css","reinvented-color-wheel.min.css","reinvented-color-wheel.min.js","sithasostyle.min.css","pagination.css", "pagination.min.js", "fuse.min.js","form-data-json.min.js","signature_pad.umd.min.js", "mdtoast.min.css", "mdtoast.min.js")))
End Sub

My PWA does not work. Perhaps Im doing this wrongly... for some reason the PWA does not find the loader too.

I need JQuery to be added before all these files on the service-worker.js file and also be able to use the "loadjs" stuff.

On the attached zip file which is the service worker, jquery is added to the service worker file after other files.


Can you please advise.

 

[Mashiane]

Update: It seems like even if I dont use the ForLater calls.. the sequence of the files added to the service worker does not respect how AddCSS / AddJavaScriptFile calls are made, thus the JQuery added after the files reported as errors even if with AddCSS & AddJava.. addes JQuery and uses ..ForLater for the other files.

I could be wrong, help will be appreciated.

Ta