Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PWA专题 - 初识 PWA #40

Open
kangschampagne opened this issue May 4, 2018 · 0 comments
Open

PWA专题 - 初识 PWA #40

kangschampagne opened this issue May 4, 2018 · 0 comments
Labels

Comments

@kangschampagne
Copy link
Owner

@kangschampagne kangschampagne commented May 4, 2018

前言

去年十一月份开始接触 PWA,也收集了一些材料,但是由于没有具体的产品,搁浅着这个技术,迟迟没有深入。现在开个专题,作为再拾起的记录吧。与各开发者共勉。

什么是 PWA? 解决了什么问题?

PWA,即Progressive Web App, 是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。
PWA 的主要特点包括下面三点:

  • 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
  • 体验 - 快速响应,并且有平滑的动画响应用户的操作
  • 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面

既然要有这些特点,那构成 PWA 的关键技术有哪些?

  1. Service Worker 和 Cache Storage 使 web 应用能够显著提高应用加载速度并能在离线环境使用
  2. matadata 用于描述 web 应用
  3. Web App Manifest 让 web 应用能够像原生应用一样被添加到主屏有自己的启动页
  4. Push API 和 Notification API 提高与 OS 的集成能力,让 web 应用未激活可以有原生的推送通知
  5. Background Sync 后台同步
  6. Responsive design 让 web 应用兼容多设备响应式
  7. HTTPS
    .....

那这么说来,要熟悉这么多关键的技术才能真正理解好 PWA 咯?是的。
当然我们只需要大概了解一下这些技术的缘由,为解决什么问题而生,至于里面的坑,只有实作 PWA 的时候才能找到了。

每一项技术都是由历史和其发展的,我接着列一个清单,熟悉一下,动手实践一下,会在之后真正做一个 PWA 应用的时候少掉非常多考虑的时间。要复杂问题简单化就需要拆解这个复杂问题为小问题并解决掉。

参考:

https://developers.google.com/web/progressive-web-apps/
https://github.com/SangKa/PWA-Book-CN
https://lavas.baidu.com/pwa
https://huangxuan.me/2017/02/09/nextgen-web-pwa/

@kangschampagne kangschampagne changed the title PWA专题 - 初始PWA PWA专题 - 初识 PWA May 7, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant
You can’t perform that action at this time.