我正在努力使一名简单的服务人员脱机工作。我尝试了很多例子,但没有成功。首先,我认为这是因为我正在使用基于动态php的网站,或者可能是我的服务器或htaccess。对我来说是个谜。提取index.html时,所有内容都可以在我的本地主机上运行,但是在服务器上,即使分析chrome devtools的“网络”标签时其他所有内容都已加载,该页面也无法离线加载。
因此,我试图在服务器上制作此简单的html脱机PWA,并在另一台服务器上创建相同的源。
https://sw.punchunique.com
https://punchunique.neocities.org/test.html或
https://punchunique.neocities.org/
也许是因为我没有fallback.html,但是如果已经将它加载到缓存中,为什么还要一个
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('mysite-static-v3').then(function(cache) {
return cache.addAll([
'index.html',
'punch-fixed.css',
'general.css',
'punch-homepage.css',
'thesansextralight_plain-webfont.woff',
'thesansextralight_plain-webfont.woff2',
'TweenMax.min.js',
'PLUGINS.js',
'punch.webmanifest',
'sw-demo.js',
'favicon.ico',
'favicon-16x16.png',
'favicon-32x32.png',
'favicon-194x194.png',
'apple-touch-icon.png',
'apple-touch-icon-72x72.png',
'apple-touch-icon-120x120.png',
'apple-touch-icon-144x144.png',
'apple-touch-icon-152x152.png',
'android-chrome-96x96.png',
'android-chrome-192x192.png',
'android-chrome-512x512.png',
'mstile-48x48.png',
'mstile-144x144.png',
'mstile-270x270.png',
'mstile-558x558.png',
'mstile-558x270.png',
'bcg-img-sect1.jpg',
'green-hook.png',
]);
})
);
});
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
self.addEventListener('fetch', function(event) {
// Cache only
// If a match isn't found in the cache, the response
// will look like a connection error
// event.respondWith(caches.match(event.request));
// Network only
// event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behaviour
// CACHE then NETWORK
event.respondWith(
caches.open('mysite-dynamic').then(function(cache) {
return cache.match(event.request).then(function (response) {
return response || fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
离线时我有这个
提取脚本时发生未知错误。和
Uncaught (in promise) TypeError: Failed to fetch
,但是所有缓存文件都在服务器上,并且没有丢失。
答案 0 :(得分:0)
这是具有静态和动态缓存的服务工作者的完美工作示例
var CACHE_STATIC_NAME = 'static-v4';
var CACHE_DYNAMIC_NAME = 'dynamic-v2';
self.addEventListener('install', function(event) {
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
caches.open(CACHE_STATIC_NAME)
.then(function(cache) {
console.log('[Service Worker] Precaching App Shell');
cache.addAll([
'/',
'/index.html',
'/src/js/app.js',
'/src/js/feed.js',
'/src/js/promise.js',
'/src/js/fetch.js',
'/src/js/material.min.js',
'/src/css/app.css',
'/src/css/feed.css',
'/src/images/main-image.jpg',
'https://fonts.googleapis.com/css?family=Roboto:400,700',
'https://fonts.googleapis.com/icon?family=Material+Icons',
'https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css'
]);
})
)
});
self.addEventListener('activate', function(event) {
console.log('[Service Worker] Activating Service Worker ....', event);
event.waitUntil(
caches.keys()
.then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
console.log('[Service Worker] Removing old cache.', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
} else {
return fetch(event.request)
.then(function(res) {
return caches.open(CACHE_DYNAMIC_NAME)
.then(function(cache) {
cache.put(event.request.url, res.clone());
return res;
})
})
.catch(function(err) {
});
}
})
);
});
答案 1 :(得分:0)
在获取事件中,将match()函数与{ignoreVary:true}作为第二个参数一起使用
<div dangerouslySetInnerHTML={{__html: foo}}> ...
它的作用是避免匹配请求的标头。由于标头匹配,您的应用程序将在localhost上运行,而不在实时环境中运行。