Update fetched posts.

_posts/zmediumtomarkdown/2024-07-28-5033090c18ba.md

@@ -2,7 +2,7 @@
 title: "iOS WKWebView 頁面與檔案資源 Preload 預載 / Cache 緩存研究"
 author: "ZhgChgLi"
 date: 2024-07-28T09:53:05.535+0000
-last_modified_at: 2024-07-28T10:00:27.720+0000
+last_modified_at: 2024-07-28T10:27:31.160+0000
 categories: "ZRealm Dev."
 tags: ["ios","ios-app-development","cache","webview","http-request"]
 description: "iOS WKWebView 預先下載與緩存資源提升頁面載入速度研究。"
@@ -39,6 +39,12 @@ Photo by [Antoine Gravier](https://unsplash.com/@antoine_gravphotos?utm_content=
 
 **Apps 內只能使用 Apple 提供的 WebKit Framework \(WKWebView\) 不允許使用第三方或自行修改過的 WebKit 引擎** ，否則將不允許上架；另外 iOS 17\.4 開始，為符合法規，歐盟地區可以在 **取得 Apple 特別許可** 後 [使用其他 Browser Engine](https://developer.apple.com/support/alternative-browser-engines/){:target="_blank"} 。
 
+
+> 蘋果不給的，我們也不能做。 
+
+
+
+
 \[未驗證\] 查資料說就連 iOS 版的 Chrome, Firefox 也都是只能用 Apple WebKit \(WKWebView\)。
 
 **另外還有一個很重要的事：**
@@ -207,7 +213,7 @@ Build & Run：
 執行到 webView\.load 斷點時，點擊「逐行偵錯」。
 
 
-![](/assets/5033090c18ba/1*DcXNkBRMQiyE9Z1R0vsvoQ.png)
+![](/assets/5033090c18ba/1*LAX4hrwffthRAtK-_9Q42A.png)
 
 
 回到 Safari，選擇工具列的「開發」\->「模擬器」\->「你的專案」\->「about:blank」。
@@ -230,17 +236,17 @@ Build & Run：
 再回到 Safari 開發者工具就能看到資源載入狀況跟完整的開發者工具功能了 \(元件、儲存空間調試…等等\)
 
 
-![](/assets/5033090c18ba/1*vXIsafFKbMBuoWwveFAXyw.png)
+![](/assets/5033090c18ba/1*l0vGOvT2UupVCvf4MrLgUA.png)
 
 
 **如果網路資源有 HTTP Cache，傳算大小則會顯示「磁碟」：**
 
 
-![](/assets/5033090c18ba/1*3uv228-ShsQI4C4FR6qw4A.png)
+![](/assets/5033090c18ba/1*TMIPgtC2SVYzEmBD_xPQ_A.png)
 
 
 
-![](/assets/5033090c18ba/1*kXCRHxqvmFcq4igxrswGfA.png)
+![](/assets/5033090c18ba/1*KNbus1iFkCl4HjWThyYoew.png)
 
 
 點進去也能看到緩存資訊。
@@ -508,10 +514,10 @@ WKWebView 改成打 App 定好的接口 \(WkUserScript\) 替代 Ajax, XMLHttpReq
 參考 [wedevs 優化建議](https://wedevs.com/blog/348939/first-contentful-paint-largest-contentful-paint/){:target="_blank"} ，前端 HTML 頁面應該會有四個載入階段，從一開始載完頁面檔案 \( \.html\) First Paint \(空白頁\) 到 First Contentful Paint \(渲染出頁面骨架\) 再到 First Meaningful Paint \(補上頁面內容\) 到 Time To Interactive\(最後可讓使用者互動\)。
 
 
-![](/assets/5033090c18ba/1*xgkTweHBtcQJUwfrDAXyXw.png)
+![](/assets/5033090c18ba/1*UirBj7nm_spU6knKbsyzxA.png)
 
 
-瀏覽器、WKWebView 會先請求頁面本體 \.html 再載入需要用到的資源，同時依照程式指引構建出畫面給使用者，對比文章發現頁面階段其實只有 First Paint \(空白\)到 Time To Interactive \(First Contentful Paint 只有 Navigation Bar 應該不太算…\)，少了中間的分階段渲染給使用者，因此使用者整體等待時間會拉長。
+用我們的頁面測試；瀏覽器、WKWebView 會先請求頁面本體 \.html 再載入需要用到的資源，同時依照程式指引構建出畫面給使用者，對比文章發現頁面階段其實只有 First Paint \(空白\)到 Time To Interactive \(First Contentful Paint 只有 Navigation Bar 應該不太算…\)，少了中間的分階段渲染給使用者，因此使用者整體等待時間會拉長。
 
 
 > _並且目前只有資源類的檔案有設定 HTTP Cache，頁面本體沒有。_ 
@@ -535,7 +541,7 @@ WKWebView 改成打 App 定好的接口 \(WkUserScript\) 替代 Ajax, XMLHttpReq
 ### 使用者體驗下手 🎉🎉🎉
 
 
-![](/assets/5033090c18ba/1*FUvN8c7yxCFswJ3kWU4fDA.png)
+![](/assets/5033090c18ba/1*lxEvkhODfhjmEqE21zLcRw.png)