我想在我的网站上添加服务工作者,为我的网站用户提供良好的离线体验.(网站后端是PHP)
我仍然是Javascript承诺和服务工作者的新手,但这是我到目前为止所达到的:
我的index.php页面有这个脚本来注册服务工作者
<script>
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js')};
</script>
Run Code Online (Sandbox Code Playgroud)
对于服务工作者文件,我使用以下代码
var CACHE_STATIC_NAME = 'static-v74';
var CACHE_DYNAMIC_NAME = 'dynamic-v74';
self.addEventListener('install', function (event) {
console.log('Installing Service Worker ...', event);
event.waitUntil(
caches.open(CACHE_STATIC_NAME)
.then(function (cache) {
console.log('Precaching App Shell');
cache.addAll([
'offline.php', // offline page
'assets/bundle.css',
'assets/bundle.js',
'assets/images/logo.jpg',
'assets/images/favicon.ico'
]);
})
)
});
self.addEventListener('activate', function (event) {
console.log('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) { …Run Code Online (Sandbox Code Playgroud) javascript offline-caching promise service-worker progressive-web-apps