|
Post by account_disabled on Jan 25, 2024 3:39:54 GMT -5
这篇关于将您的网站改造为渐进式 Web 应用程序的文章包含在我们的选集《现代 JavaScript》中。如果您希望一切都集中在一个地方,以跟上现代 JavaScript 的速度,请注册 SitePoint Premium 并自行下载一份副本。 最近,关于渐进式 Web 应用程序 (PWA) 的讨论很多,许多人质疑它们是否代表了(移动)网络的未来。 我不会深入讨论原生应用程序与 PWA 的争论,但有一件事是肯定的:它们在增强移动设备和改善用户体验方面大有帮助。 移动网络访问量注定会超过所有其他设备的总和,您能忽视这一趋势吗? 20 世纪 50 年代复古场景中的女性看着带有渐进式 Web 应用程序图标的平板电脑 好消息是制作 PWA 并不难。事实上,很有可能将现有网站转换为 PWA。这正是我在本教程中要做的事情。完成后,您将拥有一个行为类似于本机 Web 应用程序的网站。它将离线工作并有自己的主屏幕图标。 目录 什么是渐进式 Web 应用程序? 渐进式 Web 应用程序是渐进式增强 这不仅仅是应用程序 演示代码 连接设备 第 1 步:启用 HTTPS 第 2 步:创建 Web 应用程序清单 第 3 步:创建 Service Worker 安装事件 激活事件 获取事件 第 4 步:创建有用的离线页 WhatsApp 号码数据 面 开发工具 PWA 陷阱 网址隐藏 缓存过载 缓存刷新 有用的链接 评论 什么是渐进式 Web 应用程序? 渐进式 Web 应用程序(简称PWA)是 Web 技术领域令人兴奋的创新。PWA 包含多种技术,使 Web 应用程序像本机移动应用程序一样运行。开发人员和用户的好处克服了纯 Web 和纯本机解决方案所施加的限制: 您只需要一款使用开放、标准 W3C Web 技术开发的应用程序。无需开发单独的本机代码库。 用户可以在安装之前发现并试用您的应用程序。 无需使用 AppStore、遵守晦涩难懂的规则或支付费用。应用程序更新会自动发生,无需用户交互。 系统会提示用户“安装”,这会在主屏幕上添加一个图标。 启动后,PWA 会显示一个有吸引力的启动屏幕。 如有必要,可以修改浏览器镶边选项以提供全屏体验。 重要文件在本地缓存,因此 PWA 的响应速度比标准 Web 应用程序更快。(它们甚至可以比本机应用程序更快。) 安装是轻量级的——也许缓存了几百KB的数据。 所有数据交换都必须通过安全的 HTTPS 连接进行。 PWA 可以离线运行,并且可以在连接恢复时同步数据。 现在还处于早期阶段,但案例研究是积极的。印度最大的电子商务网站 Flipkart在放弃原生应用程序而采用 PWA 后,销售转化率提高了 70%,停留时间增加了三倍。全球最大的商业交易平台阿里巴巴也经历了类和其他基于 Blink 的浏览器提供可靠的 PWA 技术支持。Microsoft 正在致力于 Edge 实施。尽管WebKit五年计划中有一些充满希望的评论,但苹果仍然保持沉默。
|
|