《Slides Dev Web》 04. HTML 5

• 语言: 英语
• 格式: .pdf
• 来源: he-arc.github.io

摘要

文档主要介绍了HTML5的发展及其在现代Web开发中的应用，重点讨论了Progressive Web Apps（PWA）的概念与实现。PWA通过Progressive Enhancement、App Shell、Service Workers等技术提升了用户体验，实现了离线功能和快速访问。文档还提到了PWA在移动应用中的潜力，并提供了相关的开发资源和测试工具。

AI总结

### 总结：《Slides Dev Web》第4章 HTML5

#### 1. HTML5 概述
- **过时技术**：HTML5淘汰了一些旧技术，如`web-sql`、`application-cache`等，取而代之的是`Web Storage`、`Service Workers`等更先进的功能。
- **新功能**：新增了对摄像头和`WebGL`的支持，推动了网页应用的扩展。
- **案例**：2014年Bachelor NIFFF开发了一个移动端网页应用（LACIS）。
- **资源**：推荐以下学习资源：
- [html5rocks](https://html5rocks.com)
- [web.dev](https://web.dev)
- [Chrome Experiments](https://www.chromeexperiments.com)
- [MDN](https://developer.mozilla.org)
- [html5 demos](https://html5demos.com)

#### 2. Progressive Web Apps (PWA)
- **核心优势**：
- 提供类似原生应用的用户体验（UX）。
- 占用空间更小，结合了原生应用和网页的优势。
- **发展现状**：
- Alex Russell在2015年提出了PWA的概念。
- Wikipedia对PWA有详细概述。
- iOS平台对PWA的支持较晚，通知功能（iOS 16）和安装横幅（iOS 17）逐步实现。
- **实现关键点**：
- **可移植性**：采用**渐进式增强**（Progressive Enhancement）。
- **性能优化**：通过**App Shell**和缓存提升加载速度。
- **离线支持**：利用**Service Workers**实现无网络访问时的功能。
- **安装横幅**：需满足HTTPS、`WebApp Manifest`、`Service Workers`等条件，并通过两次访问触发。

#### 3. PWA 实现与测试
- **技术要点**：
- **Service Workers**：核心技术，用于离线支持和消息推送。
- **App Shell**：提升应用启动速度。
- **缓存**：优化资源加载。
- **测试工具**：推荐使用[Lighthouse](https://lighthouse.google.com)进行自动化测试。

#### 4. 示例与教程
- **推荐资源**：
- [What PWA can do today](https://whatwebcando.today)
- [Project Fugu](https://projectfugu.dev)
- [Awesome PWA](https://github.com/AwesomePWA/awesome-pwa)
- [Appscope](https://appscope.dev)

### 总结
HTML5通过淘汰旧技术并引入新功能，推动了网页应用的发展。PWA结合了原生应用和网页的优势，为用户提供了更优的体验，但其在不同平台上的支持程度存在差异。通过渐进式增强、Service Workers等技术，PWA实现了高性能和离线支持，并可通过Lighthouse等工具进行测试。开发者可参考相关资源和案例，深入了解HTML5和PWA的实际应用。