分类：前端技术

记得最初开发chrome插件大概是三年前,在恒腾的时候，需求基本上都是各种react+antd的后台表单，类似这样的

后来写多了，感觉重复枯燥，于是想根据后端的接口文档，分享并且映射出对应的jsx代码，于是就有了这个

chrome代码生成插件，主要是方便抓取页面元素而已，其实puppeteer也可以实现，感觉做起来比较麻烦而已。于是对chrome插件开发也比较熟悉。

最近入职BIGO公司，发现这边的发布特别繁杂，可以用Chrome写一个按键精灵插件实现，代替人工点击。

一开始，本来想着写死一个发脚本逻辑，只用来做发布用的。后来想法越来越多，变成一个通用的按键精灵了。目前为止我已经写了大概 7，8个脚本了 如下：

遇到几个难点：

1.设计思路
1. 面向对象：前端开发者  插件的实现本质上就是js操作DOM，这些操作逻辑都需要前端人员开发的，但是使用脚本就不需要。
2. 网页的脚本通常都需要跨页面进行的，所以跨页面通讯很重要。
3. 项目可能越来越多，需要做到多项目切换维护。

2.脚本注入

        依赖 API：chrome.tabs.executeScript，允许注入字符串，也允许注入js文件

        由于页面有可能会刷新，所以注入的时机用这个API判断：
chrome.webNavigation.onCompleted 检测到页面加载完成，则注入对应的脚步。

      由于脚步有可能运行在setTimeout上，注意使用闭包函数实现代码隔离。

3.编辑器

     由于浏览器默认的texture非常难用，主要体现在无法使用tab键，不会自动换行格式化。直接在上面编写代码是在难受，于是网上找了一下相关的代码编辑器，比如 jsrun，jsFiddle，jsBin等等，都不十分完美，只要是无法嵌入到chrome脚本的页面中。

于是只能找那种有源码安装的，终于被我找到了：Ace 代码编辑器（https://ace.c9.io/） 非常辛苦的兼容到chrome插件里了

看着这个chrome 插件的脚步逐步增多，能提高团队成员的开发效率，感觉还是很棒棒的。
由于部分涉及公司业务 代码暂时不开源

1. 创建主屏幕入口

<link rel="manifest" href="manifest.json" />

manifest.json文件大概是这样的

{
  "name": "微博Lite",
  "short_name": "微s博",
  "description": "随时随地分享新鲜事",
  "icons": [{
      "src": "https://luoyongjie.cn/lab/pwa/icon/weibologo.png",
      "sizes": "606x606",
      "type": "image/png"
    }],
  "start_url": "/static/pwa/",
  "scope": "/static/pwa/",
  "display": "browser",
  "orientation": "portrait",
  "background_color": "#F3F3F3",
  "theme_color": "#F3F3F3",
  "related_applications": [],
  "prefer_related_applications": false
}

 

这里我是抄m.weibo.com/beta的manifest.json

内容太多，不一一称述，无非就是设置logo图片，访问地址，app打开的屏幕，是否显示导航栏，就像一个HirdApp一样

这里说一下关键问题

1. 设置主入口的交互是如何的？

点击添加之后就会在桌面出现icon入口了

感觉这样的交互，用户几乎不会这样做，太鸡肋了，那么有没有可以用js控制提醒用户是否需要添加到主屏幕的方式呢？没有。。。。。

于是我带着怀疑的态度，尝试了

chrome IOS版本 居然没有开放这个操作

chrome Android版 操作有了，确认添加到主屏幕了，但是屏幕就是找不到icon入口

2.server worker 离线缓存

入口文件处载入如下代码：

<script>
function registerServiceWorker(){
    return navigator.serviceWorker.register('./sw.js').then(registration => {
        alert('注册成功');
        return registration;
    })
    .catch(err => {
        alert('注册失败', err);
    });
}
window.onload = function () {
    if (!('serviceWorker' in navigator)) {
        return;
    }
    registerServiceWorker()
}
</script>

const CURCACHE = 'CURCACHE_test_1'
const RUNTIME = 'runtime';
var CURCACHE_URLS = [
  '/lab/pwa/index.html',
  '/lab/pwa/main.css'
];
self.addEventListener('install',e=>{
    e.waitUntil(
      //存储缓存路径对应的资源
        caches.open(CURCACHE).then(cache=>{
            cache.addAll(CURCACHE_URLS)
        }).then(
            self.skipWaiting()
        )
    )
})
 
 
   
  //代理请求，使用缓存，请求发送之前
  self.addEventListener('fetch', e => {
    e.respondWith(
      //缓存是否匹配 
      caches.match(e.request).then(function(response) {
        if (response != null) {
          //命中缓存返回缓存，结束请求
          return response
        }
        //未命中缓存，正常请求
        return fetch(e.request.url)
      })
    )
  });

 

只要caches设置了缓存，就能在离线状态下访问页面，同时可以在sw中控制缓存哪些内容。

sw.js文件每次都会请求服务器获取最新的server worker文件

注意：如果浏览器本身对sw.js进行缓存的话，也不会得到最新代码，所有代码会变成死代码，无法更新。所以对sw文件最好配置成cache-control: no-cache。

经过测试，ios safair，chrome 都支持，但是微信页面不支持 navigator.serviceWorker == undefined,估计是微信为了推广小程序，故意封掉的

3.消息推送

https://firebase.google.com/docs/web/setup

按照这里的教程可以利用firebase的安装包，可以做出一个消息推送的demo。不过必需要翻墙。

实际体验如下：

需要在服务器环境模拟一个请求到google的推送服务器

比如

curl -X POST -H "Authorization: key=YOUR-SERVER-KEY" -H "Content-Type: application/json" -d '{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:8081"
  },
  "to": "YOUR-IID-TOKEN"
}' "https://fcm.googleapis.com/fcm/send"

然后在安装好firebaseSDK的页面上打开

电脑端：焦点在当前窗口的话，会即使调用当前页面的js messaging.onMessage 方法收到msg

            如果焦点不在当前窗口，则启动ServerWorker后台的self.registration.showNotification

        

        浏览器就会在系统层发出一个消息通知。

        如果断网的情况下，等到网络恢复，这个消息会自动弹出来

手机端：ios的 微信，safair，chrome 完全不兼容

            android的chrome 比较乐观

            

           可是只是收到几次，突然就不行了，不知道是不是系统做了限制，卸载再安装又可以收到几次。

            如果把chrome进程杀掉，也是收不到推送的，这一点挺坑的。

          如果要关注兼容问题，可随时关注 

            https://caniuse.com/#search=Push%20API 和

            https://caniuse.com/#search=Notifications 这个API的兼容情况

小结：

注意以上所有环境都需要在https或localhost或127.0.0.1进行，因为server worker规定了只能在这些调节下才能开启。如果是用手机做测试，那你必需拥有一个https的站点才能测试，这一点非常坑，于是我把站点升级成https了。

实际情况：PWA最重要的一点是离线缓存，（首屏入口和消息推送用的场景不是刚需）提高用户首屏加载体验，可是这么关键的一点，居然被微信封杀了，在中国h5的流量几乎都在微信，场景限制非常大。如果某个h5不是在wx推广的，我觉得pwa离线缓存是提高用户体验的利器。

第一部分

第一章

1、

var a;

a; // undefined

b; // ReferenceError: b is not defined

undefined 和 is not defined 是两回事

2.

// 这样会抛出错误

if(DEBUG) {

    console.log( "Debugger is starting" )

}

//这样是安全的

if (typeof DEBUG !== "undefined") {

    console.log( "Debugging is starting" )

}

第二章

1.

var b = 42.;  //42.这样的写法没问题，只是不常见，但从代码的可读性考虑，不建议这样写。

42.toFixed(3) 是无效语法，因为 . 被视为常量42.的一部分 ， 42..toFixed(3) 则没问题

2.

Object.is() 主要是用来处理那些特殊的相等比较 

Object.is(NaN, NaN) //true

Object.is(0, -0) //true

3.

对包含循环引用的对象执行JSON.stringify(..) 会出错

第4章

1.

以下这些是假值：

undefined

null

false

+0, -0 和NaN

""

假值的布尔强制类型转换结果为false

理论上 假值列表以外的都应该是真值。  

2.

使用 Date.now() 来获取当前时间戳，比new Date().getTime() 简单

3.

 ~x 大致等于 -(x+1) 

~42; // -(42+1) ==> -43

4.

var a = "Hello World";

if(a.indexOf("ol") == -1){

    //没有匹配

}

这里是指用-1作为失败时的返回值，这些细节应该被屏蔽。

var a= "Hello World";

~a.indexOf("lo"); // -4 真值

if (~a.indexOf("of")) {  //true

    //找到匹配

}

~a.indexOf("ol"); //  0 <–假值

!~a.indexOf("ol"); // true

if(!~a.indexOf("ol")){ //true

    //没有匹配！

}  

5.

~~49.6

~~x 能对小数进行截取，取代Math.floor(xxx)，但需要注意负数的情况

~~-49.6 // -49,    ~~中的第一个~执行ToInt32并反转字位，然后第二个~再进行一次字位反转，即将所有字位反转回原值，最后得到仍然是ToInt32的结果

Math.floor( -49.6 ) //-50

6.

[] + {} //[Object object]   "" + [Object object] 

{} + [] //0     {}被当作一个独立的空代码快，不执行任何操作。  代码块结尾不需要分号， 最后+[] 将［］显示强制类型转换

7.

true || false && false;  //true
(true || false) && false;  //false 
true || (false && false);  //true

这说明&&运算符优先于||执行

8.

function foo( a = 42, b = a+1) {
    console.log(
        arguments.length, a, b,
        arguments[0], arguments[1]
    )
}
foo();                             //0 42 43 undefined undefined
foo( 10 );                       //1 10 11 10 undefined
foo( 10, undefined );    //2 10 11 10 undefined
foo( 10, null );              //2 10 null 10 null

在ES6中,虽然参数a和b都有默认值，但是函数不带参数时，arguments数组为空.

如果向函数传递undefined值，则arguments数组中会出现一个值为undefined的单元

9.

<script>foo();</script>

<script>

    function foo() { .. }

</script>

报错，不会进行变量提升

10.

在调试的过程中，有可能对象在console.log(…)语句之后被修改，看到了意料之外的结果，要意识到 这可能是I/O的异步造成的，可以用JSON.stringify()快照一次

第四章

1.Promise中，多次调用reject或resovles,只有第一次有效

new Promise((resovles, reject)=>{
        //something
        resovies(); //只有第一次有效
        resovies(); //无效
})

12.Promise中,只能返回第一个参数

new Promise((resovles, reject)=>{
        //something
        resovies(a, b, c); //只返回a
})

13. 如果Promies中发生错误，则不往下执行，而是返回一个promise，包含错误信息

var p = new Promise(()=>{xxxx});
var p2 = p.then(()=>{
    make some error code
    //不会报错，也不会运行到下一行
    some code
},()=>{
    //不会执行到这里
})
p2.then((e)=>{
    console.log(e) //e就算错误信息
})

14. Promise的局限性有6个

    1.Promise链中的错误信息很容易被无意中默默忽略掉

    2.只接受单一值返回

    3.单决议 // 就是 resolve或rejuect只能运行一次

    4.惯性 //就是通常要封装request之类的

    5.无法被取消

    6.性能稍微低一点点

15. 

function *something(){
    while(true){
        console.log(xxxx)    
    }
    finally{
        console.log("cleaning up!")
    }
} 
var it = something();
for(var v of it) {
    console.log(v);
    if(v > 500){
        it.return("end").value;
    }
}

调用it.return(…)之后，它会立即终止生成器，运行finall语句

16.

function *foo(){
    console.log( "*foo() starting" );
    yield 3;
    yield 4;
    console.log( "*foo() finished");
}
function *bar() {
    yield 1;
    yield 2;
    yield *foo(); // yield委托
    yield 5;
}
var it = bar();
it.next().value;   //1
it.next().value;   //2
it.next().value;   //*foo() starting   注意观察这里，＊bar() 把自己的迭代控制委托给了*foo()
                      //3
it.next().value;   //4
it.next().value;   //*foo() finished
                   // 5

第五章

1.尾调用优化

function bar(y){
    return foo( y + 1);  //尾调用
}
function baz(){
    return 1 + bar( 40 );  //非尾调用
}