柚子讴歌的博客

初识PWA

2018/02/06

分享总结

今天晚上罗旋大佬给我们分享了关于web前沿方面的知识,对我的感觉是很精彩的,只比之前学姐的分享稍逊一筹,下面我来分享一下我的理解并在之后查阅的资料

Progressive Web App

这个词直译就是“进步的web app”,由于学长推荐的学习网页需要翻墙才能看,我在这里给大家推荐另一个网站 什么是PWA,希望能有所帮助

什么是PWA?

PWA是一种提升Web App体验的方法,能带给用户原生应用般的体验,而PWA的主要特点主要包含以下几点:

  • 渐进式 - 适用于选用任何浏览器的所有用户,因为它是以渐进式增强作为核心宗旨来开发的
  • 自适应 - 适合任何机型:桌面设备、移动设备、平板电脑等
  • 连接无关性 - 能够借助服务工作线程在离线或低质量网络状况下工作
  • 类似应用 - 由于是在 App Shell模型 基础上开发,因此具有应用风格的交互和导航,给用户以应用般的熟悉感
  • 持续更新 - 在服务工作线程更新进程的作用下时刻保持最新状态
  • 安全 - 通过HTTPS提供,以防止窥探和确保内容不被篡改
  • 可发现 - W3C清单和服务工作流程注册作用域能够让搜索引擎找到它们,从而将其识别为“应用”
  • 可再互动 - 通过推送通知之类的功能简化了再互动
  • 可安装 - 用户可免去使用应用商店的麻烦,直接将对其最有用的应用“保留”在主屏幕上
  • 可链接 - 可通过网址轻松分享,无需复杂的安装

比如有一个具体的例子,天气PWA,当我们平时遇到断网时刷新一下页面,电脑或手机会出现“未连接到互联网”之类的页面或错误提示,而PWA则会在断网刷新后依然出现页面内容,而且当我们对页面上一个内容很感兴趣时,我们可以直接将它放在主页面,不需要安装app,国内的 豆瓣网手机版 使用的也是PWA,对于如何使用,由于在chrome浏览器需要下载“Web Server for Chrome”扩展功能,我们可以查按照我推荐的那个网站来进行操作

Service Worker

前端工程师有很多性能优化手段,包括CDN、CSS Sprite、文件的合并压缩、异步加载、资源缓存等(原谅我还不清楚具体的性能优化),而Service Worker让缓存做到了优雅、极致,让Web App的缺点更加弱化。

Service Worker特点:

  • 一个独立的worker线程,独立于当前网页进程,有自己独立的worker context
  • 一旦被install,就永远存在,除非被uninstall
  • 需要时可直接唤醒、不需要要=可以自动睡眠‘
  • 可编程拦截代理请求和返回,缓存文件,缓存的文件可以被网页进程渠取到(包括离线状态)
  • 离线内容开发者可控
  • 能向客户端推送消息
  • 不能直接操作DOM
  • 必须在HTTPS环境下工作
  • 异步实现,内部大都是通过Promise实现

如何使用Service Worker请看网站资源,我试过,不用翻墙,可以成功检查到是否安装Seivice Worker

CATALOG
  1. 1. 分享总结
    1. 1.1. Progressive Web App
      1. 1.1.1. 什么是PWA?
      2. 1.1.2. Service Worker