小编Ram*_*med的帖子

服务工作者 - 首先通过网络缓存并回退到静态页面

我想在我的网站上添加服务工作者,为我的网站用户提供良好的离线体验.(网站后端是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

4
推荐指数
1
解决办法
3374
查看次数