網頁開發生態系統小組 - 2 月總結

Mariko Kosaka
歡迎收看本月的第一集總結,我們將回顧 Web 開發人員生態系統團隊的最新動態✨

我們是一群工程師和溝通人員,負責撰寫文章和程式碼範例,例如這個網站的網頁基礎知識和全新入口網站 web.dev。您也可以在我們的 YouTube 頻道上觀看我們的內容,別忘了追蹤 @ChromiumDev

2 月是短短一個月,但內容絕對不短。我們先從團隊發布的重大版本開始。

版本

Workbox

Workbox 4.0 已於幾天前發布,敬請期待!🎉這個版本包含 workbox-window 等實用新功能,以及許多現有 Workbox 套件的改善項目。如果您已在使用 Workbox,請參閱從 v3 遷移至 v4 的指南。想知道如何在現有專案中使用 Workbox 嗎?以下指南說明如何搭配您選擇的 bundler 使用。不確定 Workbox 可解決哪些問題?請參閱這篇關於 Service Worker 的訪談,內容來自「State of the Web」節目。

lit-html 和 LitElement

Polymer 專案團隊一直忙於lit-html 和 LitElement 的穩定版本,這兩個是下一代網頁開發程式庫。想試試看嗎?請先參閱Try LitElement 指南 📝

受信任的網路活動

隨著 Chrome 72 的推出,Trusted Web Activity (TWA) 也正式進入市場!TWA 可讓您在 Android 活動中顯示全螢幕的 Chrome,也就是說,您可以將網頁內容帶入應用程式範疇📱。請參閱這份入門指南,或瞭解 @svenbudak 如何將 PWA 上架至 Google Play 商店

後續步驟

Chrome 73 穩定版即將推出 (3 月 12 日),我們有許多令人興奮的功能要介紹!

V8:Chrome 的 JavaScript 引擎有許多更新,包括 Object.fromEntriesString.prototype.matchAll。請參閱 v8 版本資訊

您是否要使用網路上的音訊和視訊?硬體媒體鍵支援功能現已推出,且子母畫面視窗中的「Skip Ad」功能現已在原始試用版中推出!詳情請參閱Chrome 73 的音訊/影片更新

談到原點測試,開發人員可以使用Fetch Priority來準備使用 Fetch Priority,設定 <script><img><link> 元素的重要性,以便告知瀏覽器如何載入這些元素。這項功能仍在實驗階段,歡迎試用並提供意見回饋!

我們始終重視轉譯效能。在 Chrome 73 中,在根目錄目標 (視窗、文件或主體) 上註冊的 wheelmousewheel 事件監聽器預設為被動事件監聽器,預設提供快速的輪盤捲動

除了新功能,我們也要告別一些功能,請務必查看 Chrome 73 版的停用和移除功能

新開發

以下是我們正在努力改善的幾項功能,這些功能將影響你使用的瀏覽器。

為了防範跨網站指令碼攻擊,我們正在開發名為「Trusted Types」的新 API。選擇信任類型 (透過內容安全政策) 會鎖定文件,防止 DOM 注入。我們正在努力提供更多程式碼範例和指南,但在此同時,請進一步瞭解可信任型別,並試用這項功能。

在 Chrome 上按下「返回」和「前進」按鈕的速度很快就會變得更快我們正在研究新的後退/前進快取,以便在使用者離開時,將頁面快取到記憶體中。請參閱這篇文章中的說明和 bfcache 原型

最後,Intersection observer v2 引入了追蹤目標實際「可見度」的概念。

我們正在調整的內容

我們的工作不只限於瀏覽器功能!我們也會研究網頁應用程式效能、建構網頁應用程式,並思考各種協助全球網頁開發人員的方式。以下是我們本月進行的部分調整。

新影片和 Podcast

Martin 將推出名為「JavaScript SEO」的新系列影片,第一集將介紹「Google 搜尋如何為 JavaScript 網站建立索引」!Meggin 最近在聚會中分享了對 web.dev 專案的反思。Jake 和 Surma 回來了,並帶來新的 HTTP203 播客節目,討論圖片旋轉實驗

我們也會在 YouTube 頻道上定期發布節目,例如「New in Chrome」、「What's New in DevTools」和「The State of the Web」

特別致謝

您是否看過 Puppeteer 範例?你可能在 Eric Bidelman 去年發布的推文「"📯The 12 Days of Puppeteer 🤹🏻‍♂️🎁"」中看到這項功能。這是一組很棒的 Puppeteer 程式碼範例,可讓您發揮創意,思考如何運用瀏覽器。歡迎一探究竟!

(祝你新事業順利,Eric!)我們會想念你!)

總結

你覺得第一份月報如何?如果您喜歡這項功能,或有任何改善意見,歡迎透過 Twitter 與我聯絡 @kosamari

如果您已使用這裡介紹的功能建構新項目,或是根據我們的文章變更程式碼庫中的內容,請務必在 @ChromiumDev 與我們分享。

我們團隊中的幾位成員將在 3 月前往印度,希望能進一步瞭解當地的行動版網站體驗 ✈️ 期待與大家分享我們在當地學到的知識!

下個月見👋