当下，移动设备的普及和互联网技术的飞速发展越来越让用户习惯只通过手机来访问网站和应用，这也促进了 PWA（Progressive Web App）的发展。PWA 不仅可以提供更好的用户体验，同时也让网站、应用具备了更多原生应用的功能，例如：离线浏览、推送通知、桌面快捷按钮、全屏应用等。
PWA 的应用案例：Twitter、Pinterest、Medium、Instagram 等。
但是，如何让 PWA 的体验更上一个台阶呢？在本篇文章中，我们将从优化加载速度和提升用户体验两个方面，来探讨 PWA 落地最佳实践。
优化加载速度
1. 使用 Service Worker 缓存资源
在网络环境良好的情况下，无疑 Web 应用的速度是很不错的。然而在网络环境不佳或者断网的情况下，Web 应用的速度就会变得很慢或者打不开。此时使用 Service Worker 技术缓存资源是至关重要的。Service Worker 可以在后台拦截网络请求，并缓存请求所得到的资源，从而使离线状态下也可以快速打开应用。
-- -------------------- ---- ------- -- -- ------- ------ -- ----------------------- ------------------------------- ------------------ -- - -------------------------- ------------ ------------- -- ------------ -- - -------------------------- ------------ --------- ------- --- -- ------- ------ ---- -------------------------------- ----- -- - ---------------- ----------------------- ----------- -- - ------ -------------- ---- -------------- -------------- --------- --- -- -- --- -- ------- ------ -------------- ------------------------------ ----- -- - ------------------ --------------------------- -------------- -- - -- ---------- - ------ --------- - ------ --------------------- -- -- ---展开代码
2. 压缩代码和图片
压缩代码和图片可以减小 Web 应用的体积，从而提高加载速度。代码压缩可以使用工具比如 UglifyJS，图片压缩可以使用 TinyPNG 等在线工具。
3. 按需加载
在 Web 应用体积较大时，按需加载可以极大地减少应用的加载时间。比如，只有当用户打开某个功能模块时再去加载该模块所需要的资源。
function loadLazyModule() { import('./lazy-module.js') .then(module => { module.init(); }); }
提升用户体验
1. 添加 Add to Home Screen 功能
添加 Add to Home Screen 功能可以将 Web 应用加入到设备桌面，方便用户快速打开应用。同时也可以提升用户对应用的使用频率。
<link rel="manifest" href="manifest.json">
-- -------------------- ---- ------- - ------- --- ----- ------------- --- ----- -------- - - ------ --------------------------- -------- ---------- ------- ----------- -- - ------ --------------------------- -------- ---------- ------- ----------- - -- ------------ --- -展开代码
-- -------------------- ---- ------- --- --------------- ---------------------------------------------- ----- -- - ----------------------- -------------- - ------ --- -------------------------------- -- -- - -- ---------------- - ------------------------ ------------------------- ------------------ -- - -- --------------------- --- ----------- - ----------------- -------- --- ---- --------- - ---- - ----------------- --------- --- ---- --------- - -------------- - ----- --- - ---展开代码
2. 添加离线支持
通过 Service Worker 可以添加 PWA 的离线支持。在离线状态，用户依然可以浏览已缓存的内容。可以通过监听 navigator.onLine 来判断当前网络状态。
if (!navigator.onLine) { console.log('You are offline'); }
3. 实现无缝切换
在 PWA 中，无缝切换是指用户从一个页面或视图切换到另一个页面或视图时，不会感觉到页面重新加载的过程。可以使用一些前端框架和库来实现。如 React、Vue、Angular 等。
<div id="root"></div>
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ------------- -- ------- ------ ---- - ---- ------------------- ----- ---- - -- -- - ----- ------------- ---------- -- -- -------- ------ -- ----- ----- - -- -- - ----- -------------- -------- ---- ----- ------- ------ -- ----------------- -------- ----- ---- --------- ----------------------- --------- ----------------------------- ----- ----- ------ ----- -------- ------------------ ------ ------------- ------------------- ------ --------- -- ---------------------------------展开代码
结语
在本文中，我们介绍了 PWA 的落地最佳实践。通过这些最佳实践，可以使 Web 应用更加快速和稳定，在提升用户体验的同时，也加深了现代 Web 开发者对前端技术的理解和认知。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bac8d8306f20b3a69d7627
