震惊！2020年你竟然可以用浏览器做这些 (一)

川长思鸟来 2023-05-28 11:21 7阅读 0赞

#### 前言 ####

现在都2020年了，如果还只用浏览器刷刷网页看看视频岂不是浪费，浏览器可以做很多amazing的事情，笔者整合了当今浏览器中**不知名功能**的列表，以供读者探索。

> 此列表不是面向专业的技术人员  
> 相反，希望能成为“原来浏览器还能干这个的！”的清单  
> *很多情况下，所列功能未能成为通用标准，一下部分功能仅在某些浏览器或配置下可用*

#### 清单 ####

1.  #### prefers-color-scheme 偏好的配色方案 [传送门✈️][Link 1] ####

许多操作系统提供浅色或深色主题（尤其是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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70]

1.  #### prefers-reduced-motion 偏好的动画方案 [传送门✈️][Link 2] ####

同上面的色彩方案一样，这个也是一个css特性，prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 2]

1.  #### Payment Request API 付款请求接口 [传送门✈️][Link 3] ####

Payment Request API 是一个旨在消灭结账表单的系统。它显著改进了购物流程期间的用户工作流，为用户提供更一致的体验，并让电商公司能够轻松地利用各种完全不同的支付方式。Payment Request API 不是一种新的支付方式，也不与支付处理机构直接整合；它是一种旨在实现以下目标的处理层：

*  让浏览器充当商家、用户和支付处理机构的中介
 *  尽可能标准化支付通信流程
 *  为不同的安全支付方式提供无缝支持
 *  适用于任何移动或非移动浏览器、设备或平台![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 3]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 4]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 5]

1.  #### Web Share API 网页分享接口 [传送门✈️][Link 4] ####

![在这里插入图片描述][20200326082955974.png]  
*网页可以像原生应用那样使用系统提供的分析能力*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 7]

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));
    }

1.  #### Push API 推送接口 [传送门✈️][Link 5] ####

Push API 给与了Web应用程序接收从服务器发出的推送消息的能力，无论Web应用程序是否在用户设备前台，甚至刚加载完成。这样，开发人员就可以向用户投放异步通知和更新，从而让用户能更及时地获取新内容。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 8]

1.  #### Service Worker 后台独立于网页运行的脚本 [传送门✈️][Link 6] ####

丰富的离线体验、定期的后台同步以及推送通知等通常需要将面向本机应用的功能将引入到网页应用中。 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 简介。  
    \*![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 9]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70]: /images/20230528/347a86c2d15d438da0e61a63452d2248.png
[Link 2]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 1]: /images/20230528/d6bd9c829243401c8bede7e88199cf79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 2]: /images/20230528/3a575bde675f478aae11845449f43ffb.png
[Link 3]: https://developers.google.com/web/fundamentals/payments
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 3]: /images/20230528/5ae4889d926a49deb811074429c03631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 4]: /images/20230528/80cfff81ab5f4acba182b6d4c111016e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 5]: /images/20230528/292f54b95d7d42a39af795cce5c46f3c.png
[Link 4]: https://web.dev/web-share/
[20200326082955974.png]: /images/20230528/d824728484c24168bd5804c710fa6bb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 6]: /images/20230528/6ad3fab0ebac4e209cd92ac70c699e28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 7]: /images/20230528/553cc02cd2b344eaa00e3b4852cee79c.png
[Link 5]: https://developer.mozilla.org/en-US/docs/Web/API/Push_API
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 8]: /images/20230528/a659ce72a0d24079b379c7b92101380e.png
[Link 6]: https://developers.google.com/web/fundamentals/primers/service-workers
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 9]: /images/20230528/953e2cf892614516b9904f9b76cf8483.png