fix: improve JavaScript function definitions and add cache-busting

- Wrap function definitions in DOMContentLoaded event listener - Add cache-busting meta tags to prevent WebView caching - Add console logging for debugging - Ensure functions are properly attached to window object This should resolve the 'function not defined' JavaScript errors and prevent WebView from using cached HTML files.
2 weeks ago · 84b098d22f
1 changed files with 61 additions and 50 deletions
--- a/www/index.html
+++ b/www/index.html
@ -3,6 +3,9 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
    <title>DailyNotification Plugin Test</title>
    <style>
        body {
@ -61,62 +64,70 @@
    </div>

    <script>
-        // Use global Capacitor and plugin objects instead of ES modules
-        // These are provided by the Capacitor runtime
-        const Capacitor = window.Capacitor;
-        const DailyNotification = window.DailyNotification;
-
-        window.testPlugin = async function() {
-            const status = document.getElementById('status');
-            status.innerHTML = 'Testing plugin...';
+        // Wait for DOM to be ready
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM loaded, initializing test functions...');
            
-            try {
-                if (!DailyNotification) {
-                    status.innerHTML = 'DailyNotification plugin not available';
-                    return;
+            // Use global Capacitor and plugin objects instead of ES modules
+            // These are provided by the Capacitor runtime
+            const Capacitor = window.Capacitor;
+            const DailyNotification = window.DailyNotification;
+
+            // Define global functions
+            window.testPlugin = async function() {
+                const status = document.getElementById('status');
+                status.innerHTML = 'Testing plugin...';
+                
+                try {
+                    if (!DailyNotification) {
+                        status.innerHTML = 'DailyNotification plugin not available';
+                        return;
+                    }
+                    const result = await DailyNotification.echo({ value: 'Hello from test app!' });
+                    status.innerHTML = `Plugin test successful: ${result.value}`;
+                } catch (error) {
+                    status.innerHTML = `Plugin test failed: ${error.message}`;
                }
-                const result = await DailyNotification.echo({ value: 'Hello from test app!' });
-                status.innerHTML = `Plugin test successful: ${result.value}`;
-            } catch (error) {
-                status.innerHTML = `Plugin test failed: ${error.message}`;
-            }
-        };
+            };

-        window.configurePlugin = async function() {
-            const status = document.getElementById('status');
-            status.innerHTML = 'Configuring plugin...';
-            
-            try {
-                if (!DailyNotification) {
-                    status.innerHTML = 'DailyNotification plugin not available';
-                    return;
+            window.configurePlugin = async function() {
+                const status = document.getElementById('status');
+                status.innerHTML = 'Configuring plugin...';
+                
+                try {
+                    if (!DailyNotification) {
+                        status.innerHTML = 'DailyNotification plugin not available';
+                        return;
+                    }
+                    await DailyNotification.configure({
+                        fetchUrl: 'https://api.example.com/daily-content',
+                        scheduleTime: '09:00',
+                        enableNotifications: true
+                    });
+                    status.innerHTML = 'Plugin configured successfully!';
+                } catch (error) {
+                    status.innerHTML = `Configuration failed: ${error.message}`;
                }
-                await DailyNotification.configure({
-                    fetchUrl: 'https://api.example.com/daily-content',
-                    scheduleTime: '09:00',
-                    enableNotifications: true
-                });
-                status.innerHTML = 'Plugin configured successfully!';
-            } catch (error) {
-                status.innerHTML = `Configuration failed: ${error.message}`;
-            }
-        };
+            };

-        window.checkStatus = async function() {
-            const status = document.getElementById('status');
-            status.innerHTML = 'Checking plugin status...';
-            
-            try {
-                if (!DailyNotification) {
-                    status.innerHTML = 'DailyNotification plugin not available';
-                    return;
+            window.checkStatus = async function() {
+                const status = document.getElementById('status');
+                status.innerHTML = 'Checking plugin status...';
+                
+                try {
+                    if (!DailyNotification) {
+                        status.innerHTML = 'DailyNotification plugin not available';
+                        return;
+                    }
+                    const result = await DailyNotification.getStatus();
+                    status.innerHTML = `Plugin status: ${JSON.stringify(result, null, 2)}`;
+                } catch (error) {
+                    status.innerHTML = `Status check failed: ${error.message}`;
                }
-                const result = await DailyNotification.getStatus();
-                status.innerHTML = `Plugin status: ${JSON.stringify(result, null, 2)}`;
-            } catch (error) {
-                status.innerHTML = `Status check failed: ${error.message}`;
-            }
-        };
+            };
+            
+            console.log('Test functions initialized');
+        });
    </script>
 </body>
 </html>