關於 WebView: 10 件你需要知道的事

    Ten Things You Need to Know About WebView 是美國微軟資深工程師 Matt Small 發表的文章,我發現有幾點特別值得提出來說明,讓大家更了解 WebView 在 Windows Store App 的應用,希望對大家有幫助;其文後有他的範例程式碼供下載。
    以下是他列出的 10 點需要注意的事:
    1. WebView is not a general-purpose browser
      • WebView 這個控制項的目的,是讓你能在 App 裡,連結到某個特定的網頁,以達到此 App 所欲提供的功能;而非讓使用者能任意瀏覽任何網頁。舉例來說,如果有些特定資訊可能會時常變動 (如即時路況等),與其重新上架你的 App,將這資訊放在 WebView 當然比較適當;但如果你的 App 只是純粹作為一個入口,僅是讓使用者透過 WebView 瀏覽到某個網站首頁,再讓使用者在網站中任意點選連結的話,是非常有可能在上架審查中被退件的。
    2. WebView always renders on top of XAML
      • 這點還滿有趣的,你會發現在 XAML 中 WebView 不論放在什麼位置,程式跑起來時 WebView 一定會擋在所有的控制項之上。原因是 WebView 並非 Control object 的 subclass 的關係;原文連結裡有解法可參考。
    3. WebView doesn’t do Flash.  Or Silverlight.  Or PDF.  Or any other ActiveX control or plugin.
      • 如第1點所言, WebView 並非是一個完整的瀏覽器,為了穩定性及效能的原因並不支援 Flash, Silverlight, PDF or ActiveX,同時「目前」也不支援某些 HTML5 的功能,如 AppCache, IndexedDB, programmatic access to the Clipboard, or geolocation.
    4. How to invoke Javascript inside the displayed webpage of a Webview
      • 簡單來說 WebView 可以透過 ms-appx-web 讀取並展示已包含在你的 App 專案中的 HTML 檔案,甚至執行其中的 JavaScript 副程式。而以下的 5, 6, 8 三點都算是延伸此點的應用。
    5. How to receive information from the WebView
    6. How to inject javascript into a WebView page
    7. How to clear the WebView cache
      • 很不幸的,並無法透過程式的方式來清除 WebView cache,只能透過 command line 的方式: C:Users<username>AppDataLocalPackages<PackageName>Attrib –H –S /S /D
    8. How to embed a font into your app to be used by WebView
    9. Launching other apps from a link inside WebView
      • 如何在 WebView link 中開啟其他的 App 呢? 其實 Windows Store Apps 是沒有辦法「直接」開啟某個 App 的,但能透過 Extension handlers 的「間接」方式來開啟某特定 App,也就是設定某副檔名 (extension) 的檔案 (如:.jpeg 檔) 可以用某個 App 開啟。如以下在專案的 .appxmanifest >「宣告」>「檔案類型宣告」作設定即可:
      • image
    10. How to get rid of those annoying JavaScript exceptions when debugging
      • 在 debug 時當 WebView 瀏覽到的網頁出現 JavaScript 例外,會出現 Just-In-Time Debugger 的惱人錯誤 (如例圖),要關掉它很簡單,只要在 Visual Studio 2012 中作以下設定即可:
      • Debug > Options and Settings > Debugging > Just-In-Time > Uncheck "Script"
      • 偵錯 > 選項和設定> 偵錯 > Just-In-Tim > 取消勾選「指令碼」
      • image
        其實以上大部份的內容在 WebView 的 MSDN 官方文件的 Remakrs 段落中都有說明,只是可能沒有很細節的描述,在此也一併轉貼如下給大家參考:
        Remarks
        WebView is not a Control subclass and thus does not have a control template. The display area is the Width and Height.
        WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through the SourceName property. WebViewBrush does not have this overlay limitation.
        If you want to display an interactive WebView that only occasionally has overlapping content (such as a drop-down list or app bar), you can temporarily hide the WebView control when necessary, replacing it with an element using a WebViewBrush fill. Then, when the overlapping content is no longer present, you can display the original WebView again. For more info, see the WebView control sample.
        WebView doesn’t support many of the UIElement events like KeyDown, KeyUp, and PointerPressed. A common workaround to this problem is to use WebView.InvokeScript with eval to use the HTML event handlers, and to use window.external.notify from the HTML event handler to notify the application using WebView.ScriptNotify.
        Note WebView always uses Internet Explorer 10 in document mode. Additionally, WebView does not currently support some HTML5 features including AppCache, IndexedDB, programmatic access to the Clipboard, or geolocation. Furthermore, WebView does not support the ms-appdata scheme, although it does support the ms-appx-web scheme. This enables you to load content files in your project.

      如何偵測目前所在位置 (Geolocation)

      許多的 Apps 都需要取得目前裝置的所在位置,才能進行如路線規劃、查詢附近美食等各式應用。而這類與裝置有關的 API ,Windows Runtime (WinRT) 都已經系統化的整理,讓 Windows Store App 開發者用很精簡的程式即能達到目的;以下就以如何取得所在位置的經緯度作介紹:

       

      於 Visual Studio 2012 (Express 版本免費下載) 之中新增一個 C# “空白Windows 市集”專案,然後在 MainPage.xaml 中加入一個 Button 及 WebView 元件如下:

      image

      新增以下這一行在 MainPage.xaml.cs 的前面:

      using Windows.Devices.Geolocation;

      雙點 Button,然後實作此按鍵的方法如下:

      private async void Button_Click_1(object sender, RoutedEventArgs e)
      {
          Geolocator geo = new Geolocator();
          Geoposition pos = await geo.GetGeopositionAsync();
      
          // 緯度+經度
          string strSADDR = 
               pos.Coordinate.Latitude.ToString() + "," 
               + pos.Coordinate.Longitude.ToString();
          // 以 Google Map 為例
          webView.Source = 
               new Uri(Uri.EscapeUriString(https://maps.google.com/?num=1&q= 
               + strSADDR));
      
      }

      請注意以上程式,我們只用了一個 GetGeopositionAsync() 方法就順利取得裝置的所在位置了! 同時,由於這個方法是一個 Async call,所以你需要在呼叫這個方法的函式之前加上 async 的宣告,否則會發生編譯錯誤。

       

      接下來,我們即可透過pos.Coordinate.Latitude.ToString(); 以及 pos.Coordinate.Longitude.ToString(); 分別取得緯度及經度資料,作為我們 App 的後續運用。

       

      比如 Bing Map, Google Map, Yahoo Map 等都提供了 API 甚至 URL String 的方式讓開發者使用,以上便是以 Google Map 使用 URL String 為例。

       

      如果你直接執行此程式並按下此 Button,應該會看到以下這個執行時期錯誤:

      image

      其中的描述為:

       

      WinRT 資訊: The required device capability has not been declared in the manifest.

      其他資訊: 存取被拒。 (發生例外狀況於 HRESULT: 0x80070005 (E_ACCESSDENIED))

      也就是沒有宣告這個 App 會使用到 GPS 的功能。你只要點開專案中的 .appxmanifest 檔,勾選位置(Location)即可:

      image

      順利執行的畫面會如以下:

      image

      image

      image

      完整程式碼可在此下載: http://sdrv.ms/WMMR9I

       

      完成以上練習之後,就可以發想許多應用,簡單一個案例如下:

      image

      延伸閱讀:

      快速入門:偵測使用者的位置 (本篇文章中的程式碼有誤,但只要將所有的 IGeoposition 置換成 Geoposition 即可順利編譯)

      地理位置範例
      Bing Maps SDK 範例
      Windows.Devices.Geolocation

       

      如何在未安裝 Visual Studio 2012 的機器上測試 Windows Store App?

      首先,在您的 Visual Studio 2012 專案中按右鍵,選擇”市集”->”建立應用程式套件”:

      image

      然後依以下步驟建立應用程式套件 (Application Package):

      image

      image

      image

      點選輸出位置之後,就會看到您的套件 (Application Package) 被包成一個 .appxupload 檔,加上一個資料夾 (output location)

       

      接下來只要把這整包 ( .appxupload 檔 + 資料夾) 整份 copy 到要測試的機器上,然後在此資料夾中找到一個 Add-AppDevPackage.ps1 的檔案,按右鍵以 PowerShell 執行即可。

       

      image

       

      以上這種作法稱為 Sideloading,但有兩點是需要注意的:

       

      1. 這台機器必需有一個有效的 Developer License: 作法是在以系統管理員身份開啟的 PowerShell 介面中執行: Show-WindowsDeveloperLicenseRegistration然後再輸入你的 Microsoft ID (及以前的MSN 帳號或 Live ID),這台機器就會擁有 3 個月期限的 Developer License.

      image

      2. 確保這台機器可以執行 PowerShell scripts: 作法是在 PowerShell 介面中執行: Set-ExecutionPolicy unrestricted 即可.

      image

      以上的這兩點,在同一台機器上只要作一次就好了,然後就可以在這台機器上安裝任何經由 Visual Studio 2012 打包出來的 Windows Store App!

       

      ARM-based 的機器?

       

      不論你的機器是 Intel-based (x86/x64) 或是 ARM-based 的 CPU,都可以用以上的方式來佈署。

       

      除了以上的方法,Visual Studio 2012 還提供了「遠端電腦」方式來作測試:

      image

      詳細設定則請參考 MSDN 的文章: 在遠端電腦執行 Windows 市集應用程式

       

      另外請注意,這篇文章說明的是在開發過程之中,以測試為目的佈署 Windows Store App 至別台機器的方法;若是要在企業內部進行 LOB Apps 的大量佈署的話,另有其他的考量及作法,請參考 TechNet 文章: 如何新增和移除應用程式

      呈現 PDF 文件

      目前,要在 Windows Store App 中顯示 PDF 格式的文件,至少有以下有兩種 SDK 可供選擇使用:

       

      FoxIt: http://www.foxitsoftware.com/company/press.php?action=view&page=201210241943.html

      Adobe: http://www.datalogics.com/products/rmsdk/

       

      其中 Adobe 提供的是其Adobe Reader Mobile SDK (RMSDK),支援 ePub 及 PDF 格式的 static content 以及 Adobe DRM.由 Datalogics 這間公司負責代理,有興趣的合作夥伴也可以直接與 Datalogics 的業務聯絡: sales@datalogics.com

       

      已有希臘的一個 App 以此進行實作及上架:

      image

       

      另外, Adobe 的另一項產品 Adobe Digital Publishing Suite (DPS) 雖還未支援 Windows Store App,但刻正進行整合上的努力,釋出正式支援版本的時程則未定。

      MSDN 訂戶免費取得為期 12 個月的 Windows Store 帳戶

      MSDN 訂戶於 http://msdn.microsoft.com 進行登入後,會看到以下畫面:

      MSDN

       

      在右下角點選「存取帳戶」,就會看到許多 MSDN 訂戶獨有的權利:

      MSDN2

       

      其中會看到 Windows 市集開發人員帳戶的註冊碼,您可以在 Windows Store 註冊過程中輸入,取得 12月期的免費 Windows Store 帳戶的權利,個人和公司帳戶均可註冊。

       

      Windows Store 的註冊網址: https://appdev.microsoft.com/StorePortals/zh-tw/Account/Signup/Start

       

      相關聯結:

      信用卡驗證–Windows 市集註冊

      FAQ – Windows Store 市集相關問答集

      如何撈出市集裡所有的應用程式?

      Windows Store 上目前已有超過4萬個Apps,隨著這個新的 App 平台愈來愈茁壯,現在市面上已經可以找到許多整理或分析 Windows Store Apps 的網站及服務,諸如之前提到過的 DistimoMetroStore Scanner中國MSN等。而怎麼撈到 Windows Store 裡的最新資料呢?

       

      有一個公開的網址可以讓你作這件事: http://apps.microsoft.com/windows/sitemap_index.xml 

      image

       

      你會注意到這個 XML 裡面,有許多的 http://apps.microsoft.com/webpdp/sitemap/sitemap_???.xml

      我們打開其中一個 http://apps.microsoft.com/windows/sitemap/sitemap_54.xml 來看看:

      image

       

      再打開其中的 http://apps.microsoft.com/windows/zh-tw/app/9d55630c-c72d-463b-aa3a-24d1938eff00/m/ROW,就會看到某個 Windows Store App 的連結了!

      image

       

      以上提到的每一個 sitemap_???.xml 都包含了 5,000 個 Windows Store App URLs (含新增或更新),若能分析這個每天更新的 Site Map,就能作出類似 MetroStore Scanner 之類的網站服務了。

      MetroStore Scanner- 集結所有 Windows 市集應用程式的網站

      除了 Distimo.com 由去年11月開始每天更新 Windows Store App 的排名外,以下這個網站則列出了所有各個地區、各分類、不同 CPU 類型的 Apps,使用者也可以直接搜尋 App 進而下載安裝: http://metrostore.preweb.sk/

      image

       

      眼尖的人應該也注意到,這個網站同時提供了 Apps 的總數。截至 2013/01/28 止,市面上已經有超過 40,000 支 Windows 市集應用程式:

      image

       

      若點選 “Want to see more history” 則可以看到每日增加或更新的 Apps 數量:

      image

      在 Distimo 查看 Windows Store App 的排名

      其實這已不是新聞了,著名的 Apps 分析網站 Distimo.com 從去年 2012/11 月 Windows 8 剛上市不久,就開始「每天」針對 Windows Store App 作排名統計 (*註1.);同時開發者也可以在免費註冊之後,定時收到自己已經上架的 App 的排名、收入及下載量等分析。

       

      除了可以選擇不同的 App 類別及國家之外、也區分了付費 (paid) 或是免費 (free) 版本、以及 CPU 類型如 x86、x64 或 Windows RT 版本等選項;目前可以看到各個分類之下的前 100 名。

      image

       

      截至 2013-01-26 台灣區的免費 App 前10名:

      image

       

      付費 App 的前10名:

      image

       

      排名連結 (台灣) 如下: Distimo Leaderboards For Windows Store – Taiwan

       

      *註1: Publication: Discover The Windows Store

      Logos 的製作經驗 – 使用 Metro Studio

      Windows 市集應用程式若是沒有使用自己定義的 Logos,是肯定會被退件的。在此分享一下使用 Syncfusion 公司的 Metro Studio 來製作簡單 Logos 的經驗。

       

      首先最重要的,這個軟體目前是免費的! 可至 http://www.syncfusion.com/downloads/metrostudio 下載安裝。

       

      執行 Metro Studio 之後,其提供很好的搜尋功能,例如我想找一個 shopping cart 的圖片:

      image

      找到後把喜歡的圖片直接拖到左下方的紅色部份,建立一個project。

      image

      然後選擇”Edit”後,就可以直接作各種顏色、旋轉、背景、樣式等的修改:

      image

      製作好之後就要匯出了!

      Windows Store App 需要如150×150, 30×30, 50×50等各個大小的 Logos,我們只要在右上角的 size 處填入數字(如:30)。

      image

      然後再按右下角的 ”Export”,就製作出來一個30×30的 Logo 了!

      image