PWA（Progressive Web App）是一种能够提供类似原生应用程序体验的 Web 应用程序。它结合了网页和原生应用程序的优点，可以实现离线访问、推送通知、后台同步等功能。在制作 PWA 过程中，需要注意以下 10 个问题：
1. HTTPS
PWA 需要使用 HTTPS 协议来保证安全性，因为 Service Worker 只能在 HTTPS 网站上注册。要在本地开发环境中使用 HTTPS，请考虑使用 Webpack DevServer 或者 https-localhost 等工具。
2. Service Worker 生命周期
Service Worker 生命周期与窗口（即页面）不同，它会在首次注册时下载和缓存资源，这可能需要一些时间。在 Service Worker 脚本的安装和激活过程中，可以通过 self.skipWaiting() 和 self.clients.claim() 方法来发送一个更新事件，并让新版本的 Service Worker 立即生效。
3. 离线缓存
PWA 的核心特性之一就是离线缓存，这可以通过 Service Worker 实现。在 Service Worker 脚本中，可以使用 Cache API 来缓存资源。举个例子，以下代码将会尝试开启一个 Service Worker 并缓存缓存 home.html 和 main.css 文件：
-- -------------------- ---- -------
-- ------- ------ --
----- ---------- - -----------
----- ----------- - -
----
--------------
------------------
--
-------------------------------- ----- -- -
-- ----
----------------
-----------------------
----------- -- --------------------------
--
---
------------------------------ ----- -- -
-- ------
------------------
---------------------------
-------------- -- -------- -- ---------------------
--
---4. 动态缓存
在 Service Worker 中，可以使用 fetch 方法来响应网络请求，并缓存请求结果。举个例子，以下代码将会尝试从源服务器获取文件，并将其缓存到 Service Worker 缓存中：
-- -------------------- ---- -------
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -------- -- ---------------------
-------------- -- -
-- -- --- -------
-- --------------------- --- ------ -
-- -------
----- --------------- - -----------------
-----------------------
----------- -- ------------------------ ------------------
-
------ ---------
--
--
---5. 通知
PWA 可以像原生应用一样使用通知功能，通过 Notification API 实现。以下是一个使用 Notification API 发送通知的例子：
if (window.Notification) {
Notification.requestPermission(permission => {
const notification = new Notification('Hello World', {
body: 'This is a PWA notification',
icon: 'icon.png'
});
});
}6. 应用图标
在桌面、任务栏和应用商店等位置展示应用图标是 PWA 的一个重要特点。要想让 PWA 在桌面等位置加载自定义图标，需要在 HTML 页面中添加以下标签：
<link rel="icon" sizes="192x192" href="icon.png">
7. 添加到主屏幕
PWA 可以像原生应用一样添加到用户的主屏幕上，通过 beforeinstallprompt 事件触发 PWA 添加弹框的方式实现。以下代码演示了如何在 beforeinstallprompt 事件触发后展示添加弹框：
-- -------------------- ---- -------
---------------------------------------------- ----- -- -
-----------------------
----- -------------- - ------
----- ------ - ------------------------------------------
-------------------------------- -- -- -
------------------------
------------------------------------- -- -
-- --------------- --- ----------- -
---------------- ----- -- ---- ----------
-
---
---
---8. Web API 限制
PWA 中也存在 Web API 的限制，需要熟悉和正确使用相应的 API。例如，在 PWA 中使用 getUserMedia（获取摄像头和麦克风）需要注意安全性，必须在用户许可后才能运行。
9. 响应式设计
PWA 旨在提供类似原生应用的体验，因此需要具备响应式设计。对于桌面和移动设备，需要适配不同屏幕大小和分辨率，并提供合适的布局和交互方式。可以使用响应式框架（如 Bootstrap 或 Foundation）来帮助实现响应式设计。
10. 性能优化
PWA 的离线缓存和 Service Worker 特性使得其具备很好的性能特点。但是，还有其他方面可以进行优化。例如，压缩和合并 JavaScript 和 CSS 文件、使用可缓存的字体和图片等。
总结
在进行 PWA 开发时，需要注意以上 10 个问题。通过正确使用 HTTPS、Service Worker 生命周期、缓存、通知、应用图标和主屏幕添加、Web API、响应式设计和性能优化等特性，可以更好地实现 PWA，提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459a801968c7c53b0bc3ba4