什么是 PWA 应用？
PWA（Progressive Web App，渐进式网页应用）是一种 Web 应用程序的体验，用户可以通过浏览器访问，但拥有原生应用程序的感觉。PWA 应用调用了浏览器的一些新特性，例如 Service Worker 和 Web App Manifest，可以让用户获得更好的使用体验。
浏览器安全策略
由于浏览器的安全策略，在使用 Web 应用程序时，可能会遇到一些限制和问题，例如跨域问题、Cookie 策略和缓存问题。PWA 应用也不例外，但我们可以通过一些技术手段来克服这些问题。
跨域问题
在默认情况下，浏览器禁止从一个域名的 JavaScript 代码中访问另一个域名的资源。这个安全策略被称为 "同源策略"（Same-Origin Policy）。这意味着，如果你的 PWA 应用需要从另一个网站加载数据，或者调用另一个网站的 API，就会遇到跨域问题。如何解决呢？有两种常见的方法：
使用 JSONP
JSONP 是一种通过动态创建 <script> 标签来实现跨域调用的技术。通常来说，如果你希望从一个网站获取数据，你需要使用 AJAX 请求，但这会被浏览器的安全策略禁止。利用 JSONP 技术，我们可以将数据加载到一个 script 标签中，然后通过回调函数处理这些数据，从而避免了同源策略的限制。
-- -------------------- ---- ------- -------- --------------- --------- - --- ------ - --------------------------------- ---------- - ---- ------------- - --------- ---------------------------------- - -------- ---------------- - -- ------ ---- ---- - ---------------------------------------------------------------展开代码
在上述代码中，我们通过动态创建一个 script 标签，将数据加载到了页面中。服务器返回的数据将被包裹在一个回调函数中，这样我们就可以在 handleData 函数中处理这些数据了。
使用 CORS
CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种在服务器端配置的解决方案，用来允许跨域请求。如果你是一个 API 提供者，可以在服务器端设置 HTTP 响应头：
Access-Control-Allow-Origin: *
这将允许任何域名的 JavaScript 代码访问你的 API。
Cookie 策略
另一个浏览器安全策略是 Cookie 策略。PWA 应用可以通过以下技术解决 Cookie 策略的问题：
使用 JSON Web Token（JWT）
JSON Web Token （JWT）是一种轻量级的身份验证方案。在 JWT 中，服务器生成一个 JSON 对象，包含了用户的身份信息，然后将其用私钥加密，生成一个 token，返回给客户端。客户端可以在 API 请求中携带这个 token，当服务器接收到这个 token 时，可以用相同的私钥解密，从而验证用户身份。JWT 解决了常见的身份验证问题，并且避免了 Cookie 策略的限制，不需要将身份信息存储在 Cookie 中，因为 token 是存储在本地存储或 sessionStorage 中。
使用 Web Storage
Web Storage 是 HTML5 引入的一项新特性，可以让我们在客户端存储数据。存储的数据可以包含字符串、数字和对象。Web Storage 分为两种：
- sessionStorage：与当前会话相关，即只在用户关闭浏览器窗口或标签页之前有效。
- localStorage：与当前域名相关，如果用户关闭了浏览器或者电脑，数据仍然存在。
// 存储数据 localStorage.setItem('name', 'Tom'); // 获取数据 const name = localStorage.getItem('name');
缓存问题
PWA 应用通常需要离线缓存功能，这意味着我们需要在客户端缓存一些资源，例如 HTML、CSS、JavaScript 和图片。但客户端缓存也会遇到一些问题，例如缓存的数据过期了怎么办？
使用 Service Worker
Service Worker 是一种运行在浏览器背后的脚本，可以拦截网络请求和响应，从而达到离线缓存的目的。PWA 应用依赖于 Service Worker，因为它可以让我们在离线时仍然可以访问缓存的数据。
-- -------------------- ---- ------- -- -- ------- ------ -- ---------------- -- ---------- - ------------------------------------------ - -- ---- -------------------------------- ----- -- - ---------------- ----------------------- ----------- -- -------------- ---- -------------- -------------- ------------- ----------- --- -- --- -- ------ ------------------------------ ----- -- - ------------------ --------------------------- -------------- -- - -- ---------- - ------ --------- - ------ --------------------- -- -- ---展开代码
在上述代码中，我们注册了 Service Worker，然后缓存了一些静态资源。当用户请求这些资源时，Service Worker 会拦截这个请求，并根据缓存中的数据返回响应。
总结
PWA 应用在很多方面都可以提供更好的用户体验，但在实现过程中也会遇到一些问题。我们可以通过跨域解决方案、Cookie 策略和缓存技术来克服这些问题。同时，Service Worker 也是实现离线缓存的关键技术。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc37a0f6b2d6eab3213906
