PWA

 

附一個示例e6書寫 todolist的示例，切換list的狀態：

//todolist示例
const toggleTodo = (id)=>{
    setTodos(todos => todos.map((todo)=>{
        return todo.id === id
            ? {
                ...todo,
                complete:!todo.complete,
            }
            :todo;
    }))
}

 =======================華麗的分割線！

能夠參考文章：移動PWA初探
首先安裝http服務：

npm install server -g

而後執行 server

navigator.serviceWorker.register('./sw.js',{scope:'/'}).   //scope表明這個腳本能夠控制的頁面的相對路徑，默認就是腳本自己所在的路徑
then(registration => {  
    console.log(registration);
},error=>{
    console.error(error);
}) 

打開控制檯

 self 表示全局做用域對象，生命週期有三個：

self.addEventListener('install',event=>{ //只要sw.js有一點不一樣，就會從新執行這裏
    console.log('install',event);
    event.waitUntil(new Promise(resolve=>{
        setTimeout(resolve,5000)
    })); //這個函數傳入一個promise，執行完畢以後才表示install執行完畢，而後執行 activate
    //
    event.waitUntil(self.skipWaiting())    
    /*
        根據 Service Worker 生命週期的特性，若是瀏覽器還在使用舊的 Service Worker 版本，即便有 Service Worker 新的版本也不會當即被瀏覽器激活，只能進行安裝並進入等待狀態，直到瀏覽器 Tab 標籤被從新關閉打開。
        在開發調試 Service Worker 時確定但願從新加載後當即激活，咱們不但願每次都從新打開當前頁面調試，爲此咱們能夠在 install 事件發生時經過 skipWaiting() 來設置 skip waiting 標記。 這樣每次 Service Worker 安裝後就會被當即激活。
    */
}) 
self.addEventListener('activate',event=>{
    console.log('activate',event);
})   
self.addEventListener('fetch',event=>{ //項目有外部請求，好比引入css文件，就會觸發
    console.log('fetch',event);
})

緩存資源的寫入和讀取：

const CACHE_NAME = 'cache-v1';

self.addEventListener('install',event=>{ 
    console.log('install',event);
    event.waitUntil(caches.open(CACHE_NAME).then(cache =>{
        cache.addAll([
            '/',
            './index.css'
        ])
    }))    
}) 
self.addEventListener('activate',event=>{
    console.log('activate',event);
    event.waitUntil(self.clients.claim());
})   
self.addEventListener('fetch',event=>{
    console.log('fetch',event);
    event.respondWidth(caches.open(CACHE_NAME).then(cache => {
        return cache.match(event.request).then(response => {
            if(response){//若是 response 存在 說明命中了緩存
                return response;
            }
            //若是沒有命中 則保存緩存
            return fetch(event.request).then(response=>{
                cache.put(event.request,response.clone());
                // 對應着 cache.put(key,value) 因爲response是流式的 因此要加以緩存
                return response;
            })
        })
    }))
})

清理由於名字改變後的緩存：

self.addEventListener('activate',event=>{
    console.log('activate',event);
    //每次跟新緩存名字以後，都要清理以前的緩存，在fetch以前進行清理
    event.waitUntil(caches.keys().then(cacheNames=>{ //cacahe.key()獲得全部緩存的名字
        return Promise.all(cacheNames.map(cacheName => {
            if(cacheName !== CACHE_NAME){
                return caches.delete(cacheName)
            }
        }))
    }));
}) 

 

 如今是有兩個的緩存，若是執行 激活狀態下的 清理緩存 步驟以後，這裏的緩存會變少。

 

Notification API （通知API）