什么是 PWA?
PWA 全称为 Progreesive Web App,翻译过来就是渐进式 Web 应用。PWA 可以被看做是将 Web 应用打造为体验与 Native 应用相当的 Web 应用。
PWA 带来了很多优点,包括:
- 可离线使用:当用户失去连接时,可以让用户仍然使用应用,因为 PWA 可以将应用缓存到本地,当网络恢复时,应用将自动更新缓存。
- 快速响应:PWA 可以缓存应用的某些部分,使得应用可以更快地响应用户的请求。
- 安全性:PWA 在 HTTPS 协议上运行,可以保障数据的安全性。
- 无需下载:无需通过应用商店下载安装,用户可以直接访问应用,节省用户的时间和手机存储空间。
实战体验 PWA
1. 创建 PWA
首先,我们需要用脚手架工具 create-react-app 创建一个 React 应用。
npx create-react-app my-pwa cd my-pwa
然后,我们需要安装 workbox-webpack-plugin 和 pwa-webpack-plugin 这两个插件。
npm install workbox-webpack-plugin pwa-webpack-plugin --save-dev
接着,我们需要修改 webpack.config.js 文件。
-- -------------------- ---- ------- ----- ---------------- - ----------------------------- ----- - ---------- - - --------------------------------- --- -------- - --- ------------------ ----- --- ----- ---------- ----- ------------ --- ------------- ----------- ---------- ------------ ---------- ------- ----- ---- ----- ------ - - ---- ----------------------------------- ------ ----- ----- ---- ---- -- - ---- ----------------------------------- ------ ------ ---- --------- - - --- --- ------------ ------------- ----- ------------ ---- -- -展开代码
在配置中,我们可以看到一些关于 PWA 的信息,例如应用名、描述、主题颜色等。
接下来,我们在 public 目录下创建一些必要的文件,包括 icon.png 和 manifest.json。
-- -------------------- ---- ------- - ------- --- ----- ------------- ----- -------------- ---------- ------------------- ---------- ---------- ------------- -------- - - ------ --------------- -------- ---------- ------- ----------- -- - ------ --------------- -------- ---------- ------- ----------- - -- ------------ --- -展开代码
注意,在配置中添加了 workbox-webpack-plugin 和 pwa-webpack-plugin 这两个插件,分别用于生成 Service Worker 和配置 PWA 信息。GenerateSW 的 skipWaiting 属性设为 true,可以让新版本的 Service Worker 在启用时立即接管现有的 Service Worker。
2. 测试 PWA
为了测试我们的 PWA,在本地启动应用。
npm start
接着,在浏览器中访问 http://localhost:3000,然后按下 F12,打开开发者工具,选择 Application 面板,找到 Manifest。
如果看到了 Manifest,那么说明我们创建了一个 PWA。
接下来,我们需要测试 PWA 的离线使用和缓存功能,因为这是 PWA 最大的特点之一。
我们可以打开开发者工具的 Network 面板,然后点击离线,将网络断开。然后刷新页面,可以发现应用仍然可以使用。
此时,在 Service Worker 面板可以看到上下文状态变为 offline,表示我们已经离线使用了应用。
此外,我们可以模拟应用更新。
我们只需要修改应用的版本号,然后重新打包应用,那么即使用户未关闭标签页,PWA 应用的 Service Worker 也能够自动更新。
总结
PWA 是一种优秀的技术,它能够很好地缓存数据和加速应用的响应速度,同时具备离线使用功能,无需下载和安装应用,这些特点在移动端尤其突出。
现在,越来越多的 Web 应用(如 Twitter、Pinterest 等)都已经采用了 PWA 技术。如果你是一个前端工程师,不妨也去尝试一下 PWA 技术,为你的 Web 应用带来更好的用户体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64dd278ef6b2d6eab38395e1