WPF 客戶端瀏覽器 添加Loading加載進度

在windows開發界面時，使用瀏覽器來請求和顯示網頁內容，是比較常見的。

但是在請求網頁內容時，因網速或者前端功能復雜加載較慢，亦或者加載時遇到各種問題，如空白/黑屏/加載不完整/證書問題等。

因此需要一個加載進度/加載失敗的顯示界面。

 加載進度顯示

界面顯示

1. 界面顯示，加載進度樣式可參考: 繞圈進度條

2. 添加Loading狀態枚舉。不加載/加載中/加載失敗

    public enum LoadingState
    {
        NotLoading,//正常的網頁內容界面
        Loading,   //加載進度顯示
        Error,     //加載失敗界面
    }

在控件內添加LoadingState附加屬性，前端界面通過綁定此附加屬性來確定是否顯示，LoadingState的變更時，界面顯示則直接變更。

進度顯示處理

在封裝相應瀏覽器后，針對三個事件DocumentCompleted、ProgressChanged、NavigateError作進度顯示的處理。

結束加載進度

1. DocumentCompleted文檔加載完成后，結束加載進度。此事件只有Navigate調用后，才會觸發
2. ProgressChanged進度變更通知，Navigate、Refresh調用后都會觸發。因為Navigate調用后，同一進度會重復觸發ProgressChanged，ProgressChanged在Navigate調用時觸發並沒有任何意義，因此在DocumentCompleted之后再添加事件的訂閱，ProgressChanged只開放給Refresh方法。
3. 當前進度大於0時，立即結束Loading，減少延時。

    /// <summary>
    /// 文檔加載完成
    /// </summary>
    /// <remark>Navigate方法觸發，Refresh方法不會觸發</remark>
    /// <remark>在首次加載時，添加DocumentCompleted訂閱</remark>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Browser_OnDocumentCompleted(object sender, HtmlDocumentCompletedEventArgs e)
    {
        //當前Loading狀態不是Error的情況下，才結束加載
        if (LoadingState == LoadingState.Loading)
        {
            LoadingState = LoadingState.NotLoading;
        }

        //顯示網頁內容首次加載后，再訂閱加載進度事件
        _browser.ProgressChanged -= Browser_ProgressChanged;
        _browser.ProgressChanged += Browser_ProgressChanged;
        OnDocumentCompleted(e);
    }

    /// <summary>
    /// 加載進度事件
    /// </summary>
    /// <remark>Navigate會觸發多次ProgressChanged事件，所以此事件訂閱不應開放給Navigate</remark>
    /// <remark>Refresh調用后，會觸發一次</remark>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void Browser_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
    {
        //當前進度大於0，且當前Loading狀態是Loading的情況下，才結束Loading動畫
        if (e.CurrentProgress > 0 && LoadingState == LoadingState.Loading)
        {
            LoadingState = LoadingState.NotLoading;
        }
    }

值得注意的是，如果按照如上設置，當IE8環境升級到IE11后，因WebBrowserProgressChangedEventArgs事件參數返回異常，不會結束Loading。

問題跟進記錄：When IE updates from version 8 to version 11,this eventArgs value for event ProgressChanged is weird. 

原因：調用refresh方法。經調試發現ProgressedChanged的事件參數中，MaximumProgress一直等於0。
但是，正常情況下，同樣的電腦環境，win7 IE8或者IE11下，refresh方法，返回的MaximumProgress不為0。

推薦分析：升級后，原有IE版本的注冊項遺留，導致沖突。

解決方案：添加e.CurrentProgress == e.MaximumProgress的條件判斷。

    private void Browser_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
    {
        //當以下倆種條件符合時，才結束Loading動畫
        //1.當前Loading狀態是Loading的情況下
        //2.當前進度大於0，或者當前進度等於進度上限閥值
        if (LoadingState == LoadingState.Loading && (e.CurrentProgress > 0 || e.CurrentProgress == e.MaximumProgress))
        {
            LoadingState = LoadingState.NotLoading;
        }
    }

PS:微軟小組成員推薦使用WebView,然而這個只為Win10的Microsoft Edge開發的控件，只能在win10上運行且只支持.NET4.6.2及以上，限制多多。

加載出錯

    private void Browser_NavigateError(object sender, BrowserExtendedNavigateErrorEventArgs e)
    {
        e.Cancel = true;
        LoadingState = LoadingState.Error;

        //當前不是網絡問題的異常，記錄異常日志
        if (e.StatusCode != NavigationErrorHttpStatusCode.INET_E_RESOURCE_NOT_FOUND)
        {
            Console.WriteLine($"WebBrowser無法連接服務器：{e.Url}，異常信息為：{e.StatusCode}，異常Code為：{ (int)e.StatusCode }");
        }
    }

瀏覽器事件處理

針對如上三個事件，DocumentCompleted、ProgressChanged、NavigateError

winform版IE瀏覽器

    /// <summary>
    ///   在 <see cref="T:System.Windows.Forms.WebBrowser" /> 控件完成加載文檔時發生。
    /// </summary>
    [SRCategory("CatBehavior")]
    [SRDescription("WebBrowserDocumentCompletedDescr")]
    public event WebBrowserDocumentCompletedEventHandler DocumentCompleted;

    /// <summary>
    ///   在 <see cref="T:System.Windows.Forms.WebBrowser" /> 控件已更新有關要導航到的文檔的下載進度的信息時發生。
    /// </summary>
    [SRCategory("CatAction")]
    [SRDescription("WebBrowserProgressChangedDescr")]
    public event WebBrowserProgressChangedEventHandler ProgressChanged;

NavigateError加載失敗事件，需要重寫CreateSink、DetachSink。在對應的cookie中添加額外事件的處理：（在此不詳述）

    public void NavigateError(object pDisp, ref object url, ref object frame, ref object statusCode, ref bool cancel)
    {
        _browser?.NavigateError?.Invoke(this, new BrowserExtendedNavigateErrorEventArgs((string)url, (string)frame, (int)statusCode, cancel));
    }

Cef瀏覽器

    private void Register()
    {
        _cefBrowser.LoadingStateChanged += CefBrowserOnLoadingStateChanged;
        _cefBrowser.LoadError += CefBrowserOnLoadError;
    }
    private void CefBrowserOnLoadError(object sender, LoadErrorEventArgs args)
    {
        // Don't display an error for downloaded files where the user aborted the download.
        if (args.ErrorCode == CefErrorCode.Aborted)
        {
            return;
        }
        _isLoadError = true;
        DispatcherUtil.Invoke(() =>
        {
            NavigateError?.Invoke(this, new BrowserExtendedNavigateErrorEventArgs(args.FailedUrl, args.Frame.Name, (int)args.ErrorCode, false));
        });
    }

    private void CefBrowserOnLoadingStateChanged(object sender, LoadingStateChangedEventArgs args)
    {
        //isLoading為false，代表LoadingCompleted
        //_isLoadError為false，代表未加載出錯
        if (!args.IsLoading && !_isLoadError)
        {
            DispatcherUtil.Invoke(() =>
            {
                DocumentCompleted?.Invoke(this, new HtmlDocumentCompletedEventArgs(null));
            });
        }
    }

 

關鍵字：客戶端瀏覽器進度Loading、IE瀏覽器loading、Cef瀏覽器loading