Service Worker初探

navigator.serviceWorker.register('serviceworker.js', { scope: '/' })

window.onload = function() {    if ('serviceWorker' in navigator) {      navigator.serviceWorker.register('./serviceworker.js', { scope: '/' })    }  }

self.addEventListener('install', function(event) {  event.waitUntil(    caches.open('cache').then((cache) => {      return cache.add('./offline.html')    })  )})
self.addEventListener('fetch', function(event) {  event.respondWith(    fetch(event.request).catch(() => {      return caches.match('./offline.html')    })  )})

self.addEventListener('fetch', (event) => {  event.respondWith(    caches.open('cache-name').then((cache) => {      return cache.match(event.request).then((cacheResponse) => {        return cacheResponse || fetch(event.request).then((networkResponse) => {          cache.put(event.request, networkResponse.clone())          return networkResponse        })      })    })  )})

self.addEventListener('fetch', (event) => {  event.respondWith(    caches.open('cache-name').then((cache) => {      return caches.match(event.request).then((cacheResponse) => {        const fetchPromise = fetch(event.request).then((networkResponnse) => {          cache.put(event.request, networkResponnse)          return networkResponnse        })        return cacheResponse || fetchPromise      })    })  )})

self.addEventListener('fetch', (event) => {  event.respondWith(    caches.open('cache-name').then((cache) => {      return fetch(event.request).then((networkResponse) => {        cache.put(event.request, networkResponse.clone())        return networkResponse      }).cache(() => {        return cache.match(event.request)      })    })  )})

if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {  window.addEventListener('load', function () {    if (!navigator.serviceWorker.controller) {      try {        navigator.serviceWorker.register('serviceworker.js')      } catch (err) {        throw Error(err)      }    }
    navigator.serviceWorker.addEventListener('controllerchange', () => {      window.location.reload()    })  })}

// serviceworker.jsconst VERSION = self.__VERSION__const cacheKey = 'cache-' + VERSIONconst CACHE_LIST = self.__WEBPACK_INJECT_CACHE_LIST__

// webpack.config.jsconst fs = require('fs')const path = require('path')
class ServiceWorkerPlugin {  apply (compiler) {    compiler.hooks.emit.tap('ServiceWorkerPlugin', async (compilation) => {      const packageJson = fs.readFileSync(path.resolve(__dirname, './package.json'))      const version = JSON.parse(packageJson).version      const assetKeys = Object.keys(compilation.assets)
      let source = compilation.assets['serviceworker.js'].source().toString()      source = source.replace('self.__WEBPACK_INJECT_CACHE_LIST__', JSON.stringify(assetKeys))      source = source.replace('self.__VERSION__', JSON.stringify(version))
      compilation.assets['serviceworker.js'] = {        source: () => source,        size: () => source.length      }    })  }}

module.exports = {  ...  plugins: [      new ServiceWorkerPlugin()  ]}

self.addEventListener('install', function (event) {  event.waitUntil(    caches.open(cacheKey)      .then((_cache) => _cache.addAll(CACHE_LIST))      .then(self.skipWaiting())  )})

self.addEventListener('activate', function (event) {  event.waitUntil(    caches.keys().then((keys) => (      Promise.all(        keys.filter((key) => key !== cacheKey)          .map((key) => caches.delete(key))      )    )).then(() => {      self.clients.claim()    })  )})

self.addEventListener('fetch', function (event) {  if (CACHE_LIST.find((cache) => {    return event.request.url.endsWith(cache)  })) {    event.respondWith(      caches.match((event.request)).then((cachedResponse) => (        cachedResponse || fetch(event.request)      ))    )  }})

// html<button id="submit">发送请求</button>
// jswindow.onload = function() {  navigator.serviceWorker.register('./serviceworker.js')
  navigator.serviceWorker.ready.then((registration) => {    document.getElementById('submit').addEventListener('click', () => {      registration.sync.register('send-messages')    })  })}

function sendMessages() {  return fetch('http://localhost:3000/').then((response) => {    return response.json()  }).then((data) => {    console.log(data.errCode === 0)    return data.errCode === 0 ? Promise.resolve() : Promise.reject()  })}
self.addEventListener('sync', (event) => {  if (event.tag === 'send-messages') {    event.waitUntil(      sendMessages().catch(() => {        if (event.lastChance) {          console.log('不会再次尝试请求了')        }        return Promise.reject()      })    )  }})

const express = require('express')const app = express()const port = 3000
app.use((req, res, next) => {  res.header('Access-Control-Allow-Origin', '*');  res.header('Access-Control-Allow-Methods', '*');  next();});
app.get('/', (req, res) => {  const response = { errCode: 0 };  const date = new Date();  const hour = date.getHours();  const minutes = date.getMinutes();  const second = date.getSeconds();  const time = `${hour}:${minutes}:${second}`;  console.log('请求成功！参数:', req.query, '返回值:', response, '时间:', time)  res.send(response)})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

// 浏览器环境navigator.serviceWorker.ready.then((registration) => {  document.getElementById('submit').addEventListener('click', () => {    const content = document.getElementById('content').value    registration.sync.register(`send-messages_${content}`)  })})

// Service Workerfunction sendMessages(content) {  return fetch(`http://localhost:3000/?content=${content}`).then((response) => {    return response.json()  }).then((data) => {    console.log(data.errCode === 0)    return data.errCode === 0 ? Promise.resolve() : Promise.reject()  })}
self.addEventListener('sync', (event) => {  if (event.tag.startsWith('send-messages')) {    const content = event.tag.split('_')[1]      event.waitUntil(      sendMessages(content).catch(() => {        if (event.lastChance) {          console.log('不会再次尝试请求了')        }        return Promise.reject()      })    )  }})

// 定义global对象 因为indexedDB的代码需要在浏览器和Service Worker两个环境下运行const _global = typeof window === 'undefined' ? self : window
// 打开数据库// 如果indexedDB已经存在，window.indexedDB.open方法不会重新创建，只会打开那个已经创建好的数据库。window.indexedDB.open方法的第二个个参数是数据库版本号。// onupgradeneeded只会在数据库版本升级的时候执行，用来创建对象存储。const openDataBase = function () {  return new Promise((resolve, reject) => {    const request = _global.indexedDB.open('conent-db', 1)    request.onupgradeneeded = (event) => {      const db = event.target.result      if (!db.objectStoreNames.contains('list')) {        db.createObjectStore('list', {          keyPath: 'id',          autoIncrement: true        })      }    }    request.onerror = (err) => reject(err)    request.onsuccess = (event) => resolve(event.target.result)  })}
// 启动事务const openObjectStore = async function (storeName, mode) {  const db = await openDataBase()  return db.transaction(storeName, mode).objectStore(storeName)}
_global.db = {  set: async function (content) {    // 打开数据存储    const objectStore = await openObjectStore('list', 'readwrite')    // 新增数据    return objectStore.add({ content })  },
  getAll: async function () {    // 打开数据存储    const objectStore = await openObjectStore('list')    return new Promise((resolve) => {      const data = []      // 根据游标查询数据      // 我们在创建数据库的时候使用autoIncrement设置自增主键，所以需要通过游标查询所有的数据      objectStore.openCursor().onsuccess = function (event) {        const cursor = event.target.result        if (!cursor) {          return resolve(data)        } else {          data.push(cursor.value)          cursor.continue()        }      }    })  },
  clear: async function (ids) {    // 打开数据存储    const objectStore = await openObjectStore('list', 'readwrite')    // 清空对象    return objectStore.clear()  }}

document.getElementById('submit').addEventListener('click', async () => {    const content = document.getElementById('content').value    await db.set(content)    registration.sync.register(`send-messages`)  })

self.addEventListener('sync', (event) => {  if (event.tag === 'send-messages') {    event.waitUntil(      self.db.getAll().then((contents) => {        return Promise.all(          contents.map(({ content }) => {            return sendMessages(content)          })        )      }).then(() => {        return self.db.clear()      })    )  }})