Web前端性能优化（三）

if(window.localStorage) {
    localStorage.setItem('name', 'Niangao')
}

// 利用 LocalStorage 缓存 JS 文件

var testContent = localStorage.getItem('test')
if(testContent) {
    eval(testContent)
}else {
    var xmlhttprequest = new XMLHttpRequest();
    xmlhttprequest.onreadystatechange = callback;
    xmlhttprequest.onprogress = progressCallback;
    xmlhttprequest.open("GET", "./test.js", true);
    xmlhttprequest.send();

    function callback() {
        if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
            var responseText = xmlhttprequest.responseText;
            eval(responseText)
            localStorage.setItem('test', responseText)
        }else {
            console.log("Request was unsuccessful: " + xmlhttprequest.status)
        }
    }

    function progressCallback(e) {
        e = e || event;
        if(e.lengthComputable) {
            console.log("Received " + e.loaded + " of " + e.total)
        }
    }
}

function openDB(name, callback) {
    // 建立打开indexdb
    var request = window.indexedDB.open(name)
    // 请求失败
    request.onerror = function(e) {
        console.log('open indexdb error')
    }
    // 请求成功
    request.onsuccess = function(e) {
        myDB.db = e.target.result
        callback && callback()
    }
    // 请求数据库版本变化
    request.onupgradeneeded = function() {
        var store = request.result.createObjectStore('books', {
            keyPath: 'isbn'
        })
        var titleIndex = store.createIndex('by_title', 'title', {
            unique: true
        })
        var authorIndex = store.createIndex('by_author', 'author')
        
        store.put({
            title: 'Quarry Memories',
            author: 'Fred',
            isbn: 123456
        })
        store.put({
            title: 'Water Buffaloes',
            author: 'Fred',
            isbn: 234567
        })
        store.put({
            title: 'Bedrock Nights',
            author: 'Barney',
            isbn: 345678
        })
    }
}
var myDB = {
    name: 'testDB',
    version: '1',
    db: null
}

function addDate(db, storeName) {
    var transaction = db.transaction('books', 'readwrite')
    var store = transaction.objectStore('books')
    // 获取当前indexdb中的数据
    // var request = store.get(234567)
    // request.onsuccess = function(e) {
    //     console.log(e.target.result)
    // }

    // 添加信息到indexdb中
    // store.add({
    //     title: 'Flowers',
    //     author: 'Quan',
    //     isbn: 222
    // })

    // 删除
    // store.delete(222)

    // 获取&更新
    store.get(222).onsuccess = function(e) {
        books = e.target.result
        console.log(books)
        books.author = 'James'
        var request = store.put(books)
        request.onsuccess = function(e) {
            console.log('update success')
        }
    }
}

openDB(myDB.name, function() {
    // 关闭indexdb
    // myDB.db.close()
    // 删除indexdb
    // window.indexedDB.deleteDatabase(myDB.db)
})

setTimeout(function() {
    addDate(myDB.db)
}, 2000)

// service-worker.js

self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open('app-v1')
            .then(function(cache) {
                console.log('open cache')
                return cache.addAll([
                    './app.js',
                    './main.css',
                    './serviceWorker.html'
                ])
            })
    )
})

self.addEventListener('fetch', function(event) {
    event.respondCith(
        caches.match(event.request).then(function(res) {
            if(res) {
                return res
            }else {
                // 通过fetch方法向网络发起请求
                fetch(url).then(function(res) {
                    if(res) {
                        // 对于新请求到资源存储到我们的cachestorage中
                        caches
                    }else {
                        // 用户提示
                    }
                })
            }
        })
    )
})

// app.js

if(navigator.serviceWorker) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './'})
            .then(function(reg) {
                console.log(reg)
            })
            .catch(function(e) {
                console.log(e)
            })
}else {
    alert('Service Worker is not supported')
}