vue项目完美结合PWA
本栏目主要是把vue项目改造成PWA
RitchieWei
人如果没有理想,那么和咸鱼有什么区别!
展开
-
如何把vue项目改造成支持PWA的功能(第二章:加入service-worker)
第一章中,我们加入Manifest ,让我们的网站生产图标放在手机桌面上,入口更加的明显了,和native差不多,大大的提升了用户体验,免去用户收藏网址等操作。这章中,我们将加入PWA的核心:service-worker相关代码:https://github.com/hwq888/yeye-PWA1、什么是Service Worker?下面简单的介绍一下,本章主要说怎么和VUE结合...原创 2019-01-17 15:00:05 · 5331 阅读 · 0 评论 -
如何把vue项目改造成支持PWA的功能(第一章:加入Manifest)
什么是PWA:Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验PWA 的主要特点包括下面三点:可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面PWA 具有下面一些特性:渐进式...原创 2018-12-21 16:24:25 · 7653 阅读 · 0 评论 -
vue-cli 构建的项目如何加入骨架屏 skeleton
在使用 Native APP 时我们经常可以看到在实际内容加载出来之前会有一些占位图片,因为其结构和实际加载内容相似(如新闻页面加载之前也会有一个纵向列表),因此让用户感知到自己的页面正在加载中,体验较好。而传统的 Web 站点因为无法实现这一点,在加载前统一为白屏,我们能优化的仅仅是缩短这个白屏时间,这就决定了 Web App 相较于 Native APP 在用户体验上的先天劣势。我们把...原创 2018-07-26 11:17:17 · 16080 阅读 · 19 评论 -
PWA 的探索与最佳实践
PWA 是在 Web 端具有颠覆性的一个概念,在国外已经被普遍接受,很多站点已经改造成 PWA,并且取得了非常好的成绩。例如 twitter 改造 PWA 完成后,twitter lite 平均用户停留时长增长了65%。在国内,PWA 的概念越来越被广泛接受,微博、饿了么等很多大型的站点都已经改造成 PWA,并且还有更多的站点正在进行改造。PWA 是什么对于 PWA 来说,用户体验才是核心。PWA...转载 2018-05-17 14:59:11 · 1581 阅读 · 0 评论