PWA浅尝辄止

前段时间看到苹果官方将对PWA提供支持，之前看到沪江也已经开始了PWA的尝试，于是尝试自学了一把，写点心得。 教程 Your First Progressive Web App 几点心得 PWA不算一种技术标准，算是一种理念，目的是为了给web应用提供接近APP的用户体验。大约有几个特性（我理解的，不保证全）： 可添加HOME访问图标，支持全屏运行 离线访问 消息推送 所以，PWA是一系列技术的合集。添加图标这个靠浏览器及系统实现，离线访问依赖了Service Worker + CacheStorage API + Fetch API，消息推送Chrome支持GCM（这玩意国内肯定不好用。。。） 虽然看起来依赖的东西很多都不完备支持（实际上也是），但因为是 Progressive，不支持也没关系，也不影响原来的Web APP运行，就是没了上述的特性而已。总而言之，PWA这东西加上之后，支持的可以提升用户体验，不支持的就当什么都没发生。 示例 模仿官方的示例，我也自己写了一个。只实践了离线访问的特性。 PWA测试页面 总体流程如下： 正常加载页面 检测支持PWA？ 继续3 : 啥也不做。 缓存请求及数据（图片等资源） 再加载页面资源直接从缓存加载，请求的接口数据先从缓存展示，等有返回再更新。 问题 强制需要https 测试离线页面竟然在firfox下完美，在chrome上离线有问题。。。还在找原因。

《JavaScript高级程序设计》读书笔记：classList 与 readyState

继续学习《JavaScript高级程序设计》，体会原生 JavaScript 之美。今天记录2个有用的属性。 1.classList HTML5 对DOM操作 class 做了优化，增加了 classList 属性，从此再也不用对 className 做字符串操作了。它有4个方法 add // 增加一条属性（已经存在就不添加） contains // 判断属性是否存在 remove // 删除属性 toggle // 如果存在就删除，不存在就添加。这个好玩～ 2.readyState 曾几何时，使用 onload 方法来判断页面有没有加载完毕，现在有了 document.readyState , 一切就简单了。 其中书中的内容不完整（P292），这个属性目前已经有了3个值（2018-02-24） loading //页面还在加载 interactive //文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。 complete // 文档和所有子资源已完成加载。状态表示 load 事件即将被触发。 之前使用 m-React 的时候使用的是 onload 方法，如果下次有机会再来测试一波 readyState

html == document.childNodes[0] ? 不是

《JavaScript高级程序设计》（第三版）中发现了一个问题，在P254中有这么一句 html === document.childNodes[0] 作者当时写书的时候，document.childNodes[0] 返回的是html元素，也就是说返回 true， 但我在读的时候试验了一下，发现是不对的。 在Chrome v63 及 Firfox v58.0 中document.childNodes[0]均不是html元素，而是 documentType。

document.implementation.hasFeature总是返回true

在读《JavaScript高级程序设计》（第三版）中发现了document.implementation.hasFeature 方法，这个方法功能很强大，可以检测到浏览器是否支持某些功能。（P259） 于是我赶紧使用了一下，发现： document.implementation.hasFeature('Range',"40000000.0") 输出 true why MDN上说，这个方法已经废弃了。DOMImplementation.hasFeature() - Web APIs | MDN 所以不要用了。 so，读书要趁早。

通过ua判断微信浏览器打开

最近做了一个小需求，需要判断网页是不是在微信内打开的，打印了一下微信浏览器的UA，写了一个简单的小函数。 function checkWechatBrowser () { var userAgent = navigator.userAgent.toLowerCase(); return (/MicroMessenger/ig).test(userAgent); }; 暂时可用。 PHP 版本 if( !preg_match('/micromessenger/i', strtolower($_SERVER['HTTP_USER_AGENT'])) ) { return true; }

CSS 中 margin 与 padding 的百分比

最近做开发的时候用到了多次 margin: xx% 来做自适应的网页布局，但这个东西有时候出来的结果并不是自己所想的，于是去百度了一下这个百分比的计算基准，结果发现了一个比较好玩的点。 示例HTML <div class="boxer"> <div class="box"></div> </div> 示例CSS .boxer { width: 600px; height: 400px; background: red; } .box { width: 200px; height: 100px; background: blue; // padding: 10%; //padding 和 margin 一样好玩 margin: 10%; } 猜测结果 .box 的 margin 为：40px 60px 40px 60px 结果 是的结果是 60px 60px 60px 60px，同样 padding 也是一致。 why w3c就是这么规定的。 margin - CSS | MDN

不定宽高元素的水平垂直居中

前端开发中水平垂直居中是绕不开的坎，尤其是宽高不定的元素，之前听说过总总办法，由于自己懒，也没一一去试，今天就做一个总结。 PS：纯CSS实现，布局的问题不应试交给JavaScript(除非某些破不得已的情况)。 预期结果 HTML代码 <div class="panel"> <div class="box"></div> </div> Flex 方法 .panel { width: 600px; height: 400px; background: red; display: flex; justify-content: center; align-items: center; } .box { width: 83%; height: 79%; background:green; } Flex 是最简单的实现方法，由于目前通常是移动开发，这也是我的首选的方法。关于 Flex 布局可以参考：Flex 布局教程 margin: auto 方法 .panel { width: 500px; height: 400px; background: red; position: relative; } .box { width: 76%; height: 79%; background: green; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 这算是 css 的一个奇技淫巧，非移动端开发下首选。 继续阅读