w3cTrain

Keep Moving

在开始和 Service Workers 打招呼之前,我们先来对比一下 Native App 和 Web 在性能和可及性之间的差异。

差异
为了结合两者的优点,各大厂商推出了各自的解决方案,Hibrid、Weex、Reative Native 等等。
Google 团队推出了 Progressive Web Apps。

Progressive Web Apps 能做什么

  • Notification
  • Add To Home Screen
  • Instant Loading
  • Fast
  • Responsive
  • Secure

Anyways,这是理想状态,在中国难免会遇上障碍,我们还是必须走中国特色 ** 道路。

  • Notification 依赖于 Google Push API,除非你能让用户都翻过 GFW。
  • 国内 Android 自定义程度极高,大部分厂商自定义桌面,自带浏览器也没有 Add To Home Screen 选项。

上面这两个功能都没法用在正式环境上,不过还好对注重用户体验的我们来说,它们并非必要。接下来看 PWA 的核心,也是这篇文章的重点,Service Worker。

初识 Service Worker

  • Service Worker 是运行在浏览器后台的脚本,运行环境与普通的脚本不同,它不能直接参与页面交互。
  • Service Worker 类似于网络代理,可以用来请求转发,伪造响应。
  • Service Worker 可以用来拦截网络请求,处理推送消息以及执行其他任务。
  • Service worker 权限很高,所以需要运行在 HTTPS 上,防止被人从中攻击,Github Page 支持 HTTPS,是块极好的试验田。

网络代理

Service Worker 生命周期

生命周期

Service Worker 基于事件监听机制,在没有接受到事件时,它几乎不占内存。Service Worker 可接收的事件主要有下面几个:

install 事件通常在 ServiceWorker 首次运行的时候被激活,通常在这个时间点缓存资源,以便于用户在下次访问时能提速。
activate 事件在一次成功的 install 之后被触发。
fetch 事件能截取当前 ServiceWorker 作用域下发出的请求,这时候我们可以拦截请求并作出响应。
message 事件在接收到消息的时候执行。

Read More...

相信大家都有过类似经历,在看一些博客文章的时候,突然页面内容跳了一下,当时就想骂娘了。如果文章前半部分没有激起你阅读的欲望还好说,直接关闭页面,但是如果你还想继续往下读,就只能苦逼地人肉定位。
🙄🙄🙄
Read More...

我学习前端『新』技术也有段时间了,最近接手的项目由于种种原因(历史,求稳,考虑成本等等),使用的技术都比较保守。在熟悉了『新』技术,重新回到最初的起点,回头看看它们带来些什么。

这篇文章以Sass为例,记录一些自己的思考。

Read More...

一像一世界,一素一菩提。

为了赶进度,我们常常会偷懒,目测一下大概尺寸直接开始写样式。
忙活了半天,终于呈现到’像素眼’设计师面前,大写的尴尬!
但是有时候你用心去量尺寸,也可能会出差池。

比如1px的问题。
问题大概是这样的,设计师给的设计稿是2倍图,或3倍图,但是里面的某条线或者边框却是1px的???
exo-me
Read More...

用过Vue,你肯定知道,Vue组件之间的通信常见的有
$dispatch - 通过冒泡的方式传递事件
$broadcast - 通过广播的方式向子孙组件传递事件

如果组件之间的关系只是父-子关系,那么dispatch,broadcast其实就足够了。
但是有天需求变了。登录成功之后,要把用户信息都填上,而需要用户信息的组件不是父组件,而是兄弟组件的后台。
那么事件传递就会变成登录组件向上dispatch到父组件,父组件通过broadcast的方式下发。

example
Read More...

前端切图历史悠久,或许那时候不叫前端,叫页面重构师。之所以页面重构师要自己动手切图,是因为面对多种多样的页面效果,UI设计师不知道每一张图的需求,常常会引发流血冲突,带来不可挽回的生命危险。
切图能体现页面重构师的经验和能力,如果你拿到手的是psd文件,那么你可以看看“存储为 Web 和设备所用格式”的切法。

前端技能之切图 - github -xiangpaopao

但毕竟切图是个体力活,其中有大量重复工作,而且还有Retina图,图切多了人都傻了。。。
特别是psd文件有好几百兆的时候,MacBook 也有点吃不消,切一张图要花费好几分钟。

但是,重复性劳动总会有解决方法的!
尝试了很多种解决方式,整理如下:

Slicy

Slicy 是个收费的切图软件,功能很强大,操作却很简单。你只需要把要切的图层命名为 *.png 或者 *.jpg 之类的格式。保存,再把整个psd拉进 Slicy,搞定!
Slicy

Read More...

最近由于工作需要,在新的 mac pro 上搭建前端开发环境。
写篇文章记录一下,方便下次(如果有下次的话)装机。

注意!!!我只是记流水账,备忘而已,非战斗人员请撤离。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var equipment = {
'输入法': '搜狗输入法',
'浏览器': 'Chrome',
'Chrome插件': [
'AngularJS Batarang',
'Clear Cache',
'HTML5 Outliner',
'JSONView',
'LiveReload',
'Panda 4',
'Postman',
'SnappySnippet',
'User-Agent Switcher for Chrome',
'Vue.js devtools',
'一键管理',
'广告终结者',
],
'办公': 'Office 365',
'Markdown': 'MacDown',
'音乐': '网易云音乐',
'社交': [
'钉钉',
'微信',
'QQ',
],
'下载': [
'迅雷',
'uTorrent'
],
'梯子': 'ShadowsocksX',
'终端': 'iTerm' + 'OhMyZsh',
'压缩': 'BetterZip',
'效率': [
'SwitchHosts',
'Moom',
'pomodoro Time',
'MindNode',
'Dash' + 'alfred',
'pathfinder',
'奇妙清单',
'xscope',
'SourceTree'
],
'Editor': 'Atom',
'抓包': 'Charles',
'词典': '路欧词典',
'Atom 插件': [
'stylus',
'activate-power-mode',
'atom-beautify',
'atom-jquery-snippets',
'autocomplete-paths',
'docblockr',
'emmet',
'file-header',
'file-icons',
'query-snippets',
'vue-snippets',
'vue-autocomplete',
'todo-show',
'language-vie-component',
],
'切图': [
'马克鳗',
'Photoshop',
'Sketch'
]
}
Read More...