震驚！2020年你竟然可以用瀏覽器做這些 (一)

前言

現在都2020年了，如果還只用瀏覽器刷刷網頁看看視頻豈不是浪費，瀏覽器可以做很多amazing的事情，筆者整合了當今瀏覽器中不知名功能的列表，以供讀者探索。

此列表不是面向專業的技術人員
相反，希望能成爲“原來瀏覽器還能幹這個的！”的清單
很多情況下，所列功能未能成爲通用標準，一下部分功能僅在某些瀏覽器或配置下可用

清單

1. prefers-color-scheme 偏好的配色方案 傳送門✈️

許多操作系統提供淺色或深色主題（尤其是macOS上的深色模式），網站可以檢測到首選的配色方案並將網站配色與其統一，其本質是一個CSS語法：

<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
<style>
.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
</style>

2. prefers-reduced-motion 偏好的動畫方案 傳送門✈️

同上面的色彩方案一樣，這個也是一個css特性，prefers-reduced-motion 用於檢測用戶的系統是否被開啓了動畫減弱功能。

3. Payment Request API 付款請求接口 傳送門✈️

Payment Request API 是一個旨在消滅結賬表單的系統。它顯著改進了購物流程期間的用戶工作流，爲用戶提供更一致的體驗，並讓電商公司能夠輕鬆地利用各種完全不同的支付方式。Payment Request API 不是一種新的支付方式，也不與支付處理機構直接整合；它是一種旨在實現以下目標的處理層：

• 讓瀏覽器充當商家、用戶和支付處理機構的中介
• 儘可能標準化支付通信流程
• 爲不同的安全支付方式提供無縫支持
• 適用於任何移動或非移動瀏覽器、設備或平臺
  
  

4. Web Share API 網頁分享接口 傳送門✈️

網頁可以像原生應用那樣使用系統提供的分析能力

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

5. Push API 推送接口 傳送門✈️

Push API 給與了Web應用程序接收從服務器發出的推送消息的能力，無論Web應用程序是否在用戶設備前臺，甚至剛加載完成。這樣，開發人員就可以向用戶投放異步通知和更新，從而讓用戶能更及時地獲取新內容。

6. Service Worker 後臺獨立於網頁運行的腳本 傳送門✈️

豐富的離線體驗、定期的後臺同步以及推送通知等通常需要將面向本機應用的功能將引入到網頁應用中。 Service Worker 提供所有這些功能所依賴的技術基礎。

什麼是 Service Worker

Service Worker 是瀏覽器在後臺獨立於網頁運行的腳本，它打開了通向不需要網頁或用戶交互的功能的大門。 現在，它們已包括如推送通知和後臺同步等功能。 將來，Service Worker 將會支持如定期同步或地理圍欄等其他功能。 本教程討論的核心功能是攔截和處理網絡請求，包括通過程序來管理緩存中的響應。

這個 API 之所以令人興奮，是因爲它可以支持離線體驗，讓開發者能夠全面控制這一體驗。

在 Service Worker 出現前，存在能夠在網絡上爲用戶提供離線體驗的另一個 API，稱爲 AppCache。 AppCache API 存在的許多相關問題，在設計 Service Worker 時已予以避免。

Service Worker 相關注意事項：

• 它是一種 JavaScript Worker，無法直接訪問 DOM。 Service Worker 通過響應 postMessage 接口發送的消息來與其控制的頁面通信，頁面可在必要時對 DOM 執行操作。
• Service Worker 是一種可編程網絡代理，讓您能夠控制頁面所發送網絡請求的處理方式。
• Service Worker 在不用時會被中止，並在下次有需要時重啓，因此，您不能依賴 Service Worker onfetch 和 onmessage 處理程序中的全局狀態。 如果存在您需要持續保存並在重啓後加以重用的信息，Service Worker 可以訪問 IndexedDB API。
• Service Worker 廣泛地利用了 promise，因此如果您不熟悉 promise，則應停下閱讀此內容，看一看 Promise 簡介。
  *