Глава 1.7: Гибридные фреймворки и обёртки

my-app/
├── config.xml              # Конфигурация приложения
├── www/                    # Веб-контент
│   ├── index.html
│   ├── css/
│   ├── js/
│   └── img/
├── platforms/              # Нативные проекты
│   ├── android/
│   └── ios/
├── plugins/                # Установленные плагины
│   ├── cordova-plugin-camera/
│   └── cordova-plugin-geolocation/
└── hooks/                  # Скрипты для сборки

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.myapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets">
    <name>MyApp</name>
    <description>My Cordova App</description>
    <author>Me</author>
    
    <content src="index.html" />
    
    <!-- Настройки WebView -->
    <preference name="android-minSdkVersion" value="21" />
    <preference name="android-targetSdkVersion" value="33" />
    <preference name="deployment-target" value="12.0" />
    
    <!-- Разрешения -->
    <plugin name="cordova-plugin-camera" spec="^6.0.0" />
    <plugin name="cordova-plugin-geolocation" spec="^4.1.0" />
    
    <!-- Доступ к доменам -->
    <access origin="*" />
    <allow-navigation href="*" />
</widget>

// Ждём загрузки Cordova
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    console.log('Cordova готова к работе');
}

// Функция для съёмки фото
function takePicture() {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA
    });
}

function onSuccess(imageURI) {
    console.log('Фото сделано:', imageURI);
    document.getElementById('myImage').src = imageURI;
}

function onFail(message) {
    console.error('Ошибка:', message);
}

my-app/
├── capacitor.config.json   # Конфигурация Capacitor
├── package.json            # Зависимости Node.js
├── src/                    # Веб-контент (React/Vue/Angular)
│   ├── index.html
│   ├── App.jsx
│   └── ...
├── android/                # Нативный проект Android (полноценный)
│   ├── app/
│   ├── build.gradle
│   └── ...
├── ios/                    # Нативный проект iOS (полноценный)
│   ├── App/
│   ├── Podfile
│   └── ...
└── node_modules/

{
  "appId": "com.example.myapp",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "androidScheme": "https"
  },
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    "Keyboard": {
      "resize": "body"
    }
  }
}

import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
import { Toast } from '@capacitor/toast';

// Съёмка фото
async function takePicture() {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  
  console.log('Фото:', image.webPath);
  document.getElementById('myImage').src = image.webPath;
}

// Получение геолокации
async function getCurrentPosition() {
  const coordinates = await Geolocation.getCurrentPosition();
  console.log('Координаты:', coordinates);
  
  await Toast.show({
    text: `Широта: ${coordinates.coords.latitude}`,
    duration: 'short'
  });
}

// Проверка разрешений
async function checkPermissions() {
  const permissions = await Camera.checkPermissions();
  if (permissions.camera !== 'granted') {
    await Camera.requestPermissions();
  }
}

import React from 'react';
import { WebView } from 'react-native-webview';

function MyWebScreen() {
  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      style={{ flex: 1 }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      startInLoadingState={true}
      // Обработка навигации
      onShouldStartLoadWithRequest={(request) => {
        // Блокируем внешние ссылки
        if (request.url.startsWith('https://external.com')) {
          Linking.openURL(request.url);
          return false;
        }
        return true;
      }}
      // Обработка ошибок
      onError={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        console.error('WebView error:', nativeEvent);
      }}
      // Обработка загрузки
      onLoadEnd={() => {
        console.log('WebView loaded');
      }}
    />
  );
}

export default MyWebScreen;

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

function BridgeExample() {
  const webViewRef = useRef(null);

  // Отправка сообщения из React Native в WebView
  const sendMessageToWeb = () => {
    const message = JSON.stringify({ type: 'greeting', text: 'Hello from RN!' });
    webViewRef.current?.injectJavaScript(`
      window.receiveMessage(${message});
      true; // Обязательно верните true
    `);
  };

  // Получение сообщения из WebView
  const handleMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    console.log('Message from web:', data);
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://example.com' }}
      onMessage={handleMessage}
      injectedJavaScript={`
        // Функция для получения сообщений от React Native
        window.receiveMessage = function(data) {
          console.log('Received:', data);
          // Отправляем ответ обратно
          window.ReactNativeWebView.postMessage(JSON.stringify({
            type: 'response',
            text: 'Hello from web!'
          }));
        };
        true;
      `}
    />
  );
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <button onclick="sendToRN()">Отправить в React Native</button>
  
  <script>
    // Отправка сообщения в React Native
    function sendToRN() {
      const message = { type: 'buttonClick', value: 42 };
      window.ReactNativeWebView.postMessage(JSON.stringify(message));
    }
    
    // Получение сообщения от React Native
    window.receiveMessage = function(data) {
      console.log('Получено от RN:', data);
      alert('Получено: ' + data.text);
    };
  </script>
</body>
</html>

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewScreen extends StatefulWidget {
  @override
  _WebViewScreenState createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    
    // Инициализация контроллера
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            print('Загрузка: $progress%');
          },
          onPageStarted: (String url) {
            print('Страница начала загружаться: $url');
          },
          onPageFinished: (String url) {
            print('Страница загружена: $url');
          },
          onWebResourceError: (WebResourceError error) {
            print('Ошибка: ${error.description}');
          },
          onNavigationRequest: (NavigationRequest request) {
            // Блокируем внешние ссылки
            if (request.url.startsWith('https://external.com')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://example.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView')),
      body: WebViewWidget(controller: controller),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // Выполнение JavaScript
          String title = await controller.runJavaScriptReturningResult('document.title');
          print('Заголовок: $title');
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class InAppWebViewScreen extends StatefulWidget {
  @override
  _InAppWebViewScreenState createState() => _InAppWebViewScreenState();
}

class _InAppWebViewScreenState extends State<InAppWebViewScreen> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('InAppWebView')),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse('https://example.com')),
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            javaScriptEnabled: true,
            databaseEnabled: true,
          ),
        ),
        onWebViewCreated: (controller) {
          webViewController = controller;
          
          // Регистрация JavaScript Handler
          controller.addJavaScriptHandler(
            handlerName: 'myHandler',
            callback: (args) {
              print('Вызов из JS: ${args[0]}');
              return 'Ответ из Flutter';
            },
          );
        },
        onLoadStop: (controller, url) async {
          print('Страница загружена: $url');
          
          // Внедрение JavaScript
          await controller.evaluateJavascript(source: '''
            window.flutterHandler = function(message) {
              return window.flutter_inappwebview.callHandler('myHandler', message);
            };
          ''');
        },
        onConsoleMessage: (controller, consoleMessage) {
          print('Console: ${consoleMessage.message}');
        },
      ),
    );
  }
}

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "description": "A Progressive Web App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

// Регистрация Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker зарегистрирован:', registration);
    })
    .catch(error => {
      console.error('Ошибка регистрации:', error);
    });
}

// Кэширование ресурсов
const CACHE_NAME = 'my-app-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/icons/icon-192x192.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Кэширование ресурсов');
        return cache.addAll(urlsToCache);
      })
  );
});

// Обработка запросов
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Возвращаем кэшированный ресурс или загружаем из сети
        return response || fetch(event.request);
      })
  );
});