pwa简单说明

pwa简单说明

什么是pwa

  • PWA全称Progressive Web App,即渐进式WEB应用。
  • 本质上是一个网页,通过2种新技术可以运行在本地(手机端和桌面端)
    • App Manifest 使网页程序可以在没有记录url的使用在桌面上访问,可以实现加载动画。
    • Service Worker 是网页拥有了离线运行的基础,本质是离线缓存资源与请求数据。
    • Service Worker 实现了消息推送

大致实现方式

使用Manifest添加程序到主屏

index.html

<head>
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="icon" href="/e.png" type="image/png" />
</head>

manifest.json

{
  "name": "Minimal PWA", // 必填 显示的插件名称
  "short_name": "PWA Demo", // 可选  在APP launcher和新的tab页显示,如果没有设置,则使用name
  "description": "The app that helps you understand PWA", //用于描述应用
  "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
  "start_url": "/", // 应用启动时的url
  "theme_color": "#313131", // 桌面图标的背景色
  "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
  "icons": [ // 桌面图标,是一个数组
    {
    "src": "icon/lowres.webp",
    "sizes": "48x48",  // 以空格分隔的图片尺寸
    "type": "image/webp"  // 帮助userAgent快速排除不支持的类型
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
  ]
}

service worker简介

  • service worker 是chrome 团队提出的一个web api,提供可持续的后台处理能力(类似与axios)
  • 特点:
    • 在页面中注册并安装成功后,运行于浏览器后台,不受页面刷新的影响,可以监听和截拦作用域范围内所有页面的 HTTP 请求。
    • 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
    • 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求
    • 单独的作用域范围,单独的运行环境和执行线程(这个比较重要,不然一直是一个阻塞模式)
    • 不能操作页面 DOM。但可以通过事件机制来处理
    • 事件驱动型服务线程
  • 浏览器支持情况
    • chrome 和 firefox支持 其他基本不支持

优缺点

优点

  • app快速开发,桌面全屏运行
  • 能够做到部分源生应用功能,可以离线使用
  • 消息推送
  • 本质是网页,方便更新。(没有原生app的各种启动条件,快速响应用户指令)

缺点

  • 支持率不高:现在ios手机端不支持pwa,IE也暂时不支持 (这点就已经让这个技术pass了)
  • Chrome在中国桌面版占有率还是不错的,安卓移动端上的占有率却很低
  • 各大厂商还未明确支持pwa (这点就已经让这个技术pass了)
  • 依赖的GCM服务在国内无法使用 (这点就已经让这个技术pass了)
  • 微信小程序的竞争

尽管有上述的一些缺点,PWA技术仍然有很多可以使用的点。

  • service worker技术实现离线缓存,可以将一些不经常更改的静态文件放到缓存中,提升用户体验。
  • service worker实现消息推送,使用浏览器推送功能,吸引用户
    渐进式开发,尽管一些浏览器暂时不支持,可以利用上述技术给使用支持浏览器的用户带来更好的体验。

参考链接

Manifest参考文档
chrome工程师讲解Manifest
pwa详细说明及实现方式

相关链接

纸质书籍介绍
最佳实践及博客转变模式

es6 实现私有关键字 private

es6 没有在class中实现私有关键字 private

私有属性的特征

  • class内部不同方法间可以使用,因此this要指向实例化对象(必须)
  • 不能被外部访问,因此实例化对象$person.name既不能获得值,也不能设定值(必须)
  • 不能被继承,因此extends后子类不具备该属性,但理论上可以重新手工添加(必须)
  • 约定为前面有下划线的this._name形式(备选)

暂时需要自己实现,一般有2种实现方法

  1. 使用weakmap
    const _mytimeOpts = new WeakMap()
    class mytime {
    
      constructor () {
        let opts = {'startTime': '', 'endTime': ''}
        _mytimeOpts.set(this, opts)
      }
    
      strat () {
        let startTime = Date.now()
        _mytimeOpts.get(this).startTime = startTime
      }
    
      end () {
        let endTime = Date.now()
        _mytimeOpts.get(this).endTime = endTime
      }
    
      getTime () {
        return _mytimeOpts.get(this).endTime - _mytimeOpts.get(this).startTime
      }
    
      test () {
        console.log('right')
      }
    } 
    
  2. 使用symbol
    const _startTime = Symbol('startTime')
    const _endTime = Symbol('endTime')
    
    class mytime1 {
    
      constructor () {
        this[_startTime] = ''
        this[_endTime] = ''
      }
    
      strat () {
        this[_startTime] = Date.now()
      }
    
      end () {
        this[_endTime] = Date.now()
      }
    
      getTime () {
        return this[_endTime] - this[_startTime]
      }
    
    }
    
  3. 总结
    • weakmap模式符合所有的私有特性
    • symbol只能保证在外部不能被发现但是调用Reflect.ownkeys还是可以看到这些属性
    • 最终选择 weakmap
  4. 参考链接
    weakmap优点
    weakmap和symbol对比

前端基本工具(一)-git

现在前端技术瞬息万变,大家造的各种轮子学都学不过来。不过不变的就是下面几个 工具:git、node.js、gulp

今天先来说说git

git介绍

git是一个版本控制工具。可以是本地也可以是分布式。

什么是版本控制?

想想刚开始工作的时候 写好的代码 每次修改前都要先保存一个版本

因为发现有时候 需求的变化真是各种奇葩一脸蒙逼

来来回回改来改去~~  相信大家都有体会

当时不知道git啊 就一遍一遍的复制粘贴

直到我发现了git 豁然开朗有木有。完全不用我管理文件了

只要提交过 删除了的也能找回来

当然 最靠谱的是分布式的管理了。

git的第2个好处 是github

在github上托管自己的个人项目也是很有成就感的一件事

当然如果有人star你就更好了!

git安装

官网的下载地址 现在简单多了有各种平台的对应下载地址 。

https://git-scm.com/download/

安装没有什么好注意的 下一步、下一步就好了。

当然 也有逼格较高的安装方式

在linux上安装

1.1先安装依赖

yum 对应RedHat 系列、 aptget 对应Debian系列。

1
2
3
4
5
$ yum install curldevel expatdevel gettextdevel \
  openssldevel zlibdevel
$ aptget install libcurl4gnutlsdev libexpat1dev gettext \
  libzdev libssldev

1.2 安装git

1
$ yum install gitcore
2
$ aptget install gitcore

在 Mac 上安装

1.1 苹果上 homebrew是自带的 相当好用

1
$ brew install git

git使用

先回家一会继续