2017-10-16 90 views
0

我在爲我的網站設置服務人員時遇到了一些問題。避免與服務人員緩存start_url

我只想緩存css/js/fonts和一些images/svg,我不想緩存HTML,因爲它全部都是每分鐘更新一次。

它有點作品,但嘗試在我的智能手機上,即使我已經添加它,我仍然收到「添加到主屏幕」的通知。在Chrome Dev應用程序中,我沒有收到添加按鈕。

還與燈塔我收到以下錯誤:

「用戶不會被提示安裝Web應用程序,故障「不與200下線時迴應」:清單START_URL不由服務人員緩存。「

現在我的sw.js就是這樣。正如你所看到的,我評論了fetch部分,因爲它正在緩存HTML並且Cookies也不起作用。

圍繞一個簡單的服務人員「模板」使用嗎?

const PRECACHE = 'app-name'; 
const RUNTIME = 'runtime'; 

// A list of local resources we always want to be cached. 
const PRECACHE_URLS = [ 
'/css/file.css', 
'/js/file.js', 
'/images/logo.png', 
'/fonts/roboto/Roboto-Regular.woff2' 
] 

// The install handler takes care of precaching the resources we always need. 
self.addEventListener('install', event => { 
    event.waitUntil(
    caches.open(PRECACHE) 
     .then(cache => cache.addAll(PRECACHE_URLS)) 
     .then(self.skipWaiting()) 
); 
}); 

// The activate handler takes care of cleaning up old caches. 
self.addEventListener('activate', event => { 
    const currentCaches = [PRECACHE, RUNTIME]; 
    event.waitUntil(
    caches.keys().then(cacheNames => { 
     return cacheNames.filter(cacheName => !currentCaches.includes(cacheName)); 
    }).then(cachesToDelete => { 
     return Promise.all(cachesToDelete.map(cacheToDelete => { 
     return caches.delete(cacheToDelete); 
     })); 
    }).then(() => self.clients.claim()) 
); 
}); 

// The fetch handler serves responses for same-origin resources from a cache. 
// If no response is found, it populates the runtime cache with the response 
// from the network before returning it to the page. 
self.addEventListener('fetch', event => { 
    // Skip cross-origin requests, like those for Google Analytics. 
    // if (event.request.url.startsWith(self.location.origin)) { 
    // event.respondWith(
    //  caches.match(event.request).then(cachedResponse => { 
    //  if (cachedResponse) { 
    //   return cachedResponse; 
    //  } 

    //  return caches.open(RUNTIME).then(cache => { 
    //   return fetch(event.request).then(response => { 
    //   // Put a copy of the response in the runtime cache. 
    //   return cache.put(event.request, response.clone()).then(() => { 
    //    return response; 
    //   }); 
    //   }); 
    //  }); 
    //  }) 
    // ); 
    // } 
});  

回答

0

我不知道爲什麼安裝旗幟出現,而是由燈塔給出的兩個錯誤都涉及到非常START_URL失蹤緩存,propably的index.html。因此,如果你按照你在這裏描述的緩存策略,燈塔總是會告訴你這些。

我建議你可以嘗試工作箱及其運行時緩存。簡而言之,運行時緩存的工作方式如下所示:指定諸如* .svg,* .css等的URL,並且SW在客戶端首次詢問它們時緩存它們。將來,當文件已經被緩存時,SW將它們從緩存提供給客戶端。基本上,你告訴軟件緩存這個和它遇到它們時而不是提前。

運行時緩存很可能伴隨着預緩存(也可以從Workbox發現!)來緩存一堆文件。

看看這裏:https://workboxjs.org

他們有一對夫婦的實例和插件構建工具。