Integração Webview

A NuVidio oferece diversas formas de integração, de modo a se adequar ao máximo possível as demandas do cliente. Uma dessas formas é a integração via Webview.

CAUTION
É importante salientar que as implementações abaixo são exemplos e estas podem conter erros. Tendo isso em vista, é importante salientar que sejam feitas as buscas necessárias nas documentações oficias para a uma implementação adequada.


Webview Android (Kotlin)

No arquivo activity_main.xml do seu projeto adicione a importação da tag Webview conforme abaixo.

\<androidx.constraintlayout.widget.ConstraintLayout  
  xmlns:android="<http://schemas.android.com/apk/res/android">  
  xmlns:tools="<http://schemas.android.com/tools">  
  android:layout_width="match_parent"  
  android:layout_height="match_parent"  
  tools:context=".MainActivity"

<WebView
  android:id="@+id/webView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
/>
    
\</androidx.constraintlayout.widget.ConstraintLayout>

Adicione o trecho de código abaixo no seu arquivo MainActivity.kt

Kotlin

package com.example.webview_kotlin

import android.os.Bundle  
import android.webkit.WebViewClient  
import androidx.appcompat.app.AppCompatActivity  
import kotlinx.android.synthetic.main.activity_main.\*

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity_main);

webView.webViewClient = WebViewClient();
webView.loadUrl("https://www.suaurl.com/");
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setOverScrollMode(View.OVER_SCROLL_NEVER);
webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    
 }

  override fun onBackPressed() {  
    if (webView.canGoBack())  
        webView.goBack();  
    else  
        super.onBackPressed();  
  }  
}

Adicione a permissão no arquivo AndroidManifest.xml.


<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.webview_kotlin">

<!-- Dê a permissão para acesso à internet -->
<uses-permission android:name="android.permission.INTERNET"/>
  
<application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:supportsRtl="true"
       android:theme="@style/AppTheme">  
       <activity android:name=".MainActivity">  
           <intent-filter>  
               <action android:name="android.intent.action.MAIN" />  
               <category android:name="android.intent.category.LAUNCHER" />  
           </intent-filter>  
       </activity>  
   </application>  
</manifest>

Referência: Confira este artigo sobre Android WebView em Kotlin.


Webview IOS (swift)

Abaixo segue um exemplo de implementação.

import UIKit  
import WebKit  
class ViewController: UIViewController, WKUIDelegate {

var webView: WKWebView!

override func viewDidLoad() {
    super.viewDidLoad()
    
    let myURL = URL(string:"https://www.apple.com")
    let myRequest = URLRequest(url: myURL!)
    let preferences = WKPreferences()
    let configuration = WKWebViewConfiguration()

    preferences.javaScriptEnabled = true
    preferences.allowsInlineMediaPlayback = true
    preferences.mediaTypesRequiringUserActionForPlayback = .all
    preferences.contentInsetAdjustmentBehavior = .never

    configuration.preferences = preferences
    webView = WKWebView(frame: view.bounds, configuration: configuration)
    webView.scrollView.alwaysBounceVertical = false;
    webView.scrollView.bounces = false;
    view.addSubview(webView)

    webView.load(myRequest)
}}

Para mais informações, consulte a documentação do WKWebView.


Webview React Native

import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {

  
  // ...code...
  
  <WebView
    source={{ uri: url }}
    ref={webviewRef}
    javaScriptEnabled
    domStorageEnabled
    useWebKit
    bounces={false}
    originWhitelist={['*']}
    mediaPlaybackRequiresUserAction={false}
    allowsInlineMediaPlayback    
    automaticallyAdjustContentInsets={false}
    onLoadProgress={event => {
      webviewRef.current.url = event.nativeEvent.url;
      setUrl(event.nativeEvent.url);
    }}
    onNavigationStateChange={navState => {
      if (!navState.url.includes('/login')) {
        webviewRef.current.canGoBack = navState.canGoBack;
        webviewRef.current.url = navState.url;
        setUrl(navState.url);
      }
    }}
    onMessage={message => handleEvent(message)}
  />

  // ...code...


Webview Flutter

 import 'dart:io';

 import 'package:webview_flutter/webview_flutter.dart';

 class WebViewExample extends StatefulWidget {
   @override
   WebViewExampleState createState() => WebViewExampleState();
 }

 class WebViewExampleState extends State<WebViewExample> {
   @override
   void initState() {
     super.initState();     
     if (Platform.isAndroid) WebView.platform = AndroidWebView();
   }

   @override
   Widget build(BuildContext context) {
     return WebView(
       initialUrl: 'https://flutter.dev',
       javascriptMode: JavascriptMode.enabled,
       initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
      allowsInlineMediaPlayback: true,
     );
   }
 }

Para mais informações, consulte a documentação do webview_flutter 3.0.4.