?

附一個示例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）

轉載于:https://www.cnblogs.com/xiaozhumaopao/p/10989343.html

總結

以上是生活随笔為你收集整理的PWA的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。