Eilon / MauiHybridWebView

MIT License
206 stars 45 forks source link

"Link" trimming mode on Android removing/deactivating/breaking certain functions in my HTML/Javascript HybridWebView project? #58

Open jonmdev opened 6 months ago

jonmdev commented 6 months ago

I first have to say HybridWebView is absolutely amazing. Being able to load in Javascript/HTML code and just run it in Maui is life changing. I hope this project will be maintained up to date as I am now dependent on it. It is letting me do things I have struggled to figure out for months. Thank you very much for doing this.

However, after hours of pain today, I tracked down a "bug" or at least unwanted behavior. I have a HTML file like this that is referenced by HybridWebView as its main page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <style>
            body { margin: 0; }
        </style>
        <script>
            const module = {}; //use as empty module for attaching functions to 

                        //SIMPLE DEBUG TO SCREEN
            function rawDebugToScreen(textToShow){
                const debugText = document.getElementById("info");
                debugText.textContent += " | " + textToShow;
            }

            //ACCESSING AN INTERNAL MODULE FUNCTION TO DO THE SAME 
            function debugToScreen(textToShow){
                window.debugToScreen(textToShow);
                module.debugToScreen(textToShow);
            }

            function setRandomNewCubeColor(){
                window.setRandomNewCubeColor();
                module.setRandomNewCubeColor();
            }

        </script>

        <script src="_hwv/HybridWebView.js"></script>
        <script type="importmap">
          {
            "imports": {
              "three": "https://cdn.jsdelivr.net/npm/three@v0.163.0/build/three.module.js",
              "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.163.0/examples/jsm/"
            }
          }
        </script>
        <script type="module" crossorigin src="/assets/index-CFzOgagS.js"></script>
        <link rel="stylesheet" crossorigin href="/assets/index-rX0QCEo-.css">
    </head>
    <body>

        <div id="info"></div>
    </body>
</html>

For reference, the module. and window. are just methods I am testing to run functions within a module from Maui.

This actually all works perfectly in Debug Android, Windows Debug/Release. But if I build for Android in Release with Trimming Granularity set to "Link", when I try to invoke the rawDebugToScreen or debugToScreen functions from Maui (simple tests to update some display text on screen to test interop) they both no longer work.

I can still have Enable Trimming on and even the R8 code shrinker with no problems.

But I must leave the Trimming Granularity field blank or these functions stop working when called from Maui.

I presume they are being pruned as the way they are called from Maui does not make it obvious they are actually used.

Is this an expected outcome? Is there any way to protect our functions in our Javascript/HTML from such pruning while still using this?

I must concede I don't know anything about the "Link" setting. I do need to keep my file sizes small as Play store only allows 100 MB. Having this on "Link" did help significantly as I am already up against the limit.

By contrast "CopyUsed" does not work at all for me - fails to build. So it would be good to use "Link" and have some simple way to ensure the functions aren't pruned/damaged.

I tried running the functions in index.html body like:

<script>
            rawDebugToScreen("");
            debugToScreen("");
</script>

But this doesn't save them.

Any thoughts or ideas are appreciated.

Edit: Just found out Android now allows up to 200 MB so maybe I don't have to even worry about this. Still I'm curious and would like to optimize what I can. Thanks.