caches.open(cacheName).then(cache => {
    cache.add('./index.js')
})

caches.open(cacheName).then(cache => {
    cache.add([
        '/',
        './index.html',
        './js/index.js',
        './css/index.css',
    ])
})

//index.js
//判断是否支持serviceWorker
if('serviceWorker' in navigator){
    //serviceWorker.js后缀为随机戳，方便更新serviceWorker.js
    navigator.serviceWorker.register('./serviceWorker.js', { scope : '/'}).then(function(){
        console.log('service worker注册成功');
    })
}

//serviceWorker.js

var cacheName = 'news-v1',  //唯一的缓存名
    cacheFiles = [          //需要缓存的静态文件地址
        '/',
        './index.html',
        './js/index.js',
        './css/index.css',
        './img/white.jpg'
    ];

    //监听service worker安装事件，在install事件中缓存静态文件
self.addEventListener('install', function(e){
    console.log('install');
    //在安装前执行
    e.waitUntil(
        //存储
        caches.open(cacheName).then(function(cache){
            return cache.addAll(cacheFiles);
        })
    )
})

//serviceworker.js

//监听客户端所有的请求
self.addEventListener('fetch' , function(e){
    e.respondWith(
        caches.match(e.request).then(function(cache){
            //如果缓存中有匹配的请求，返回缓存的静态资源
            return cache || fetch(e.request)
        }).catch(function(err){
            //没有缓存
            console.log('err',err);
            return fetch(e.request)
        })
    )
})

//serviceWorker.js
var fetchCacheName = 'news-api-v1', //唯一的缓存名
    cacheFetchUrls = [      //缓存的api
        '/news?'
    ];

self.addEventListener('fetch' , function(e){
    //判断请求是否需要缓存
    var needCache = cacheFetchUrls.some(function(url){
        return e.request.url.indexOf(url) > 1;
    })
    if(needCache){
        caches.open(fetchCacheName).then(function(cache){
            return fetch(e.request).then(function(response){
                //缓存请求
                if(response.statusText !== 'Not Found'){
                    cache.put(e.request.url,response.clone())
                }
                return response;
            })
        })
    }
})

//index.js
getDataFromCache : function(url){
    if('caches' in window){
        return caches.match(url).then(function(cache){
            if(!cache || cache.responseText == 'Not Found'){
                return;
            }
            //如果缓存中有匹配的请求，返回数据
            return cache.json();
        })
    }else{
        return Promise.resolve();
    }
}

//index.js
queryNews : function(){
    var _this = this,
        newsName = document.querySelector('#input').value;
        url = '/news?q=' + newsName;    //搜索新闻接口
    
    if(newsName === ''){
        alert('请输入想要了解的新闻');
        return;
    }

    var fetchData = _this.fetchNewsApi(url);        //fetch搜索新闻接口
    var cacheData;
    
    //缓存中匹配请求
    _this.getDataFromCache(url).then(function(data){
        //匹配成功
        if(data && data.data &&  data.data.length > 0){
            _this.fillNews(data.data)
        }
        cacheData = data || {};
        return fetchData;
    }).then(function(data){
        //请求成功，重新渲染数据
        if(JSON.stringify(data) !== JSON.stringify(cacheData)){
            _this.fillNews(data.data)
        }
    }).catch(function(err){
        console.log(err);
    }) 
}

//index.js
function askPermission(){
    return new Promise(function(resolve , reject){
        var permissionResult = Notification.requestPermission(function(result){
            //旧版本
            resolve(result);
        })
        if(permissionResult){
            //新版本
            permissionResult.then(resolve , reject);
        }
    }).then(function(permissionResult){
        if(permissionResult !== 'granted'){
            throw new Error('We weren\'t granted permission.');
        }
    })
}

//index.js 
//在使用之前还需判断是否支持PushManager
if('serviceWorker' in navigator && 'PushManager' in window){
    navigator.serviceWorker.register('./serviceWorker.js').then(function(registration){
        return Promise.all([
            registration,
            askPermission()
        ])
    }).then(function(result){
        ...
    })
}

//index.js 
function subscribeUserToPush(registration , publicKey){
    var subscribeOptions = {
        userVisibleOnly : true,
        applicationServerKey : window.urlBase64ToUint8Array(publicKey)
    };
    return registration.pushManager.subscribe(subscribeOptions).then(function(pushSubscription){
        console.log('pushscription' ,pushSubscription)
        return pushSubscription;
    })
}

//index.js
if('serviceWorker' in navigator && 'PushManager' in window){
    //公钥
    var publicKey = 'BBP3Ni05GCu_RTb7rAkOqfFPiDQkNhcAfOAhqxpaxmuKLhF3DYTldbl3vrmfTfHSHhCBXPgKhQXexEmDLLqV1sQ';
    
    navigator.serviceWorker.register('./serviceWorker.js').then(function(registration){
        return Promise.all([
            registration,
            askPermission()
        ])
    }).then(function(result){
        var registration = result[0];

        return subscribeUserToPush(registration,publicKey)
    })

//index.js
//将PushSubscription发送至服务器
function sendSubscriptionToServer(body){
    var url = '/subscription';
    return new Promise(function(resolve , reject){
        var xhr = new XMLHttpRequest();
        xhr.timeout = 7000;
        xhr.onreadystatechange = function(){
            var response = {};
            if(xhr.readyState == 4 && xhr.status == 200){
                try{
                    response = JSON.parse(xhr.responseText);
                }catch(e){
                    response = xhr.responseText
                }
                resolve(response)
            }else if(xhr.readyState == 4){
                resolve();
            }
        }
        xhr.onabort = reject;
        xhr.onerror = reject;
        xhr.ontimeout = reject;
        xhr.open('POST' , url , true);
        xhr.setRequestHeader('Content-Type' , 'application/json');
        xhr.send(body)
    })
}

if('serviceWorker' in navigator && 'PushManager' in window){
    ...

    navigator.serviceWorker.register('./serviceWorker.js').then(function(registration){
        ...
    }).then(function(result){
        ...
    }).then(function(subscription){
        var body = {subscription : subscription};

        body.uniqueid = new Date().getTime();   //为方便服务器推送消息至指定的客户端
        console.log('uniqueid' , body.uniqueid);

        return sendSubscriptionToServer(JSON.stringify(body));
    }).then(function(res){
        console.log(res)
    }).catch(function(e){
        console.log(e)
    })

//app.js
var webpush = require('web-push');

//app.js

//先前生成的公钥和私钥
var vapidKeys = {
    privateKey:"9mHKxhF60T4iApR4f4dDKtdXL8PK5dj3TfDBAK8iufI",
    publicKey:"BBP3Ni05GCu_RTb7rAkOqfFPiDQkNhcAfOAhqxpaxmuKLhF3DYTldbl3vrmfTfHSHhCBXPgKhQXexEmDLLqV1sQ"
}

webpush.setVapidDetails(
    'mailto:563282341@qq.com',
    vapidKeys.publicKey,
    vapidKeys.privateKey
)

//app.js
function pushMessage(subscription , data = {}){
    webpush.sendNotification(subscription , data , options).then(data => {
        console.log('push service的相应数据' , JSON.stringify(data));
        return;
    }).catch(err => {
        //410和404表示subscription过期不再有效
        if(err.statusCode === 410 || err.statusCode === 404){
            console.log(err);
            return util.remove(subscription)
        }else{
            console.log(subscription);
            console.log(err);
        }
    })
}

//serviceWorker.js
self.addEventListener('push' , function(e){
    var data = e.data;
    if(data){
        self.registration.showNotification(data);
    }else{
        console.log('push没有任何数据')
    }
})

 var options = {
    body : '邀请你一起学习，邀请你一起学习邀请你一起学习',     
    icon : '/img/icon_128.png', 
    actions : [{
        action : 'show-jd',
        title : '去京东'
    },{
        action : 'contact-me',
        title : '联系我'
    }],
    tag : 'pwa-starter',
    renotify : true
};

//serviceWorker.js

self.addEventListener('push' , function(e){
    var data = e.data;
    if(e.data){
        data = data.json();
        console.log('push的数据为：',data);
        var title = data;
        var options = {
            body : '邀请你一起学习',
            icon : '/img/icon_128.png',
            actions : [{
                action : 'show-jd',
                title : '去京东'
            },{
                action : 'contact-me',
                title : '联系我'
            }],
            tag : 'pwa-starter',
            renotify : true
        };
        self.registration.showNotification(title,options);
    }else{
        console.log('push没有任何数据')
    }
})

//serviceworker.js
self.addEventListener('notificationclick' , function(e){
    var action = e.action;
    console.log(`action tag:${e.notification.tag}`,`action:${action}`,e);
    switch(action){
        case 'show-jd' : 
            console.log('show-jd');
            break;
        case 'contact-me' :
            console.log('contact-me');
            break;
        default :
            console.log(`未处理的action：${e.action}`);
            action = 'default';
            break;
    }
    e.notification.close(); //关闭通知栏
})

//serviceworker.js

self.addEventListener('notificationclick' , function(e){
    var action = e.action;
    ...
    e.waitUntil(
        self.clients.matchAll().then(function(clients){
            clients.forEach(function(client){
                client.postMessage(action);    //向客户端发送用户点击的`action`。
            })
        })
    )

    e.notification.close();
})

//index.js
navigator.serviceWorker.addEventListener('message', function(e){
    var action = e.data;
    console.log(`用户点击的action是：${e.data}`);
    switch(action){
        case 'show-jd' :
            location.href = 'https://www.jd.com';
            break;
        case 'contact-me' :
            location.href = 'mailto:563282341@qq.com';
            break;
        default :   //点击除show-jd和contact-me区域，显示页面提示
            document.querySelector('.tips').style.display = 'block';
            break;
    }
})

self.addEventListener('notificationclick' , function(e){
    var action = e.action;
    ...
    
    e.waitUntil(
        self.clients.matchAll().then(function(clients){
            if(!clients || clients.length == 0){
                //打开标签页
                self.clients.openWindow && self.clients.openWindow('http://127.0.0.1:3034');
                return;
            }
            //切换到指定客户端页
            clients[0].focus && clients[0].focus();
            ...
        })
    )

    e.notification.close();
})

self.addEventListener('sync' , function(e){
    console.log(e)
})

//index.js
if('serviceWorker' in navigator && 'SyncManager' in window){
    //在service worker激活成功后进行
    navigator.serviceWorker.ready.then(function(registration){
        var tag = "sample_sync";
        document.querySelector('.J_sync').addEventListener('click' , function(){
            console.log('同步后台',registration.sync)

            registration.sync.register(tag).then(function(){
                console.log('同步后台已触发',tag);
            }).catch(function(err){
                console.log('后台同步出发失败',err);
            })
        })
    })
}

//serviceworker.js
self.addEventListener('sync' , function(e){
    var init = {
        method : 'GET'
    };

    if(e.tag === 'sample_sync'){
        var request = new Request(`/sync?name=xxx` , init);
        
        e.waitUntil(
            fetch(request).then(function(response){
                return response;
            })
        )
    }    
})

//index.js
navigator.serviceWorker.ready.then(function(registration){
        var tag = 'sample_sync_event';
        
        document.querySelector('.J_sync_event').addEventListener('click', function(e){
            registration.sync.register(tag).then(function(){
                console.log(`后台同步已触发：${tag}`);

                var inputValue = document.querySelector('#input').value;
                var msg = JSON.stringify({ type : 'bgsync' , msg : {name : inputValue}});
                navigator.serviceWorker.controller.postMessage(msg);
            }).catch(function(err){
                console.log(`后台同步触发失败：${err}`)
            })
            
        })
    })

//serviceworker.jd
class DealData{
    constructor(){
        this.tagDatas = {};
    }
    //存储tag和回调函数
    once(tag , callback){
        this.tagDatas[tag] || (this.tagDatas[tag] = []);
        this.tagDatas[tag].push(callback);
    }
    
    //收到数据后，执行回调函数
    trigger(tag , data){
        this.tagDatas[tag] = this.tagDatas[tag] || [];
        let tagCallback ;
        while(tagCallback = this.tagDatas[tag].shift()){
            tagCallback(data)
        }
    }
}
const dealData = new DealData();

//serviceworker.js
self.addEventListener('message' , function(e){
    var data = JSON.parse(e.data),
        type = data.type,
        msg = data.msg;

    console.log(`service worker收到消息 type: ${type} ; msg : ${JSON.stringify(msg)}`)

    dealData.trigger(type , msg);
})

//serviceworker.js
self.addEventListener('sync' , function(e){
    var init = {
        method : 'GET'
    };

    if(e.tag === 'sample_sync'){
        ...
    }else if(e.tag === 'sample_sync_event'){
        let msgPromise = new Promise(function(resolve , reject){
            dealData.once('bgsync' , function(data){
                resolve(data)
            });
            setTimeout(resolve , 5000);
        })

        e.waitUntil(
            msgPromise.then(function(data){
                var name = data && data.name ? data.name : 'anonymous';
                var request = new Request(`sync?name=${name}` , init);
                return fetch(request)
            }).then(function(response){
                return response;
            })
        )
    }
})