本篇開始前，還是來看一下真實的內部討論情況

PM：剩下十天，APP地圖功能還沒做，怎麼辦
工程師：先使用WebView把現有網頁鑲嵌上去?
PM：「越快越好」、「工程師要自己想辦法」

Webview 簡介 & 安裝

WebView 在 React Native 0.59之後已被棄用
https://archive.reactnative.dev/docs/webview

本篇會介紹官方推薦的第三方套件「react-native-webview」
GitHub連結：https://github.com/react-native-webview/react-native-webview
版本：13.2.2

簡介

WebView能讓React Native APP放置外部網頁
套件也提供與外部網頁JavaScript互動的功能，實用度相當高
也就是不用開發APP就能完成功能😜

若自身已經是Web工程師
對於開發熟練度，Web開發速度一定比APP快
可以在規劃專案時，設計部分功能為RWD網頁，提供APP嵌入使用
※Web工程師可以當作這是APP版的iframe元素

安裝指令

npx expo install react-native-webview

Webview 使用時機 & 方法

日常使用APP時，哪裡會看到WebView?

1. FaceBook 新聞系列粉專張貼的外部新聞
2. 健保快易通功能中的醫材比價網
3. 其他APP會開啟外部連結皆是

基本使用方法

範例會將內政地理資訊圖資雲整合服務平台(TGOS)嵌入至APP中

import WebView from "react-native-webview";
<WebView
    className="flex-1 mt-6"
    source={{
        uri: "https://map.tgos.tw/TGOSCloudMap",
    }}
/>

• 當作一般的View做樣式設定即可
• source uri 鑲嵌來源網址，可依照需求，使用JavaScript語法組裝uri
  範例為GoogleMap輸入網址參數q後，直接導向此地點
  q=你要指定的地點
  https://google.com.tw/maps?q=%E7%A4%BE%E5%AD%90%E5%B3%B6+%E5%B3%B6%E9%A0%AD%E5%85%AC%E5%9C%92
  島上擁有美麗的風景，適合散步、騎單車🥰

結果看起來
就像是你的APP已經有地圖功能一樣
實際專案不要這樣偷人家的網頁來用😲

WebView詳細語法

開發完後才發現
ＷebView其實有許多的互動方法
有其他特殊需求者可以參考此文件
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md

Webview 注意事項

資訊安全問題

在行動應用APP資安基準V3.2提到

針對「Webview 安全檢測」之檢測項目，L1、L2、L3 行動應用程式於
「4.2.2.1.2. 行動應用程式於 Webview 呈現功能時，所連線之網域應為
安全網域」檢測結果須為「符合要求」，始符合本資訊安全技術要求事
項；否則未符合本資訊安全技術要求事項。

資安驗證要點為：

須驗證 Cross-Site Scripting 以及 Injection Flaws 檢查是否
全數通過

懶人包：
若公司專案會要求你通過行動應用APP檢測時
除了APP本身要送測之外
WebView嵌入的網站，也必須經過弱點掃描

有關APP資安檢測相關可以參考這篇鐵人文章

LAG、網站伺服器負擔問題

畢竟是APP幫你連網頁，在使用上不一定像操作APP一樣順暢
也同時須連線網路
非常依賴使用者的Wifi or 4G/5G網路效能

若頻繁連線外部網頁
還會造成外部網站伺服器的負擔

過度依賴WebView

善用WebView或許能縮短APP的開發時間
但一個APP專案裡使用過多的WebView
若網站伺服器有停機、轉址、網址參數更新...等問題
APP在開WebView時，就會一片空白

客戶或使用者會覺得
是不是你們APP不太穩定🤬

結語：
看完了WebView的使用方法、優缺點後
了解自己的哪些需求可以使用WebView

因為單人開發的緣故
Web做完之後，自己在鑲嵌進APP🤨
可以的話，先跟業務/客戶討論哪些功能需由網頁開發讓APP嵌入
讓專案分工更為清楚

下一篇要來介紹第三方元件
「日期時間選擇元件」- React Native Datetimepicker
讓你的APP能跨平台提供使用者選擇日期時間。