@apps-in-toss/framework 1.4.5 → 1.4.7

package/dist/index.cjs

@@ -1377,10 +1377,11 @@ var import_native_modules18 = require("@apps-in-toss/native-modules");
 var appsInTossAsyncBridges = __toESM(require("@apps-in-toss/native-modules/async-bridges"), 1);
 var appsInTossConstantBridges = __toESM(require("@apps-in-toss/native-modules/constant-bridges"), 1);
 var appsInTossEventBridges = __toESM(require("@apps-in-toss/native-modules/event-bridges"), 1);
+var import_react_native_safe_area_context4 = require("@granite-js/native/react-native-safe-area-context");
 var import_react_native32 = require("@granite-js/react-native");
 var import_tds_react_native14 = require("@toss/tds-react-native");
 var import_private9 = require("@toss/tds-react-native/private");
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_native33 = require("react-native");
 
 // src/components/GameWebView.tsx
@@ -1594,26 +1595,24 @@ function useBridgeHandler({
   onMessage,
   constantHandlerMap,
   asyncHandlerMap,
-  eventListenerMap,
-  injectedJavaScript: originalInjectedJavaScript
+  eventListenerMap
 }) {
   const ref = (0, import_react23.useRef)(null);
   const injectedJavaScript = (0, import_react23.useMemo)(
-    () => [
-      `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
-        Object.entries(constantHandlerMap).reduce(
-          (acc, [key, value]) => {
-            acc[key] = typeof value === "function" ? value() : value;
-            return acc;
-          },
-          {}
-        )
-      )};`,
-      originalInjectedJavaScript,
-      "true"
-    ].join("\n"),
-    [constantHandlerMap, originalInjectedJavaScript]
+    () => `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
+      Object.entries(constantHandlerMap).reduce(
+        (acc, [key, value]) => {
+          acc[key] = typeof value === "function" ? value() : value;
+          return acc;
+        },
+        {}
+      )
+    )};`,
+    [constantHandlerMap]
   );
+  (0, import_react23.useEffect)(() => {
+    ref.current?.injectJavaScript(injectedJavaScript);
+  }, [injectedJavaScript]);
   const createHandleOnEvent = (functionName, eventId) => (response) => {
     ref.current?.injectJavaScript(`
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onEvent/${eventId}', ${JSON.stringify(response, null, 0)});
@@ -1628,7 +1627,7 @@ function useBridgeHandler({
   const $onMessage = (0, import_react23.useCallback)(
     async (e) => {
       onMessage?.(e);
-      const data = JSON.parse(e.nativeEvent.data);
+      const data = parseNativeEventData(e.nativeEvent.data);
       if (typeof data !== "object" || data === null || typeof data.functionName !== "string" || typeof data.eventId !== "string" || typeof data.type !== "string" || !["addEventListener", "removeEventListener", "method"].includes(data.type)) {
         return;
       }
@@ -1674,15 +1673,59 @@ function useBridgeHandler({
     onMessage: $onMessage
   };
 }
+function parseNativeEventData(data) {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+// src/core/hooks/useSafeAreaInsetsEmitter.tsx
+var import_react_native_safe_area_context3 = require("@granite-js/native/react-native-safe-area-context");
+var import_react24 = require("react");
+var EventEmitter = class {
+  listeners = {};
+  on(event, listener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(listener);
+  }
+  emit(event, ...args) {
+    if (!this.listeners[event]) {
+      return;
+    }
+    this.listeners[event].forEach((listener) => listener(...args));
+  }
+  off(event, listener) {
+    if (!this.listeners[event]) {
+      return;
+    }
+    this.listeners[event] = this.listeners[event].filter((l) => l !== listener);
+  }
+};
+function useSafeAreaInsetsEmitter() {
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+  const emitter = (0, import_react24.useMemo)(() => new EventEmitter(), []);
+  (0, import_react24.useEffect)(() => {
+    emitter.emit("safeAreaInsetsChange", insets);
+    return () => {
+      emitter.off("safeAreaInsetsChange", (listener) => listener(insets));
+    };
+  }, [emitter, insets]);
+  return emitter;
+}
 
 // src/core/hooks/useWebBackHandler.tsx
 var import_react_native27 = require("@granite-js/react-native");
 var import_tds_react_native13 = require("@toss/tds-react-native");
 var import_es_hangul5 = require("es-hangul");
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/hooks/useWebviewHistoryStack.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var INITIAL_STATE = { stack: [], index: -1 };
 function reducer(state, action) {
   switch (action.type) {
@@ -1713,11 +1756,11 @@ function reducer(state, action) {
   }
 }
 function useWebViewHistory() {
-  const [state, dispatch] = (0, import_react24.useReducer)(reducer, INITIAL_STATE);
-  const onNavigationStateChange = (0, import_react24.useCallback)(({ url, canGoForward: canGoForward2 }) => {
+  const [state, dispatch] = (0, import_react25.useReducer)(reducer, INITIAL_STATE);
+  const onNavigationStateChange = (0, import_react25.useCallback)(({ url, canGoForward: canGoForward2 }) => {
     dispatch({ type: "NAVIGATION_CHANGE", url, canGoForward: canGoForward2 });
   }, []);
-  const { canGoBack, canGoForward } = (0, import_react24.useMemo)(() => {
+  const { canGoBack, canGoForward } = (0, import_react25.useMemo)(() => {
     const canBack = state.index > 0;
     const canFwd = state.index >= 0 && state.index < state.stack.length - 1;
     return { canGoBack: canBack, canGoForward: canFwd };
@@ -1750,19 +1793,19 @@ function useWebBackHandler(webViewRef) {
   const logging = useNavigationBarLogging();
   const { openConfirm } = (0, import_tds_react_native13.useDialog)();
   const global2 = getAppsInTossGlobals();
-  const addEventListener = (0, import_react25.useCallback)(
+  const addEventListener = (0, import_react26.useCallback)(
     (handler) => {
       addWebBackEventListener(handler);
     },
     [addWebBackEventListener]
   );
-  const removeEventListener = (0, import_react25.useCallback)(
+  const removeEventListener = (0, import_react26.useCallback)(
     (handler) => {
       removeWebBackEventListener(handler);
     },
     [removeWebBackEventListener]
   );
-  const handleWebBack = (0, import_react25.useCallback)(async () => {
+  const handleWebBack = (0, import_react26.useCallback)(async () => {
     if (hasWebBackEvent) {
       for (const handler of webBackHandlersRef) {
         handler();
@@ -1795,7 +1838,7 @@ function useWebBackHandler(webViewRef) {
     openConfirm,
     webViewRef
   ]);
-  const handleWebHome = (0, import_react25.useCallback)(() => {
+  const handleWebHome = (0, import_react26.useCallback)(() => {
     logging.homeButtonClick();
     if (hasWebBackEvent) {
       for (const handler of webBackHandlersRef) {
@@ -1805,7 +1848,7 @@ function useWebBackHandler(webViewRef) {
     }
     webViewRef.current?.injectJavaScript(HISTORY_HOME_SCRIPT);
   }, [hasWebBackEvent, webBackHandlersRef, logging, webViewRef]);
-  return (0, import_react25.useMemo)(
+  return (0, import_react26.useMemo)(
     () => ({ addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange }),
     [addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange]
   );
@@ -1983,11 +2026,11 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 var import_native_modules16 = require("@apps-in-toss/native-modules");
 var import_react_native29 = require("@granite-js/react-native");
-var import_react26 = require("react");
+var import_react27 = require("react");
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = (0, import_react_native29.useVisibility)();
-  const [location, setLocation] = (0, import_react26.useState)(null);
-  (0, import_react26.useEffect)(() => {
+  const [location, setLocation] = (0, import_react27.useState)(null);
+  (0, import_react27.useEffect)(() => {
     if (!isVisible) {
       return;
     }
@@ -2006,11 +2049,11 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
 
 // src/hooks/useWaitForReturnNavigator.tsx
 var import_react_native30 = require("@granite-js/react-native");
-var import_react27 = require("react");
+var import_react28 = require("react");
 function useWaitForReturnNavigator() {
-  const callbacks = (0, import_react27.useRef)([]).current;
+  const callbacks = (0, import_react28.useRef)([]).current;
   const navigation = (0, import_react_native30.useNavigation)();
-  const startNavigating = (0, import_react27.useCallback)(
+  const startNavigating = (0, import_react28.useCallback)(
     (route, params) => {
       return new Promise((resolve) => {
         callbacks.push(resolve);
@@ -2019,7 +2062,7 @@ function useWaitForReturnNavigator() {
     },
     [callbacks, navigation]
   );
-  const handleVisibilityChange = (0, import_react27.useCallback)(
+  const handleVisibilityChange = (0, import_react28.useCallback)(
     (state) => {
       if (state === "visible" && callbacks.length > 0) {
         for (const callback of callbacks) {
@@ -2127,26 +2170,20 @@ function WebView({ type, local, onMessage, ...props }) {
   if (!TYPES.includes(type)) {
     throw new Error(`Invalid WebView type: '${type}'`);
   }
-  const webViewRef = (0, import_react28.useRef)(null);
+  const webViewRef = (0, import_react29.useRef)(null);
   const webBackHandler = useWebBackHandler(webViewRef);
-  const uri = (0, import_react28.useMemo)(() => getWebViewUri(local), [local]);
+  const uri = (0, import_react29.useMemo)(() => getWebViewUri(local), [local]);
   const top = (0, import_private9.useSafeAreaTop)();
   const bottom = (0, import_private9.useSafeAreaBottom)();
+  const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const global2 = getAppsInTossGlobals();
   const navigationBarContext = useNavigationBarContext();
-  const disableTextSelectionCSS = `
-    (function() {
-      const style = document.createElement('style');
-      style.textContent = '*:not(input):not(textarea) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }';
-      document.head.appendChild(style);
-    })();
-  `;
-  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react28.useState)(
+  const safeAreaInsetsEmitter = useSafeAreaInsetsEmitter();
+  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react29.useState)(
     props.allowsBackForwardNavigationGestures
   );
   const handler = useBridgeHandler({
     onMessage,
-    injectedJavaScript: [disableTextSelectionCSS].join("\n"),
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     eventListenerMap: {
       ...appsInTossEventBridges,
@@ -2159,6 +2196,12 @@ function WebView({ type, local, onMessage, ...props }) {
       },
       entryMessageExited: ({ onEvent, onError }) => import_native_modules18.appsInTossEvent.addEventListener("entryMessageExited", { onEvent, onError }),
       updateLocationEvent: ({ onEvent, onError, options }) => import_native_modules18.appsInTossEvent.addEventListener("updateLocationEvent", { onEvent, onError, options }),
+      safeAreaInsetsChange: ({ onEvent }) => {
+        safeAreaInsetsEmitter.on("safeAreaInsetsChange", onEvent);
+        return () => {
+          safeAreaInsetsEmitter.off("safeAreaInsetsChange", onEvent);
+        };
+      },
       /** @internal */
       appBridgeCallbackEvent: ({ onEvent, onError, options }) => import_native_modules18.appsInTossEvent.addEventListener("appBridgeCallbackEvent", { onEvent, onError, options }),
       /** AdMob */
@@ -2177,6 +2220,8 @@ function WebView({ type, local, onMessage, ...props }) {
       ...appsInTossConstantBridges,
       getSafeAreaTop: () => top,
       getSafeAreaBottom: () => bottom,
+      getSafeAreaLeft: () => insets.left,
+      getSafeAreaRight: () => insets.right,
       ...Object.fromEntries(Object.entries(global2).map(([key, value]) => [key, () => value])),
       /** AdMob */
       loadAdMobInterstitialAd_isSupported: import_native_modules18.GoogleAdMob.loadAdMobInterstitialAd.isSupported,
@@ -2221,7 +2266,7 @@ function WebView({ type, local, onMessage, ...props }) {
       completeProductGrant: import_native_modules18.IAP.completeProductGrant
     }
   });
-  const headerPropForExternalWebView = (0, import_react28.useMemo)(() => {
+  const headerPropForExternalWebView = (0, import_react29.useMemo)(() => {
     const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
     const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
     const withBackButton = parsedNavigationBar?.withBackButton ?? true;
@@ -2242,7 +2287,7 @@ function WebView({ type, local, onMessage, ...props }) {
     colorPreference: "light"
   });
   const refs = mergeRefs(handler.ref, webViewRef);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const callback = () => {
       webBackHandler.handleWebBack();
       return true;
@@ -2250,6 +2295,7 @@ function WebView({ type, local, onMessage, ...props }) {
     import_react_native33.BackHandler.addEventListener("hardwareBackPress", callback);
     return () => import_react_native33.BackHandler.removeEventListener("hardwareBackPress", callback);
   }, [webBackHandler]);
+  const globalScripts = useGlobalScripts();
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     BaseWebView,
     {
@@ -2277,13 +2323,74 @@ function WebView({ type, local, onMessage, ...props }) {
       webviewDebuggingEnabled: webViewDebuggingEnabled,
       thirdPartyCookiesEnabled: true,
       onMessage: handler.onMessage,
-      injectedJavaScript: handler.injectedJavaScript,
-      injectedJavaScriptBeforeContentLoaded: handler.injectedJavaScript,
+      injectedJavaScript: globalScripts.afterLoad,
+      injectedJavaScriptBeforeContentLoaded: mergeScripts(handler.injectedJavaScript, globalScripts.beforeLoad),
       decelerationRate: import_react_native33.Platform.OS === "ios" ? 1 : void 0,
       allowsBackForwardNavigationGestures
     }
   );
 }
+function useGlobalScripts() {
+  const global2 = getAppsInTossGlobals();
+  const disableTextSelectionCSS = `
+    const style = document.createElement('style');
+    style.textContent = '*:not(input):not(textarea) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }';
+    document.head.appendChild(style);
+  `;
+  const applyGameResourcesCache = `
+    (function () {
+      if (typeof caches === 'undefined') {
+        return;
+      }
+      const cacheKeyPrefix = '@apps-in-toss/caches/';
+      const cacheKey = \`\${cacheKeyPrefix}${global2.deploymentId}\`;
+      window.addEventListener('load', async () => {
+        const keys = await caches.keys();
+        for (const key of keys) {
+          if (key.startsWith(cacheKeyPrefix) && key !== cacheKey) {
+            await caches.delete(key);
+          }
+        }
+      });
+      window.fetch = new Proxy(window.fetch, {
+        async apply(originalFetch, thisArg, args) {
+          const request = new Request(args[0], args[1]);
+          if (!/\\.(data|wasm|framework\\.js)(?:\\.gz|\\.br|\\.unityweb)?$/.test(request.url)) {
+            return await originalFetch.call(thisArg, request);
+          }
+          const cache = await caches.open(cacheKey);
+          const cached = await cache.match(request);
+          if (cached) {
+            const eTag = cached.headers.get('ETag');
+            const lastModified = cached.headers.get('Last-Modified');
+            if (eTag) {
+              request.headers.set('If-None-Match', eTag);
+            }
+            if (lastModified) {
+              request.headers.set('If-Modified-Since', lastModified);
+            }
+            const revalidated = await originalFetch.call(thisArg, request);
+            if (revalidated.status === 304) {
+              return cached;
+            }
+            cache.put(request, revalidated.clone());
+            return revalidated;
+          }
+          const response = await originalFetch.call(thisArg, request);
+          cache.put(request, response.clone());
+          return response;
+        },
+      });
+    })();
+  `;
+  return {
+    beforeLoad: mergeScripts(global2.webViewType === "game" && applyGameResourcesCache),
+    afterLoad: mergeScripts(disableTextSelectionCSS)
+  };
+}
+function mergeScripts(...scripts) {
+  return scripts.filter((script) => typeof script === "string").join("\n");
+}
 
 // src/index.ts
 __reExport(src_exports, require("@apps-in-toss/analytics"), module.exports);

package/dist/index.js

@@ -1358,10 +1358,11 @@ import {
 import * as appsInTossAsyncBridges from "@apps-in-toss/native-modules/async-bridges";
 import * as appsInTossConstantBridges from "@apps-in-toss/native-modules/constant-bridges";
 import * as appsInTossEventBridges from "@apps-in-toss/native-modules/event-bridges";
+import { useSafeAreaInsets as useSafeAreaInsets4 } from "@granite-js/native/react-native-safe-area-context";
 import { getSchemeUri as getSchemeUri6 } from "@granite-js/react-native";
 import { ExternalWebViewScreen, tdsEvent } from "@toss/tds-react-native";
 import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop3 } from "@toss/tds-react-native/private";
-import { useEffect as useEffect12, useMemo as useMemo6, useRef as useRef6, useState as useState8 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo7, useRef as useRef6, useState as useState8 } from "react";
 import { BackHandler as BackHandler2, Platform as Platform6 } from "react-native";
 
 // src/components/GameWebView.tsx
@@ -1529,7 +1530,7 @@ var PartnerWebView = forwardRef2(function PartnerWebViewScreen({ onBackButtonCli
 });
 
 // src/bridge-handler/useBridgeHandler.tsx
-import { useCallback as useCallback10, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect11, useMemo as useMemo3, useRef as useRef4 } from "react";
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
@@ -1579,26 +1580,24 @@ function useBridgeHandler({
   onMessage,
   constantHandlerMap,
   asyncHandlerMap,
-  eventListenerMap,
-  injectedJavaScript: originalInjectedJavaScript
+  eventListenerMap
 }) {
   const ref = useRef4(null);
   const injectedJavaScript = useMemo3(
-    () => [
-      `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
-        Object.entries(constantHandlerMap).reduce(
-          (acc, [key, value]) => {
-            acc[key] = typeof value === "function" ? value() : value;
-            return acc;
-          },
-          {}
-        )
-      )};`,
-      originalInjectedJavaScript,
-      "true"
-    ].join("\n"),
-    [constantHandlerMap, originalInjectedJavaScript]
+    () => `window.__CONSTANT_HANDLER_MAP = ${JSON.stringify(
+      Object.entries(constantHandlerMap).reduce(
+        (acc, [key, value]) => {
+          acc[key] = typeof value === "function" ? value() : value;
+          return acc;
+        },
+        {}
+      )
+    )};`,
+    [constantHandlerMap]
   );
+  useEffect11(() => {
+    ref.current?.injectJavaScript(injectedJavaScript);
+  }, [injectedJavaScript]);
   const createHandleOnEvent = (functionName, eventId) => (response) => {
     ref.current?.injectJavaScript(`
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onEvent/${eventId}', ${JSON.stringify(response, null, 0)});
@@ -1613,7 +1612,7 @@ function useBridgeHandler({
   const $onMessage = useCallback10(
     async (e) => {
       onMessage?.(e);
-      const data = JSON.parse(e.nativeEvent.data);
+      const data = parseNativeEventData(e.nativeEvent.data);
       if (typeof data !== "object" || data === null || typeof data.functionName !== "string" || typeof data.eventId !== "string" || typeof data.type !== "string" || !["addEventListener", "removeEventListener", "method"].includes(data.type)) {
         return;
       }
@@ -1659,15 +1658,59 @@ function useBridgeHandler({
     onMessage: $onMessage
   };
 }
+function parseNativeEventData(data) {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
+// src/core/hooks/useSafeAreaInsetsEmitter.tsx
+import { useSafeAreaInsets as useSafeAreaInsets3 } from "@granite-js/native/react-native-safe-area-context";
+import { useEffect as useEffect12, useMemo as useMemo4 } from "react";
+var EventEmitter = class {
+  listeners = {};
+  on(event, listener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(listener);
+  }
+  emit(event, ...args) {
+    if (!this.listeners[event]) {
+      return;
+    }
+    this.listeners[event].forEach((listener) => listener(...args));
+  }
+  off(event, listener) {
+    if (!this.listeners[event]) {
+      return;
+    }
+    this.listeners[event] = this.listeners[event].filter((l) => l !== listener);
+  }
+};
+function useSafeAreaInsetsEmitter() {
+  const insets = useSafeAreaInsets3();
+  const emitter = useMemo4(() => new EventEmitter(), []);
+  useEffect12(() => {
+    emitter.emit("safeAreaInsetsChange", insets);
+    return () => {
+      emitter.off("safeAreaInsetsChange", (listener) => listener(insets));
+    };
+  }, [emitter, insets]);
+  return emitter;
+}
 
 // src/core/hooks/useWebBackHandler.tsx
 import { closeView as closeView6, useBackEventState } from "@granite-js/react-native";
 import { useDialog as useDialog7 } from "@toss/tds-react-native";
 import { josa as josa5 } from "es-hangul";
-import { useCallback as useCallback12, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo6 } from "react";
 
 // src/hooks/useWebviewHistoryStack.tsx
-import { useCallback as useCallback11, useMemo as useMemo4, useReducer } from "react";
+import { useCallback as useCallback11, useMemo as useMemo5, useReducer } from "react";
 var INITIAL_STATE = { stack: [], index: -1 };
 function reducer(state, action) {
   switch (action.type) {
@@ -1702,7 +1745,7 @@ function useWebViewHistory() {
   const onNavigationStateChange = useCallback11(({ url, canGoForward: canGoForward2 }) => {
     dispatch({ type: "NAVIGATION_CHANGE", url, canGoForward: canGoForward2 });
   }, []);
-  const { canGoBack, canGoForward } = useMemo4(() => {
+  const { canGoBack, canGoForward } = useMemo5(() => {
     const canBack = state.index > 0;
     const canFwd = state.index >= 0 && state.index < state.stack.length - 1;
     return { canGoBack: canBack, canGoForward: canFwd };
@@ -1790,7 +1833,7 @@ function useWebBackHandler(webViewRef) {
     }
     webViewRef.current?.injectJavaScript(HISTORY_HOME_SCRIPT);
   }, [hasWebBackEvent, webBackHandlersRef, logging, webViewRef]);
-  return useMemo5(
+  return useMemo6(
     () => ({ addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange }),
     [addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange]
   );
@@ -1968,11 +2011,11 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 import { startUpdateLocation } from "@apps-in-toss/native-modules";
 import { useVisibility as useVisibility3 } from "@granite-js/react-native";
-import { useEffect as useEffect11, useState as useState7 } from "react";
+import { useEffect as useEffect13, useState as useState7 } from "react";
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = useVisibility3();
   const [location, setLocation] = useState7(null);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isVisible) {
       return;
     }
@@ -2114,24 +2157,18 @@ function WebView({ type, local, onMessage, ...props }) {
   }
   const webViewRef = useRef6(null);
   const webBackHandler = useWebBackHandler(webViewRef);
-  const uri = useMemo6(() => getWebViewUri(local), [local]);
+  const uri = useMemo7(() => getWebViewUri(local), [local]);
   const top = useSafeAreaTop3();
   const bottom = useSafeAreaBottom();
+  const insets = useSafeAreaInsets4();
   const global2 = getAppsInTossGlobals();
   const navigationBarContext = useNavigationBarContext();
-  const disableTextSelectionCSS = `
-    (function() {
-      const style = document.createElement('style');
-      style.textContent = '*:not(input):not(textarea) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }';
-      document.head.appendChild(style);
-    })();
-  `;
+  const safeAreaInsetsEmitter = useSafeAreaInsetsEmitter();
   const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = useState8(
     props.allowsBackForwardNavigationGestures
   );
   const handler = useBridgeHandler({
     onMessage,
-    injectedJavaScript: [disableTextSelectionCSS].join("\n"),
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     eventListenerMap: {
       ...appsInTossEventBridges,
@@ -2144,6 +2181,12 @@ function WebView({ type, local, onMessage, ...props }) {
       },
       entryMessageExited: ({ onEvent, onError }) => appsInTossEvent4.addEventListener("entryMessageExited", { onEvent, onError }),
       updateLocationEvent: ({ onEvent, onError, options }) => appsInTossEvent4.addEventListener("updateLocationEvent", { onEvent, onError, options }),
+      safeAreaInsetsChange: ({ onEvent }) => {
+        safeAreaInsetsEmitter.on("safeAreaInsetsChange", onEvent);
+        return () => {
+          safeAreaInsetsEmitter.off("safeAreaInsetsChange", onEvent);
+        };
+      },
       /** @internal */
       appBridgeCallbackEvent: ({ onEvent, onError, options }) => appsInTossEvent4.addEventListener("appBridgeCallbackEvent", { onEvent, onError, options }),
       /** AdMob */
@@ -2162,6 +2205,8 @@ function WebView({ type, local, onMessage, ...props }) {
       ...appsInTossConstantBridges,
       getSafeAreaTop: () => top,
       getSafeAreaBottom: () => bottom,
+      getSafeAreaLeft: () => insets.left,
+      getSafeAreaRight: () => insets.right,
       ...Object.fromEntries(Object.entries(global2).map(([key, value]) => [key, () => value])),
       /** AdMob */
       loadAdMobInterstitialAd_isSupported: GoogleAdMob.loadAdMobInterstitialAd.isSupported,
@@ -2206,7 +2251,7 @@ function WebView({ type, local, onMessage, ...props }) {
       completeProductGrant: IAP.completeProductGrant
     }
   });
-  const headerPropForExternalWebView = useMemo6(() => {
+  const headerPropForExternalWebView = useMemo7(() => {
     const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
     const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
     const withBackButton = parsedNavigationBar?.withBackButton ?? true;
@@ -2227,7 +2272,7 @@ function WebView({ type, local, onMessage, ...props }) {
     colorPreference: "light"
   });
   const refs = mergeRefs(handler.ref, webViewRef);
-  useEffect12(() => {
+  useEffect14(() => {
     const callback = () => {
       webBackHandler.handleWebBack();
       return true;
@@ -2235,6 +2280,7 @@ function WebView({ type, local, onMessage, ...props }) {
     BackHandler2.addEventListener("hardwareBackPress", callback);
     return () => BackHandler2.removeEventListener("hardwareBackPress", callback);
   }, [webBackHandler]);
+  const globalScripts = useGlobalScripts();
   return /* @__PURE__ */ jsx16(
     BaseWebView,
     {
@@ -2262,13 +2308,74 @@ function WebView({ type, local, onMessage, ...props }) {
       webviewDebuggingEnabled: webViewDebuggingEnabled,
       thirdPartyCookiesEnabled: true,
       onMessage: handler.onMessage,
-      injectedJavaScript: handler.injectedJavaScript,
-      injectedJavaScriptBeforeContentLoaded: handler.injectedJavaScript,
+      injectedJavaScript: globalScripts.afterLoad,
+      injectedJavaScriptBeforeContentLoaded: mergeScripts(handler.injectedJavaScript, globalScripts.beforeLoad),
       decelerationRate: Platform6.OS === "ios" ? 1 : void 0,
       allowsBackForwardNavigationGestures
     }
   );
 }
+function useGlobalScripts() {
+  const global2 = getAppsInTossGlobals();
+  const disableTextSelectionCSS = `
+    const style = document.createElement('style');
+    style.textContent = '*:not(input):not(textarea) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }';
+    document.head.appendChild(style);
+  `;
+  const applyGameResourcesCache = `
+    (function () {
+      if (typeof caches === 'undefined') {
+        return;
+      }
+      const cacheKeyPrefix = '@apps-in-toss/caches/';
+      const cacheKey = \`\${cacheKeyPrefix}${global2.deploymentId}\`;
+      window.addEventListener('load', async () => {
+        const keys = await caches.keys();
+        for (const key of keys) {
+          if (key.startsWith(cacheKeyPrefix) && key !== cacheKey) {
+            await caches.delete(key);
+          }
+        }
+      });
+      window.fetch = new Proxy(window.fetch, {
+        async apply(originalFetch, thisArg, args) {
+          const request = new Request(args[0], args[1]);
+          if (!/\\.(data|wasm|framework\\.js)(?:\\.gz|\\.br|\\.unityweb)?$/.test(request.url)) {
+            return await originalFetch.call(thisArg, request);
+          }
+          const cache = await caches.open(cacheKey);
+          const cached = await cache.match(request);
+          if (cached) {
+            const eTag = cached.headers.get('ETag');
+            const lastModified = cached.headers.get('Last-Modified');
+            if (eTag) {
+              request.headers.set('If-None-Match', eTag);
+            }
+            if (lastModified) {
+              request.headers.set('If-Modified-Since', lastModified);
+            }
+            const revalidated = await originalFetch.call(thisArg, request);
+            if (revalidated.status === 304) {
+              return cached;
+            }
+            cache.put(request, revalidated.clone());
+            return revalidated;
+          }
+          const response = await originalFetch.call(thisArg, request);
+          cache.put(request, response.clone());
+          return response;
+        },
+      });
+    })();
+  `;
+  return {
+    beforeLoad: mergeScripts(global2.webViewType === "game" && applyGameResourcesCache),
+    afterLoad: mergeScripts(disableTextSelectionCSS)
+  };
+}
+function mergeScripts(...scripts) {
+  return scripts.filter((script) => typeof script === "string").join("\n");
+}
 
 // src/index.ts
 export * from "@apps-in-toss/analytics";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
@@ -56,11 +56,11 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/analytics": "1.4.5",
-    "@apps-in-toss/cli": "1.4.5",
-    "@apps-in-toss/native-modules": "1.4.5",
-    "@apps-in-toss/plugins": "1.4.5",
-    "@apps-in-toss/types": "1.4.5",
+    "@apps-in-toss/analytics": "1.4.7",
+    "@apps-in-toss/cli": "1.4.7",
+    "@apps-in-toss/native-modules": "1.4.7",
+    "@apps-in-toss/plugins": "1.4.7",
+    "@apps-in-toss/types": "1.4.7",
     "es-hangul": "^2.3.2"
   },
   "devDependencies": {
@@ -96,5 +96,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "62245d6361e8c062814ca80002b230ea281a15ff"
+  "gitHead": "9c3df99aae50b27ef775840416e7cc912de13c6a"
 }