如何使用 Firebase 在 Android 中创建动态 WebView?

WebView 允许用户将网页集成到他们的 Android 应用中，从而带来一体化的用户体验。虽然静态 WebView 实现很简单，但该组件的实际用处在于它能够从 Firebase 等众多来源动态加载内容，从而使应用保持最新信息。

使用的方法

• WebView 与 Firebase 的动态集成

WebView 与 Firebase 的动态集成

算法

• 设置 Firebase

• 设置 Android 项目

• 创建 WebViewActivity

• 创建布局文件

• 更新 AndroidManifest.xml 文件

示例

XML程序

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	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">

	<!--Web View for displaying our web pages-->
	<WebView
		android:id="@+id/idWebView"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />
	
</RelativeLayout>

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Java 程序

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

public class MainActivity extends AppCompatActivity {

    // 为 Firebase 数据库创建一个变量。
    FirebaseDatabase firebaseDatabase;
    
    // 为数据库创建一个变量
    // Firebase 的引用。
    DatabaseReference databaseReference;
    
    // 为 WebView 创建一个变量
    private WebView webView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 初始化 Web 视图的变量。
        webView = findViewById(R.id.idWebView);
        
        // 下面一行用于获取 Firebase 数据库的实例。
        // FirebaseDatabase = FirebaseDatabase.getInstance();
        
        // 下面一行用于获取数据库的引用。
        databaseReference = firebaseDatabase.getReference("url");
        
        // 调用方法初始化 Web 视图。
        // InitializeWebView();
	}

	private void initializeWebView() {

		// 调用添加值事件监听器方法从数据库中获取值。
		databaseReference.addValueEventListener(new ValueEventListener() {
			@Override
			public void onDataChange(@NonNull DataSnapshot snapshot) {
                // 调用此方法获取数据的实时更新。
                // 当 Firebase 控制台中的数据发生变化时，会调用此方法。
                // 下面一行用于从数据库快照中获取数据。
                String webUrl = snapshot.getValue(String.class);
                
                // 获取 webview url 的值后，我们
                // 在下面一行中将值设置到 webview 视图中。
                webView.loadUrl(webUrl);
                webView.getSettings().setJavaScriptEnabled(true);
                webView.setWebViewClient(new WebViewClient());
			}

			@Override
			public void onCancelled(@NonNull DatabaseError error) {
				// 当我们收到时调用已取消的方法
				// 任何错误或者我们无法获取数据。
				Toast.makeText(MainActivity.this, "Fail to get URL.", Toast.LENGTH_SHORT).show();
			}
		});
	}
}

输出

总结

在本课中，我们学习了如何在 Android 中开发集成 Firebase 的动态 WebView。您可以将 Android 提供的强大 WebView 组件与 Firebase 的实时数据功能相结合，从而为您的 Android 应用打造流畅且引人入胜的用户体验。我们首先为您的 Android 应用配置 Firebase，确保您拥有所有必需的依赖项和配置文件。然后，我们开发了一个 WebViewActivity 作为 WebView 的容器。我们初始化了 WebView 并配置了其设置，例如启用 JavaScript 以及在此活动中配置 WebViewClient 和 WebChromeClient。

相关文章

• 如何在 Android 按钮中创建阴影?
• 如何开发 Android 软键盘?
• 如何在 Android 中更改 WebView 的字体?
• 如何在 Android 上为视图背景颜色的变化添加动画效果?
• 如何在 Android 中点击通知按钮后关闭通知面板?
• 如何在 Android 中创建点击后不会消失的通知?
• 如何在 Android 通知中添加按钮?
• 如何在 Android 中向 PreferenceScreen 添加按钮?
• 如何在 Android ActionBar 中隐藏和显示菜单项?
• 如何在 Android 中将颜色整数转换为十六进制字符串?