Service Worker：离线应用与后台同步的解决方案

if ('serviceWorker' in navigator) {  navigator.serviceWorker.register('./sw.js')  .then(function(registration) {    console.log("Service Worker Registered", registration);  })  .catch(function(err) {    console.log("Service Worker Failed to Register", err);  })}

navigator.serviceWorker.register('./sw.js').then(function(registration) {  if (registration.installing) {    // Service Worker is Installing  }})

self.addEventListener('install', function(event) {  event.waitUntil(    caches.open(currentCacheName).then(function(cache) {      return cache.addAll(arrayOfFilesToCache);    })  );});

self.addEventListener('install', function(event) {  event.waitUntil(   return Promise.reject(); // Failure  );});

navigator.serviceWorker.register('./sw.js').then(function(registration) {  if (registration.waiting) {    // Service Worker is Waiting  }})

self.addEventListener('activate', function(event) {  event.waitUntil(    // Get all the cache names    caches.keys().then(function(cacheNames) {      return Promise.all(        // Get all the items that are stored under a different cache name than the current one        cacheNames.filter(function(cacheName) {          return cacheName != currentCacheName;        }).map(function(cacheName) {          // Delete the items          return caches.delete(cacheName);        })      ); // end Promise.all()    }) // end caches.keys()  ); // end event.waitUntil()});

navigator.serviceWorker.register('./sw.js').then(function(registration) {  if (registration.active) {    // Service Worker is Active  }})

self.addEventListener('fetch', function(event) {  // Do stuff with fetch events});
self.addEventListener('message', function(event) {  // Do stuff with postMessages received from document});

caches.open(currentCacheName).then(function (cache) {  /** 可以通过cache.put来添加缓存   *  它接收两个参数，第一个参数是Request对象或URL字符串，第二个参数是Response对象  */  cache.put(new Request('/'), new Response('Hello World'));    /** 可以通过cache.addAll来添加缓存资源数组   *  它接收一个参数，这个参数可以是Request对象数组，也可以是URL字符串数组  */  cache.addAll(['/'])
  /** 可以通过cache.match来获取缓存   *  它接收一个参数，这个参数可以是Request对象，也可以是URL字符串  */  cache.match('/').then(function (response) {    console.log(response);  });    /** 可以通过cache.delete来删除缓存   *  它接收一个参数，这个参数可以是Request对象，也可以是URL字符串  */  cache.delete('/').then(function () {    console.log('删除成功');  });
  /** 可以通过cache.keys来获取缓存的key   *  然后通过cache.delete来删除缓存  */  cache.keys().then(function (keys) {    keys.forEach(function (key) {      cache.delete(key);    });  });});

self.addEventListener('install', function (event) {  event.waitUntil(    caches.open(currentCacheName).then(function (cache) {      return cache.addAll([        '/',        '/index.css',        '/axios.js',        '/index.html'      ]);    })  );});

self.addEventListener('fetch', function (event) {  event.respondWith(    caches.match(event.request).then(function (response) {      if (response) {        return response;      }      return fetch(event.request);    })  );});

const version = '2.0';const currentCache = 'my-cache' + version;
self.addEventListener('activate', function (event) {  event.waitUntil(    caches.keys().then(function (cacheNames) {      return Promise.all(        cacheNames.map(function (cacheName) {          if (cacheName !== currentCache) {            return caches.delete(cacheName);          }        })      );    })  );});

if ('serviceWorker' in navigator) {  navigator.serviceWorker.ready.then(registration => {    registration.unregister();  });}

if ('serviceWorker' in navigator) {  navigator.serviceWorker.register('./sw.js')    navigator.serviceWorker.ready.then(function (registration) {    let tag = "data_sync";    document.getElementById('submit-btn').addEventListener('click', function () {      registration.sync.register(tag).then(function () {        console.log('后台同步已触发', tag);      }).catch(function (err) {        console.log('后台同步触发失败', err);      });    });  })}

self.addEventListener('sync', function (e) {  let init = { method: 'GET' };    switch (e.tag){    case "data_sync":      let request = new Request(`xxxxx/sync`, init);      e.waitUntil(        fetch(request).then(function (response) {          return response;        })      );      break;  }});

const { GenerateSW } = require('workbox-webpack-plugin');
const config = {  ...  h5: {    ...    webpackChain(chain) {      ...      chain.plugin('generateSW').use(new GenerateSW({        clientsClaim: true,        skipWaiting: true,        runtimeCaching: [          {            urlPattern: /.\/*/, // 需要缓存的路径            handler: 'StaleWhileRevalidate', // 缓存策略            options: {              cacheName: 'my-webcache',              expiration: {                maxEntries: 2000,              },            },          }],      }));    }  }}

import { register } from 'register-service-worker';
register('./service-worker.js', {  registrationOptions: { scope: './' },  ready(registration) {    console.log('Service worker is active.', registration);  },  registered(registration) {    console.log('Service worker has been registered.', registration);  },  cached(registration) {    console.log('Content has been cached for offline use.', registration);  },  updatefound(registration) {    console.log('New content is downloading.', registration);  },  updated(registration) {    console.log('New content is available; please refresh.', registration);  },  offline() {    console.log('No internet connection found. App is running in offline mode.');  },  error(error) {    console.error('Error during service worker registration:', error);  },});