恭喜 Safari 榮獲「第二個 Internet Explorer」的美譽

• 原文地址：Safari Has Become The Second Internet Explorer
• 原文做者：Golosay Volodymyr
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：霜羽 Hoarfroster
• 校對者：lsvih

若是你去問問一個程序員他對聽到 IE 這個詞的感覺，通常來講，絕對是這樣的 —— OMG 痛苦的要死！我固然也不是例外！我做爲一名 Web 開發者已經有了十多年，在這段時間裏面，開發過很多必需要兼容 IE 的項目。我清晰地認識到，某些奇葩瀏覽器不支持別的瀏覽器支持的常見功能這個問題，是如何令咱們這羣本已禿頭的程序員們更加頭禿沮喪的。或者說，有的時候，這種坑貨瀏覽器甚至還會錯誤地將部分元素渲染在錯誤的地方！更糟糕的是，你可能有些時候還得去調試某些意料以外的錯誤的行爲。

幸（諷）運（刺）的是，我在平常生活中使用着一臺 M1 芯片的新款 MacBook Pro。我超級喜歡使用 Apple 所開發的軟件，由於它們老是快速、節能、美觀的。Safari 就是 Apple 所提供的軟件的其中之一。我好想再愛一遍 Safari 啊，惋惜我越多地與它共事，就越多地回想起 IE。所以，點明這些關切到咱們每一個人切身頭髮安全的問題是很是之重要的。而對於其中一些問題，我將會爲你們提供防脫髮治療手段。

PWA 支持

Safari 對 PWA 的支持？更確切地說應該是缺少支持！Apple 是現當時最離譜的拒絕 PWA 的廠商之一。你知道什麼是 PWA 嗎？PWA 是一類能夠在瀏覽器中打開它，並在本地安裝的網絡應用。它看起來和從應用商店中安裝的普通應用同樣，而且具備離線啓動的功能。從理論上講，你能夠當即在你的瀏覽器上嘗試一下（例如在 iPhone 上安裝 PWA 應用程序），可是好心的 Apple 會用以下的藉口勸退你：

• 你不能存儲超過 50 MB 的數據
• 不支持藍牙
• 不支持原生的分享框
• 沒有後臺同步或是 Web 推送通知
• 沒有 Web App 橫幅提醒用戶安裝應用
• 不支持自定義啓動畫面

這些限制使 PWA 這項技術毫無用處。比起技術，Apple 可能更但願控制市場，讓用戶僅能夠經過 App Store 安裝所謂真正的應用程序。

在 Mac 上的 Safari 中，你根本沒法用它。

Web 推送通知

這個話題雖然說位列 PWA 的限制列表中，但也值得單獨一提。

在 Mac 上，某些應用程序的 Web 版本沒法發送推送通知，致使不能提供所有功能。

Messenger 應用們就是最好的例子。現在，Telegram 或 Facebook Messenger 只能在網站打開時經過變動標題和播放聲音來通知用戶有關新消息的信息。若是用戶靜音了，並將瀏覽器最小化了，顯然就會錯過新的消息。

此限制的惟一好處是，新聞站點沒有煩人的通知告示但願你去訂閱它們的提醒 —— 這可真棒，但絲絕不等同於咱們不須要通知功能！

滑動表現

Apple 爲 Safari 的性能和能效感到驕傲（這點的確如此）！

爲了得到如此好的性能，他們實施了許多優化，其中之一是在用戶進行動態滾動操做時阻止 DOM 更新。可是優化以後，用戶們開始發現瀏覽器出現了一些滾動的滯後。最著名的問題 —— 在 YouTube 視頻頁面上滾動評論。大量的用戶在官方支持論壇和 MacRumors 上對有關問題進行了討論。

要解決此問題，你必須安裝 UserScripts 擴展並添加一些 CSS 樣式：

// ==UserScript==
// @name FixYouTubeScrolling
// @description Stop improper styling, Google
// @match *://*youtube.*
// ==/UserScript==

ytd-page-manager {
    overflow-y: unset !important;
}

#page-manager.ytd-app {
    overflow-x: unset !important;
}
複製代碼

但這不是存在此問題的惟一地方。我在許多不一樣的在滾動事件上附加了不少功能的網站（例如 Youtube 音樂、Facebook、Reddit 等）上都發現了相似的滾動上的問題。

這就實現快速滾動的代價，因此我但願 Apple 可以在性能和表現上找到一個更好的平衡點。

YouTube

讓咱們討論討論 YouTube！你大機率遇到過縮略圖或頭像沒法加載的問題，能夠在 Apple 論壇中找到有關此問題的許多帖子（例如這個和這個）。

我不知道問題的根源，但已經明確了是緩存中的錯誤。雖然說清除緩存能夠解決此問題。可是它有時仍然會復現。

有兩種清除 Safari 中緩存的方法：

1. 在 Safari 中單擊"刷新"按鈕的同時，按鍵盤上的 Shift 鍵。
2. 按鍵盤上的 Command（⌘） + Option（⌥, alt） + R。

隨你選擇～

圖標

你是否能在 Mac 的 Safari 中看到 Instagram 網頁的圖標？出於某種緣由，它是黑白的。

這是個次要的但也是個很是奇怪的問題。你能夠本身嘗試訪問一下，會發現真正的圖標應該是有顏色的。這個問題也出如今了個人 methodist.io 網頁上。我在許多站點上都發現了此問題，而若是你知道此問題的發生緣由以及解決方法，麻煩在評論中分享～

拓展

在 2018 年以前，Safari 並無用於構建瀏覽器擴展的框架。所以，App Store 中針對 Safari 的擴展程序真的不多。僅在 2018 年以後，他們纔開始像 Chrome 同樣使用 WebExtensions Api。對於擴展程序開發人員而言，這是一個巨大的進步，由於主要瀏覽器的核心 API 已經相同了。雖然說已通過了很長一段時間了，但現在，Safari 與其餘瀏覽器相比，擴展的數量依舊存在着巨大的差別。

媒體格式標準化

大家可能都知道 JPEG 和 PNG 圖像格式。它們年代久遠（誕生於 1992 年），文件又大。所以，在 2017 年，科技巨頭們都決定設計更高效的媒體格式。蘋果發佈了 HEIC（High-Efficiency Image Coding 高效圖片編碼），谷歌推廣了 WebP。可是因爲某些緣由，他們都彼此不承認對方。Chrome 僅支持 WebP，而 Safari 又僅支持 HEIC。直到 2020 年年中，Apple 纔在 Safari 中添加了對 WebP 的支持。

這個問題是關於圖像的，但一樣也適用於視頻。Google 爲視頻設計了 WebM 格式，但即便如今（2021 年 1 月），Safari 也不支持這個格式。

在 2019 年，IT 巨頭開始合做，開發先進、免費的視頻編解碼器 AV1。蘋果、谷歌、Netflix 等公司（這個名單使人印象深入）成立了一家」開放媒體聯盟「公司，這些企業共享了他們的技術和專利，以建立跨時代的解編碼器。目前，解編碼器已開發完了，Netflix 也業已在其應用中使用了它，可是 Safari 仍是不支持它。

如你所見，Safari 是一款很是保守的瀏覽器，而 Apple 老是不肯意與用戶的意願保持一致。

小結

Safari 是快速的、節能的一款（甚至是）安全的瀏覽器。可是 Apple 它呢有它本身的想法。固然，Apple 仍是喜歡賺錢，而讓用戶可以避開 App Store 安裝應用程序可不是什麼有利可圖的想法。相似的辯解口徑對於本身不兼容某些主流的媒體格式都是通用的，可是這些問題可真真實實地阻礙了技術的發展，給咱們這羣頭禿的開發人員平添了更多的麻煩。

感謝你的閱讀！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。