PWA 初探:基本特性与标准现状

Android Chrome PWA 缓存 Service-Worker

PWA(Progressive Web Apps)是 Google 最近在提的一种 Web App 形态 (或者如 Wikipedia 所称的“软件开发方法”)。 Harttle 能找到的关于 PWA 最早的一篇文章是 2015年6月 Alex Russell 的一篇博客: Progressive apps escaping tabs without losing our soul让 Web App 从标签页跳出来,同时保持 Web 的灵魂。

如 Alex 所述,PWA 意图让 Web 在保留其本质(开放平台、易于访问、可索引)的同时, 在离线、交互、通知等方面达到类似 App 的用户体验。按 Google 官方的解释 PWA 具有这些特性:Reliable, Fast, Engaging。

Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment. – Google PWA Tutorials

在 DOM 中动态执行脚本

DOM HTML JavaScript jQuery innerHTML

在 HTML 中脚本以 <script> 来标记,通过设置其内容或src属性执行内联脚本或外部脚本。 本文讨论动态地插入脚本标签时浏览器对它的解析、下载和执行行为。 动态插入脚本的场景可能包括使用 AJAX 获取脚本并动态执行(多用于性能优化), 以及运行时决定执行页面模板中的某段脚本(多用于单页异步)。

动态执行脚本还有其他方式,比如evalnew Function,这些不在本文的讨论范围。

动态插入外部样式表

DOM HTML 事件 异步 CSS innerHTML

相比于动态插入外部脚本, 动态插入外部样式表(<link rel="stylesheet">)的行为简单很多: 只要插入到当前 DOM 树时,浏览器总会异步地立即下载并应用该样式表, 被从 DOM 树移除时样式消失并立即触发重绘。

内联样式表(这里指<style>标签)除了不需要去下载之外,其他行为与外部样式表相同。 因此下文略过对内联样式表的讨论。

Raspberry Pi 3 的 GPIO 串口配置

Raspberry GPIO UART

Raspberry Pi 开源硬件提供了 GPIO (General Purpose Input/Output) 接口, 但 Raspberry Pi 3 新增的蓝牙支持占用了原 GPIO 使用的 UART(PL011), 让 GPIO 14/15 引脚转而使用 Mini UART,因此对于不使用蓝牙的用户降低了 GPIO 的吞吐量。 为了使 GPIO 继续使用 UART 协议以及设置对应设备(/etc/ttyAMA0)权限笔者话费了不少功夫, 于是将串口配置过程记录在此。

如果你不是在使用 GPIO(比如连接 Arduino、传感器等等)引脚,本文基本与你无关。

CORS 跨域中的 preflight 请求

跨域 CORS AJAX HTTP XHR

我们知道借助Access-Control-Allow-Origin响应头字段可以允许跨域 AJAX, 对于非简单请求,CORS 机制跨域会首先进行 preflight(一个 OPTIONS 请求), 该请求成功后才会发送真正的请求。 这一设计旨在确保服务器对 CORS 标准知情,以保护不支持 CORS 的旧服务器。

Flowchart_showing_Simple_and_Preflight_XHR

Wikipedia: https://upload.wikimedia.org/wikipedia/commons/c/ca/Flowchart_showing_Simple_and_Preflight_XHR.svg

CORS 跨域发送 Cookie

AJAX Cookie XHR CORS 跨域

在 Web 页面中可以随意地载入跨域的图片、视频、样式等资源, 但 AJAX 请求通常会被浏览器应用同源安全策略,禁止获取跨域数据,以及限制发送跨域请求。 虽然有多种方法利用资源标签进行跨域,但能够进行的数据交互非常有限。 在 2014 年 W3C 发布了 CORS Recommendation 来允许更方便的跨域资源共享。 默认情况下浏览器对跨域请求不会携带 Cookie,但鉴于 Cookie 在身份验证等方面的重要性, CORS 推荐使用额外的响应头字段来允许跨域发送 Cookie。

导航: 上一页 下一页

加载中...

🔝