2017-08-28 51 views
0

我試圖用javascript創建離線網頁服務工作者。 在我的情況下有我的網址:www.xxx.xx/home。 如果我打電話給像www.xxx.xx/index.php這樣的頁面,我可以將index.php放入脫機緩存中,並且它可以脫機使用。 但/ home(內部路由到index.php mod_rewrite/apache2.4)被存儲爲密鑰,但離線後iam不可用。離線網站重定向uri作爲根頁面

var CACHE_NAME = 'cache-v1'; 
var urlsToCache = ['/', '/home', '/index.php']; 
self.addEventListener('install', function(event) { 
    // Perform install steps 
    console.log("Install Cache"); 
    event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) { 
     console.log(urlsToCache.length + " files installed successfully"); 
     return cache.addAll(urlsToCache); 
    }) 
); 
}); 

像這樣的東西,index.php可以叫脫機但不是xxx.xx/home。 它應該如何緩存重定向/重寫的uri?

是這樣的:

this.addEventListener('activate', function(event) { 
    event.waitUntil(
     caches.open(CACHE_NAME).then(function(cache) { 
      cache.keys().then(function(keys) { 
       keys.forEach(function(request, index, array) { 
        console.log(index + " Url: " + request.url + " follow: " + request.redirect + " mode: " + request.cache); 
       }); 
      }); 
     }) 
    ); 
}); 

導致

serviceworker.js:37 0 URL:--httpsurl - /如下:遵循模式:未定義

serviceworker.js:37 1網址:--httpsurl -/home關注:follow模式:undefined

serviceworker.js:37 2 Url:--httpsurl -/index.php後續操作:follow mode:undefined

在Chrome和Firefox中測試(最新版本)

+0

拼寫並刪除問候和謝謝。 – Jolta

+0

你能列出緩存鍵嗎?要查看他們是否沒有得到存儲,或者如果存儲的值不正確... – Salketer

+0

我已經添加了它。根網址現在可用,不知道爲什麼。重定向的網址處於離線狀態。 – Enchanter

回答

0

看來cache.addAll只緩存請求正文而不是遞送的內容。 它似乎與cache.put一起作爲提取事件偵聽器中的後備工作。 但第二個問題出現:Firefox說「從德語翻譯」,「損壞的內容,違反了網絡協議」。

self.addEventListener('fetch', function(event) { 
    event.respondWith(
    caches.match(event.request).then(function(response) { 
     // Cache hit - return response 
     if(response) { 
      console.log("Found " + event.request + " in cache"); 
      return response; 
     } else { 
     console.log("Do not found " + event.request + " in cache"); 
    } 

    console.log("Fetch Url: " + event.request.url + " follow: " + event.request.redirect + " mode: " + event.request.cache); 
    if(event.request.headers.get('Accept').indexOf('text/html') !== -1 || event.request.headers.get('Accept').indexOf('css') !== -1 || event.request.headers.get('Accept').indexOf('javascript') !== -1) { 
     return fetch(event.request).then(function(response) { 
      let copy = response.clone(); 
      event.waitUntil(
       caches.open(CACHE_NAME).then(function(cache) { cache.put(event.request.url, copy); }) 
      ); 
      return response || caches.match('/offline'); 
     }).catch(function(error) { 
      console.log(error); 
     }); 
    } else { 
     console.log(event.request.headers.get('Accept')); 
     return fetch(event.request); 
    } 
    })); 
}); 

如果您從靜態chache中刪除'/ home',它會在chrome中工作。 但要小心:如果serviceworker激活處於/ home狀態,則必須出現第二次單擊才能調用獲取事件。

+0

而另一個問題是,cacheAddAll不會發送餅乾! – Enchanter