如何在Android中使用Firebase建立動態WebView?


WebView 允許使用者在其 Android 應用中整合網頁,從而帶來整合的使用者體驗。雖然靜態 WebView 實現非常簡單,但該元件的真正用處在於它能夠從多個來源(如 Firebase)動態載入內容,以使應用保持最新資訊。

使用的方法

  • Firebase 與動態 WebView 整合

Firebase 與動態 WebView 整合

演算法

  • 設定 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 {

	// creating a variable for our Firebase Database.
	FirebaseDatabase firebaseDatabase;
	
	// creating a variable for our Database
	// Reference for Firebase.
	DatabaseReference databaseReference;
	
	// creating a variable for our webview
	private WebView webView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		// initializing variable for web view.
		webView = findViewById(R.id.idWebView);
		
		// below line is used to get the instance
		// of our Firebase database.
		firebaseDatabase = FirebaseDatabase.getInstance();
		
		// below line is used to get reference for our database.
		databaseReference = firebaseDatabase.getReference("url");
		
		// calling method to initialize
		// our web view.
		initializeWebView();
	}

	private void initializeWebView() {

		// calling add value event listener method for getting the values from database.
		databaseReference.addValueEventListener(new ValueEventListener() {
			@Override
			public void onDataChange(@NonNull DataSnapshot snapshot) {
				// this method is call to get the realtime updates in the data.
				// this method is called when the data is changed in our Firebase console.
				// below line is for getting the data from snapshot of our database.
				String webUrl = snapshot.getValue(String.class);
				
				// after getting the value for our webview url we are
				// setting our value to our webview view in below line.
				webView.loadUrl(webUrl);
				webView.getSettings().setJavaScriptEnabled(true);
				webView.setWebViewClient(new WebViewClient());
			}

			@Override
			public void onCancelled(@NonNull DatabaseError error) {
				// calling on cancelled method when we receive
				// any error or we are not able to get the data.
				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。

更新於: 2023年7月31日

407 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告