ArkWeb頁面預載入與快取 - 提升使用者體驗

SameX發表於2024-10-19
Web快取

本文旨在深入探討華為鴻蒙HarmonyOS Next系統（截止目前API12）的技術細節，基於實際開發實踐進行總結。
主要作為技術分享與交流載體，難免錯漏，歡迎各位同仁提出寶貴意見和問題，以便共同進步。
本文為原創內容，任何形式的轉載必須註明出處及原作者。

簡介

在Web應用開發中，頁面載入速度和流暢性直接影響使用者體驗。ArkWeb框架提供了強大的頁面預載入和快取功能，可以幫助開發者提升應用的響應速度和效率。本文將詳細介紹如何在ArkWeb框架中實現頁面預載入、資源預載入、設定快取模式以及清除快取，並透過豐富的程式碼示例來展示這些技術的應用。

頁面預載入

預載入即將訪問的頁面

預載入頁面可以減少使用者等待時間，提升應用的連續性體驗。在ArkWeb中，可以使用prefetchPage方法來預載入頁面。

Web({ src: "https://www.example.com" })
    .onPageEnd(() => {
        // 噹噹前頁面載入結束時，預載入下一個頁面
        this.controller.prefetchPage("https://www.example.com/next-page", {
            mode: 'Preload', // 設定預載入模式
            onProgressChange: (progress) => {
                // 監聽預載入進度
                console.log(`Preloading progress: ${progress}%`);
            },
            onComplete: () => {
                // 預載入完成時的回撥函式
                console.log('Preloading completed successfully.');
            },
            onError: (error) => {
                // 預載入發生錯誤時的回撥函式
                console.error('Preloading failed:', error);
            }
        });
    });

預載入頁面資源

除了預載入整個頁面，您還可以預載入特定的資源，如圖片、CSS檔案或JavaScript檔案。

Web({ src: "https://www.example.com" })
    .onPageEnd(() => {
        // 預載入圖片資源
        this.controller.prefetchResource({
            url: "https://www.example.com/assets/logo.png",
            method: "GET",
            headers: [{ key: "Content-Type", value: "image/png" }]
        }, {
            mode: 'Preload',
            onProgressChange: (progress) => {
                console.log(`Resource preloading progress: ${progress}%`);
            }
        });
    });

頁面快取

設定快取模式

合理地設定快取模式可以減少網路請求，加快頁面載入速度。ArkWeb提供了多種快取模式供開發者選擇。

Web({ src: "https://www.example.com" })
    .cacheMode(CacheMode.Default) // 使用預設快取模式
    .onCreate(() => {
        // Web元件建立時，可以進一步配置快取策略
        this.controller.setCacheMode(CacheMode.Online, (error) => {
            if (error) {
                console.error('Failed to set cache mode:', error);
            } else {
                console.log('Cache mode set to Online successfully.');
            }
        });
    });

清除快取

當快取資料不再需要時，及時清除快取可以釋放儲存空間，保證應用的效能。

Web({ src: "https://www.example.com" })
    .onPageEnd(() => {
        // 清除所有快取
        this.controller.removeCache(true, (error) => {
            if (error) {
                console.error('Failed to remove cache:', error);
            } else {
                console.log('Cache removed successfully.');
            }
        });
    });

示例程式碼

以下是一個完整的示例，展示瞭如何在ArkWeb應用中實現頁面預載入、資源預載入、設定快取模式和清除快取。

import { webview } from '@ohos.web.webview';
import { CacheMode } from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();
    build() {
        Column() {
            // 預載入即將訪問的頁面
            Web({ src: "https://www.example.com" })
                .onPageEnd(() => {
                    this.controller.prefetchPage("https://www.example.com/next-page", {
                        mode: 'Preload',
                        onProgressChange: (progress) => {
                            console.log(`Preloading progress: ${progress}%`);
                        },
                        onComplete: () => {
                            console.log('Preloading completed successfully.');
                        },
                        onError: (error) => {
                            console.error('Preloading failed:', error);
                        }
                    });
                });
            // 預載入頁面資源
            Web({ src: "https://www.example.com" })
                .onPageEnd(() => {
                    this.controller.prefetchResource({
                        url: "https://www.example.com/assets/logo.png",
                        method: "GET",
                        headers: [{ key: "Content-Type", value: "image/png" }]
                    }, {
                        mode: 'Preload',
                        onProgressChange: (progress) => {
                            console.log(`Resource preloading progress: ${progress}%`);
                        }
                    });
                });
            // 設定快取模式
            Web({ src: "https://www.example.com" })
               
            .cacheMode(CacheMode.Default)
            .onCreate(() => {
                this.controller.setCacheMode(CacheMode.Online, (error) => {
                    if (error) {
                        console.error('Failed to set cache mode:', error);
                    } else {
                        console.log('Cache mode set to Online successfully.');
                    }
                });
            });

        // 清除快取按鈕
        Button("Clear Cache")
            .width("100%")
            .height(50)
            .onClick(() => {
                this.controller.removeCache(true, (error) => {
                    if (error) {
                        console.error('Failed to remove cache:', error);
                    } else {
                        console.log('Cache removed successfully.');
                    }
                });
            });
    }
}
}

總結

透過以上示例，我們可以看到ArkWeb框架為開發者提供了豐富的API來最佳化Web應用的效能。合理利用頁面預載入、資源預載入、快取模式設定和快取清除等功能，可以顯著提升使用者的體驗。在實際開發過程中，應根據應用的實際情況和使用者需求來選擇合適的最佳化策略。

注意事項

  • 預載入和快取策略需要根據實際的網路情況和使用者行為來調整，避免過度消耗使用者的資料流量和裝置儲存。
  • 清除快取時應考慮使用者的使用習慣，避免頻繁清除導致使用者需要重新下載資源。

相關文章