Progressive Web App（技術周刊 2018-03-16）

十里春風不如你，三月快爆看這裡。啦啦啦，轉眼又到了春的季節，萬物復甦。看完周刊，放下手中的鍵與執念，投身春的江湖，去看看那櫻花，看看那桃花，何必孤芳自賞，說不定你也會時來運轉呢。

前端快爆

• Edge 17 正式支持可變字體（Variable Fonts）技術，開發者可以通過 font-variation-settings對支持該技術的字體進行各種維度的細節調整。

https://blogs.windows.com/msedgedev/2018/03/13/bringing-expressive-performant-typography-to-microsoft-edge-with-variable-fonts/?

blogs.windows.com

老絲點評：百變字體，還可以動畫，這是最騷的。

• Node-sass 4.8.0 發布，升級 libsass 到 3.5.0，支持了 CSS 自定義屬性，原生 var() 函數等。

sass/libsass?

github.com

老絲點評：改動比較大，升級需謹慎。

• Chrome Canary 實現了類的私有屬性，此前 Babel 也已經支持。

New feature: private class fields?

bugs.chromium.org

• CSS 控制多行溢出的屬性 line-clamp 已經添加到 CSS Overflow Module Level 3 規範中， Safari 和 Chrome 均已支持私有屬性-webkit-line-clamp，最近 Edge 也宣布支持了該屬性。

https://github.com/w3c/csswg-drafts/commit/41bdbcd2411ed7230f32ec6396a9d8448714b95a?

github.com

老絲點評：CSSWG 終於決心要解決這個爛攤子了。

• TC39 的 Github 項目中，有人提議將 Array.prototype.flatten 更名為 Array.prototype.smoosh 以保證老框架 Mootools 的兼容性。然而，標準提案和 Mootools 的介面並不一致，且有 Twitter 稱此單詞太過生僻。場面一度很尷尬，「Brian Terlson」 提醒道：TC39 的 Github 活躍者並不代表整個社區的意見。

rename flatten to smoosh by michaelficarra · Pull Request #56 · tc39/proposal-flatMap?

github.com

老絲點評：JQuery：我都沒說啥。

優秀 Demo

• CSS 魔方

• 3D Media player in only CSS

專題

Progressive Web App

隨著 Chrome 最近支持把 PWA 網頁直接保存為桌面應用，PWA 的應用前景越來越可期。在未來的網頁容器將是怎樣的這個議題上，除了微信這樣入口壟斷的方案，我們依然可以去了解一下谷歌的開放方案。

• 下一代 Web 應用模型 — Progressive Web App
• 嗯，這個項目應該改成 PWA
• PWA是否能帶來新一輪大前端技術洗牌？

教程

• Google Developer 的 PWA 教程
• 構建混合渲染的 PWA

實踐

• PWA 在 Pinterest
• PWA 在餓了么
• PWA 在百度搜索
• iOS 11.3 支持PWA了，然而……

怎麼樣看完了，仔細想想，若還是孑然一身，還可以來我們阿里媽媽前端團隊，帶你一起去流浪。私信小編，在線等你哦??。

本期編輯： @一絲 ，審閱：Humphry。

題圖來源：https://medium.com/skyshidigital/progressive-web-app-pwa-1cd0758c2af4