# 探索 Browser API （下）

今天會淺談 ServiceWorker 與 Webworker 以及其他亮眼（我有興趣）的 API。

# ServiceWorker

ServiceWorker 讓網頁可以具備像 App 一樣的功能，像是設定桌面 icon、接收通知、更新、離線操作、快取等等，未來還可以利用手機原生的 share API 介面。

不過，ServiceWorker 倒也不是只有手機上才能實作，像是 ServiceWorker 提供的 cache 搭配 fetch 事件，就可以將請求後的資源快取起來。這也代表著你需要處理快取可能產生的問題。

ServiceWorker 就像一層小 proxy，網路請求送過去後可以從 serviceworker 做快取，在實務上如果用 webpack 的話可以直接用 OfflinePlugin，設定起來蠻方便的。透過安裝 ServiceWorker，並且設定 manifest 可以讓你的 app 被手機當成桌面 icon 點擊打開網頁。

# WebWorker

因為 JavaScript 是單線程，就算有了 event loop 也無法解決 long running task 的問題，因此有了 WebWorker 的出現。

像是圖片的計算（將彩色變黑白等）、比較繁重的運算等都可以搬到 WebWorker 實作，雖然如此 WebWorker 裡也不是想做什麼就做什麼，你不能夠在 WebWorker 裡控制與存取 DOM，還有 window 的一些方法。

main thread 與 WebWorker 之間會用 postMessage 互相溝通。

那麼...，既然有 WebWorker 可以用，就代表有些壞壞的主意出現，像是利用 WebWorker 挖礦等等。雖然不敢打包票，但或許在未來像是 Storage, WebWorker 等 API，或許會讓使用者決定是否開啟，避免讓網站有太多對使用者電腦的控制權。

# 其他 API

下列提到的 API 幾乎都是實驗性的 API，大多數只有 Chrome 有實作，只支援某些平台（例如 Android），但也給了我們很大的機會思考，網頁除了呈現資訊與一般的互動之外，還可以做到哪些事。

# NFC (opens new window)（Near Field Communication）

Apple 最近推出的用手機代替實體 SUICA，在日本幾乎可以拿著手機到處跑，因為是 NFC 協定甚至不需要網路。

值得慶幸的是，在網頁上也可以用 NFC API 了！

雖然現在只有 Android Chrome 實作而已（需要額外設定 flag）。不過這仍然是蠻令人興奮的事，透過 NFC 協定或許可以直接在網路上看到 SUICA 餘額、透過 NFC 做 conference 報到、打卡等，不需要再讓使用者下載 App 了。

# MediaSession.setActionHandler (opens new window)

像是在 iPhone, Android, window 中的播放器小工具，或是 mac 中的播放、停止按鈕，這樣的事件也可以在網頁上被偵測到了。雖然也只有少數平台有實作，但這也代表網頁開發上有更豐富的功能可以給使用者更好的體驗。

# Image Capture API (opens new window)

你可以用這個 API 拿到手機、電腦裡照相後的資料，在網頁上直接用 API 擷取圖片，意味著以後可以在網頁上修圖、上傳等等。

# Vibrate API (opens new window)

目前只有 Android Chrome 可以用，也不知道會不會變成標準...。但能讓手機震動代表網頁開發有多了一招提醒使用者的功能了。

# WakeLock (opens new window)

像是在做菜的時候，會希望螢幕一直亮著不要鎖住看菜譜，在 Android 中可以用 PowerManager.WakeLock 來做到這件事。網頁上也有相關的 API 提案 (opens new window)。

像是手機裡頭原生的 Share UI，現在也可以被瀏覽器呼叫，只要事先設定好 manifest 就可以了。

# 一些想法

雖然大部分的 API 幾乎都是針對 mobile 而特別設計的，不過從這裡也可以看出來，瀏覽器能夠做到的事情已經越來越多，除了單純瀏覽網頁之外，也可以搭配這些 API 做到原本只有原生 App 才能做到的事。

不過這些 API 的開放與實作也代表著我們需要更加關心安全性的問題，會在後面的篇幅討論前端的安全性這件事情。

← 探索 Browser API（中） Autoplay 與 mute →