引言
在前端语言串讲中，老师简单地提到了HTML5基于存储的应用通常有PWA和AMP两种方式，但是没有进行更详细的讲解。因此我自行更详细地了解了一下这两种方法。
简介
PWA和AMP是两种加快网页加载的方法。
PWA（Progressive Web Application)
PWS是一种旨在将Web和移动应用的优点结合在一起的软件产品。Twitter，Alibaba是典型的应用。
特点：允许离线工作，将HTML和CSS文件存储在浏览器的cache中，并通过Service Worker进行归档。
三个基本组成：Service Workers,the manifest file, the secure HTTPS protocol。
Service Workers
Service Workers是JavaScript代码组件，充当网络与浏览器之间的代理。当首次打开网页时，服务工作者会将必要的数据存储在浏览器缓存中。当第二次打开时，服务工作者会在应用检查网络可用性之前，从缓存中检索这些数据。这不仅提供了离线工作的机会，还大大提高了响应时间。此外，服务工作者还管理推送通知。
the manifest file
(清单文件)是一个JSON文件，包含有关应用的所有信息。例如，关于PWA的主屏幕图标、短名称、颜色调色板和主题的数据。如果在Android手机上使用Chrome浏览器，清单文件将触发PWA的自动安装。
the secure HTTPS protocol
开发PWA时，使用HTTPS协议是绝对必要的。PWA容易受到网络错误或安全漏洞的影响，为了确保数据安全和网络安全，必须使用安全协议。
更多学习信息可见：web.dev/learn/pwa
AMP（Accelerated Mobile Page)
AMP(加速移动页面）是一种设计用于快速加载的移动友好型（mobile-friendly)页面。于2016年2月由Google引入。PWA需要预先安装但是AMP不需要。
其核心概念是减少不必要的内容和功能，以便立即显示重要的内容。三个基本组成：AMP HTML、AMP组件、AMP缓存。
AMP HTML不允许出现某些标签和元素，例如表单；AMP组件去除所有JavaScript脚本，提供了一个泛用组件库；AMP缓存 is a proxy-based delivery network, which fetches and caches page content.
应用实例：RCS MediaGroup, CNBC, the Wshington Post等
更多信息可见：amp.dev/about/websi…
一个简单的AMP HTML
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">Hello AMPHTML World!</h1>
</body>
</html>
