Question

我尝试使用javascript serviceworkers 构建离线网页。在我的情况下有我的网址：www.xxx.xx / home。如果我调用像www.xxx.xx / index.php这样的页面，我可以将index.php放入离线缓存中，并且它可以脱机使用。但/ home（内部路由到index.php与mod_rewrite / apache2.4）存储为密钥，但在iam离线后它不可用。

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 - / follow：follow mode：undefined

serviceworker.js：37 1网址：--httpsurl - / home follow：关注模式：undefined

serviceworker.js：37 2 Url：--httpsurl - / index.php follow：follow mode：undefined

在Chrome和Firefox（最新版本）中测试

Answer 1

似乎cache.addAll仅缓存请求正文而不缓存已传递的内容。它似乎与cache.put一起用作fetch事件监听器中的回退。但是出现了第二个问题：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上，则必须出现第二次单击才能调用fetch事件。

脱机网站将uri重定向为rootpage

1 个答案: