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对比

sublimetext3 markdown 配置说明

  1. 安装包管理器 packagecontrol

按下 commadn+sift+P 出现插件管理 输入 pack ins 查找对应的包

  1. 安装MarkdownEditing markdown 编辑器

mdi +tab 添加图片
mdl +tab 添加链接
更多查看key-bindings

  1. 安装markdowntoc 生成md目录

在要生成目录的地方输入 [toc]
设置{“default_list_bullets”: “-+*”} 不然只会读取标题
默认深度为2 可以根据需要修改

  1. 安装OmniMarkupPreviwer 实时预览和导出

command+ option + o 预览
command + option + x 导出html

git换行符问题

起因

在跨平台项目中,经常会出现windows和linux,Macos,unix 等平台,
在当前windows平台中的文件换行符为(0x0d0a)crlf,
其他平台都是(0x0a)lf,
在git项目中如果不注意就会出现windows拉取后不修改提交,
仍然显示有改动的问题。

解决办法

git中给出了一个 自动切换的方式(code.autoclrf=true)
但是有bug不能使用(在有中文的文件中无法自动转换)
pass(这里的pass 就是不通过的意思)
到底咋用 我也不知道 pass到底啥意思

最终解决办法是
编译器不对代码做任何改动
每次提交的时候拒绝提交包含crlf的代码
git config –global core.autocrlf false
git config –global core.safecrlf true
完美解决

参考

git上的办法
详细的说明和解决办法
详细的说明和解决办法

nginx配置说明

  1. 安装nginx
  2. 修改nginx配置文件
    server
    {
        #转发端口
        listen 8002;
        #转发域名
        server_name localhost;
        #转发路径
        location / {
            #转发头缓存大小
            proxy_buffer_size 64k;
            proxy_buffers   32 32k;
            proxy_busy_buffers_size 128k;
            #被转发ip,端口隐藏
            proxy_redirect http://xxx.xxx.xxx/ http://blog.emengtt.com/;
            #被转发地址
            proxy_pass   http://xx.xxx.xxx/;
            }
        #日志
        access_log logs/show.log;
    }
    
  3. 基本操作

    windows
    开始 nginx.exe
    停止 nginx.exe -s stop
    重新加载配置文件启动 nginx.exe -s reload
    linux
    开始 nginx
    停止 nginx -s stop
    重新加载配置文件启动 nginx -s reload
    注: 可能需要管理员权限

  4. nginx 设置最大文件设置

    client_max_body_size 20M;

  5. nginx 设置超时时间
    > proxy_connect_timeout 600s;
    > proxy_send_timeout 600s;
    > proxy_read_timeout 600s;

编译安装nginx并配置负载均衡

  1. 下载安装nginx
  2. 解压nginx tar -zxvf nginx-1.11.6.tar.gz
  3. 进入解压目录执行./configure(非阿里云需要自己安装gcc编译程序yum install gcc-c++
  4. 查看缺少的组件一般缺少(pcre,pcre-devel,zlib,zlib-devel,openssl ,openssl-devel)
    安装示例:yum install -y openssl openssl-devel(阿里云上的安装方式)
    或者源码编译安装,安装示例:

    ./configure --prefix=/usr/local/nginx --with-zlib=../zlib-1.2.8 --with-pcre=../pcre-8.36   
    make    
    sudo make install
    #如果新加模块
    ./configure –add-module=/data/software/ngx_http_google_filter_module
    make 自动替换原来的nginx二进制
    #查看已经编译的模块 V是大写的
    nginx -V 
    
  5. 默认安装位置
      nginx path prefix: "/usr/local/nginx"
      nginx binary file: "/usr/local/nginx/sbin/nginx"
      nginx modules path: "/usr/local/nginx/modules"
      nginx configuration prefix: "/usr/local/nginx/conf"
      nginx configuration file: "/usr/local/nginx/conf/nginx.conf"
      nginx pid file: "/usr/local/nginx/logs/nginx.pid"
      nginx error log file: "/usr/local/nginx/logs/error.log"
      nginx http access log file: "/usr/local/nginx/logs/access.log"
      nginx http client request body temporary files: "client_body_temp"
      nginx http proxy temporary files: "proxy_temp"
      nginx http fastcgi temporary files: "fastcgi_temp"
      nginx http uwsgi temporary files: "uwsgi_temp"
      nginx http scgi temporary files: "scgi_temp"
    
  6. nginx 的负载均衡
      upstream  mis-tomcat { 
         #负载均衡配置为轮换分配
         #round-robin;
         #负载均衡配置为哪个链接少就分配到哪个
         #least_connected;
         # 集群mistomcat 配置
         # weight 权重相同 
         # max_fails 最大失败次数 
         # fail_timeout 每次超过最大失败次数停用时间
         # backup 所有其他服务器都挂了的话backup生效
         # down 服务器不启用
         # resolve 指定域名解析服务
         server 10.168.1.218:9080  weight=1 max_fails=1 fail_timeout=10;  
         server 10.168.1.218:10080 weight=1;
         server 10.168.1.219:8080 backup down resolve
         #负载均衡配置为根据ip值绑定,但是服务器不可用就会切换机器
         ip_hash; 
      }
    
  7. nginx 的session共享
    • 使用cookie储存session(代码部分配置和修改)(而且不安全cookie会被伪造)
    • 使用数据库储存session (代码改动)(加大了数据库负担,切同步时间较慢)
    • 使用memcache或redis (代码改动)(速度快,但是有内存压力,内存不足会溢出)
    • nginx的ip_hash (nginx改动) (使用ip做hash来分配用户到固定机器)
      >有3个弊端:
      nginx服务器要在最前端能够获取真实ip,
      nginx分发之后不能再次分发否则session不起作用,
      如果大量用户在同一局域网访问负载均衡失效
    • upstream_hash (nginx改动)(第三方模块)(和ip_hash差不多只是更改做hash的参数)
  8. 参考链接

    nginx在linux上的编译安装
    ngxin在mac上的编译安装
    nginx常用配置
    nginx+tomcat负载均衡配置
    nginx负载均衡一致性哈希
    nginx负载均衡配置
    nginx和apache的比较
    nginx的session共享问题

前端基本工具(一)-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使用

先回家一会继续