WebView-RN

(WebView‑обёртка для сайта , React Native)

Небольшой шаблон и руководство по быстрому созданию мобильного приложения на базе существующего сайта с использованием WebView — простого, кроссплатформенного и гибкого подхода.

---

📌 Возможности

• Одностраничное приложение: весь сайт в WebView
• Нативный сплэш‑скрин и значок приложения (иконка, launch screen)
• Индикатор загрузки, обработка ошибок и состояния сети
• Обработка Android‑Back, нативная навигация (header/back buttons)
• JS‑bridge: вызовы из Web → React Native → Web и обратно
• Доступ к геолокации, push‑уведомлениям, share меню, документ‑сканам и др.
• Кеширование, offline‑режим, CodePush‑обновления

⚠️ Важно при публикации в App Store

Apps that are simply web sites bundled as Apps "may be rejected"
"Your app should include features, content, and UI that elevate it beyond a repackaged website"
:contentReference[oaicite:0]{index=0}

Чтобы проходить review, нужно добавить нативные фичи (push‑уведомления, offline‑режим, share‑actions, QR‑сканер, биометрию и т. п.) и визуально "превратить веб в app" :contentReference[oaicite:1]{index=1}.

---

⚙️ Требования

• Node.js ≥ 18
• React Native ≥ 0.70 (или Expo SDK ≥ 48)
• react-native-webview последней версии (вдобавок к core RN)
  (раньше был встроен, с 2024 переведён в отдельный модуль) :contentReference[oaicite:2]{index=2}
• На Android: AndroidManifest.xml прописано <uses-permission android:name="android.permission.INTERNET" />; при http‑лочках — <application android:usesCleartextTraffic="true">
• На iOS: при «не‑https» доменах — добавить NSAllowsArbitraryLoads в Info.plist

---

🚀 Быстрый старт (Expo)

npx create-expo-app webview-wrapper
cd webview-wrapper
expo install react-native-webview

Замените App.js:

import React, { useRef, useState, useEffect } from 'react';
import { SafeAreaView, View, ActivityIndicator, Platform, BackHandler, Share } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  const webview = useRef(null);
  const [canGoBack, setCanGoBack] = useState(false);
  const [loading, setLoading] = useState(true);

  const onNavState = (nav) => {
    setCanGoBack(nav.canGoBack);
  };

  useEffect(() => {
    const onBackPress = () => {
      if (canGoBack) {
        webview.current.goBack();
        return true;
      }
      return false;
    };
    BackHandler.addEventListener('hardwareBackPress', onBackPress);
    return () =>
      BackHandler.removeEventListener('hardwareBackPress', onBackPress);
  }, [canGoBack]);

  const injectedJS = `
    window.isNativeApp = true;
    true;
  `;

  return (
    <SafeAreaView style={{ flex: 1 }}>
      {loading && (
        <View
          style={{
            position: 'absolute',
            top: 0, left: 0, right: 0, bottom: 0,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#fff'
          }}
        >
          <ActivityIndicator size="large" />
        </View>
      )}

      <WebView
        ref={webview}
        source={{ uri: 'https://example.com' }}
        onNavigationStateChange={onNavState}
        injectedJavaScriptBeforeContentLoaded={injectedJS}
        onLoadEnd={() => setLoading(false)}
        onMessage={(e) => {
          /* пример: пост‑сообщения Web → RN */
          const { data } = e.nativeEvent;
          console.log('Message from Web:', data);
        }}
        javaScriptEnabled
        domStorageEnabled
      />

      <View style={{ position: 'absolute', bottom: 16, right: 16 }}>
        <ActivityIndicator size="small" color="#000" />
      </View>
    </SafeAreaView>
  );
}

Теперь:

• При Android‑Back будет навигация WebView ←
• Загрузка и индикатор сплэша
• injectedJavaScriptBeforeContentLoaded перед загрузкой
• onMessage() для связи с Web

---

📚 Подключение нативных фич

✅ Offline‑режим и Easy Error‑Screen

• Используйте @react-native-community/netinfo для проверки сети (см. onError, renderError в WebView)
• При отсутствии сети показывайте родной View с кнопкой повторить загрузку или кешом

✅ Push‑уведомления

• Expo Push/OneSignal для нативных push
• На сайте отправьте запрос JS в Web, а в приложении — native диалог + action

✅ Share и Deep Link

window.ReactNativeWebView.postMessage(
  JSON.stringify({ action: 'share', url: location.href })
);

В RN:

onMessage={({ nativeEvent }) => {
  const msg = JSON.parse(nativeEvent.data);
  if (msg.action === 'share') Share.share({ url: msg.url });
}}

✅ Навигация и наведение по URL

• Используйте onShouldStartLoadWithRequest (iOS/Android ≥0.57)
• Перехватывайте внешние ссылки (target="_blank"), обрабатывайте либо открывайте через Linking

---

🧾 Для публикации в App Store и Google Play

Apple App Store

• Минимум требований Guideline 4.2 / 2.12: должно быть больше, чем просто сайт в WebView ([apple.stackexchange.com][1])
• Укажите Privacy Policy и предоставьте правила конфиденциальности
• Используйте WKWebView (a.k.a. react-native-webview) без UIWebView — иначе возможен rejection по deprecated API ([stackoverflow.com][2])
• В App Store Connect при review: кратко опишите JS‑bridge и push‑фичи в notes

Google Play Store

• Менее жёсткие правила, но всё равно рекомендуется добавить офлайн‑режим и нативную навигацию
• При финальной сборке подпишите APK для release (jks‑ключ и gradle)

---

🧪 Полезные доработки

• Splash-сцена: Android — android/app/src/main/res/splash.xml Custom, iOS — LaunchImage/Xcode Asset.
• Значки приложения: Expo config → app.json (значки, разрешения).
• OTA‑обновления: Используйте Microsoft CodePush или Expo Updates, если сайт обновляется без билда приложения.
• Инжект скриптов: injectedJavaScript, injectJavaScript() после навигации (onLoadEnd)
• JS → RN → JS пример в шаблоне

---

📁 Структура проекта

/webview-wrapper
  ├─ App.js                <-- наш главный WebView
  ├─ assets/               <-- иконки, splash, изображения
  ├─ package.json        
  ├─ app.json              <-- Expo: название, versionCode, etc.
  ├─ android/...           <-- Android: splash, манифест
  └─ ios/...               <-- iOS: App‑ID, Info‑plist, права

---

🚧 Отладка и распространённые ошибки

Ошибка / Симптом	Причина / Решение
requireNativeComponent: "RNCWebView" was not found	Кэш/подключение react-native-webview сломано. Удалите node_modules, сбросьте Pods, выполните pod install.
App crashes on iOS при open в WebView	Нужен WKWebView, убедитесь, что v > 11.0 библиотеки; удалите UIWebView.
Android‑Back закрывает приложение	Не возвращён true из обработчика Web Back (BackHandler).
Серый фон / SafeArea не учитывается	Используйте SafeAreaView (iOS) и statusBarHeight (Android).

---

🚩 Заключение

Этот подход — быстрый старт для превращения существующего веба в мобильное приложение. Но для успешной публикации особенно в App Store, важно не ограничиваться только обёрткой: добавить нативные фичи и офлайн‑режим, позаботиться о пользовательском UX, и лишь потом — деплоять.