Improve runtime to detect browser

mkdocs-website/docs/en/learn/build.md

@@ -213,3 +213,14 @@ You can also specify a custom configuration file and port:
 ```shell
 wails3 dev -config ./path/to/custom/config.yaml -port 8080
 ```
+
+### Using a browser for development
+
+Whilst v2 fully supported the use of a browser for development, it caused a lot of confusion. Applications that would
+work in the browser would not necessarily work in the desktop application, as not all browser APIs are available in 
+webviews. 
+
+For UI-focused development work, you still have the flexibility to use a browser in v3, by accessing the Vite URL at 
+http://localhost:9245 in dev mode. This gives you access to powerful browser dev tools while working on styling and 
+layout. When you're ready to test functionality like bindings and events, simply switch to the desktop view to ensure 
+everything works perfectly in the production environment.

v3/internal/runtime/desktop/@wailsio/runtime/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wailsio/runtime",
   "type": "module",
-  "version": "3.0.0-alpha.28",
+  "version": "3.0.0-alpha.29",
   "description": "Wails Runtime",
   "exports": {
     ".": {

v3/internal/runtime/desktop/@wailsio/runtime/src/system.js

@@ -15,11 +15,26 @@ let call = newRuntimeCallerWithID(objectNames.System, '');
 const systemIsDarkMode = 0;
 const environment = 1;
 
-export function invoke(msg) {
-    if(window.chrome) {
-        return window.chrome.webview.postMessage(msg);
+const _invoke = (() => {
+    try {
+        if(window?.chrome?.webview) {
+            return (msg) => window.chrome.webview.postMessage(msg);
+        }
+        if(window?.webkit?.messageHandlers?.external) {
+            return (msg) => window.webkit.messageHandlers.external.postMessage(msg);
+        }
+    } catch(e) {
+        console.warn('\n%c⚠️ Browser Environment Detected %c\n\n%cOnly UI previews are available in the browser. For full functionality, please run the application in desktop mode.\nMore information at: https://v3alpha.wails.io/learn/build/#using-a-browser-for-development\n',
+            'background: #ffffff; color: #000000; font-weight: bold; padding: 4px 8px; border-radius: 4px; border: 2px solid #000000;',
+            'background: transparent;',
+            'color: #ffffff; font-style: italic; font-weight: bold;');
     }
-    return window.webkit.messageHandlers.external.postMessage(msg);
+    return null;
+})();
+
+export function invoke(msg) {
+    if (!_invoke) return;
+    return _invoke(msg);
 }
 
 /**