【PWA学习】6. 使用 Service Worker 进行后台同步

最新推荐文章于 2023-09-22 16:43:24 发布

小贤笔记

最新推荐文章于 2023-09-22 16:43:24 发布

阅读量1.1k

点赞数

文章标签：学习 javascript 前端 html 开发语言

本文链接：https://blog.csdn.net/shenxianhui1995/article/details/128642175

版权

引言

你一定遇到过类似这样的场景：

当用手机填写完一张信息表单点击"提交"时，恰好手机网络很差或没有网络，这时候只能盯着手机看着旋转的小圆圈。经过长时间等待后依然没有结果，这时候关闭浏览器，请求也被终止

上面的场景其实暴露了两个问题：

普通的页面发起的请求会随着浏览器进程的结束或者 Tab 页面的关闭而终止
无网环境下，没有一种机制能“维持”住该请求，以待有网情况下再进行请求

然而，Service Worker 的后台同步功能规避了这些缺陷

示例

下面就让我们先来了解下后台同步(Background Sync)的工作原理

工作原理

后台同步应该算是 Service Worker 相关功能(API)中比较易于理解与使用的一个

其大致的流程如下：

后台同步流程

你需要在 Service Worker 中监听 sync 事件
在浏览器中发起后台同步 sync(图中第一步)
之后会触发 Service Worker 的 sync 事件，在该监听的回调中进行操作，例如向后端发起请求(图中第二步)
可以在 Service Worker 中对服务端返回的数据进行处理

由于 Service Worker 在用户关闭该网站后仍可以运行，因此该流程名为“后台同步”实在是非常贴切

使用

client 触发 sync 事件

public/index.js

// background sync 基础版
navigator.serviceWorker.ready.then(function (registration) {
  var tag = 'sample_sync'

  document.getElementById('js-sync-btn').addEventListener('click', function () {
    registration.sync
      .register(tag)
      .then(function () {
        console.log('后台同步已触发', tag)
      })
      .catch(function (err) {
        console.log('后台同步触发失败', err)
      })
  })
})

由于后台同步功能需要在 Service Worker 注册完成后触发，因此较好的一个方式是在navigator.serviceWorker.ready之后绑定相关操作。例如上面的代码中，我们在 ready 后绑定了按钮的点击事件。当按钮被点击后，会使用registration.sync.register()方法来触发 Service Worker 的 sync 事件

registration.sync返回一个SyncManager对象，其上包含register和getTags两个方法

register()方法可以注册一个后台同步事件，其中接收的参数tag用于作为这个后台同步的唯一标识

当然，如果想要代码更健壮的话，我们还需要在调用前进行特性检测：

public/index.js

if ('serviceWorker' in navigator && 'SyncManager' in window) {
    // ……
}

在 Service Worker 中监听 sync 事件

当 client 触发了sync事件后，剩下的就交给 Service Worker。理论上此时就不需要 client(前端站点)参与了。例如另一个经典场景：用户离开时页面(unload)时在 client 端触发 sync 事件，剩下的操作交给 Service Worker，Service Worker 的操作可以在离开页面后正常进行

像添加 fetch 和 push 事件监听那样，我们可以为 Service Worker 添加 sync 事件的监听：

public/sw.js

self.addEventListener('sync', function (e) {
    // ……
});

在 sync 事件的 event 对象上可以取到 tag 值，该值就是我们在上一节注册 sync 时的唯一标识。通过这个 tag 就可以区分出不同的后台同步事件。例如，当该值为 'sample_sync' 时我们向后端发送一个请求：

public/sw.js

self.addEventListener('sync', function (e) {
    console.log(`service worker需要进行后台同步，tag: ${e.tag}`);
    var init = {
        method: 'GET'
    };
    if (e.tag === 'sample_sync') {
        var request = new Request(`sync?name=AlienZHOU`, init);
        e.waitUntil(
            fetch(request).then(function (response) {
                response.json().then(console.log.bind(console));
                return response;
            })
        );
    }
});

这里我通过e.tag来判断client触发的不同 sync 事件，并在监听到 tag 为 'sample_sync' 的 sync 事件后，构建了一个 request 对象，使用 fetch API 来进行后端请求。

需要特别注意的是，fetch 请求一定要放在e.waitUntil()内。因为我们要保证“后台同步”，将 Promise 对象放在e.waitUntil()内可以确保在用户离开我们的网站后，Service Worker 会持续在后台运行，等待该请求完成

完善后端服务

实际上，经过上面两小节，我们的大致工作已经完成。不过还缺少一个小环节：我们的 KOA 服务器上还没有 sync 路由和接口。添加一下，以保证 demo 可以正常运行：

router.get('/sync', async (ctx, next) => {
    console.log(`Hello ${ctx.request.query.name}, I have received your msg`);
    ctx.response.body = {
        status: 0
    };
});

Demo 效果展示

下面就来看一下这个 demo 的运行效果：

可以看到，在网络环境正常的情况下，点击“同步”按钮会立即触发 Service Worker 中的 sync 事件监听，并向服务端发送请求；而在断网情况下，点击“同步”按钮，控制台虽然显示注册了同步事件，但是并不会触发 Service Worker 的 sync 监听回调，指到恢复网络连接，才会在后台(Service Worker)中进行相关处理

下面再来看一下触发 sync 事件后，关闭网站的效果：

可以看到，即使在关闭网站后再重新连接网络，服务端依然可以收到来自客户端的请求(说明 Service Worker 在后台进行了相关处理)

在后台同步时获取所需的数据

其实上一节结束，我们就已经可以了解最基础的后台同步功能了。而这部分则会进一步探讨后台同步中的一个重要问题：如何在后台同步时获取并发送 client 中的数据？

例如在我们的上一个 Demo 中，用户的姓名 name 是硬编码在 Service Worker 中的，而实际上我们希望能在页面上提供一个输入框，将用户的输入内容在后台同步中进行发送。

实现的方式有两种：使用 postMessage 或使用 indexedDB

使用 postMessage

我们知道，在浏览器主线程与 Web Worker 线程之间可以通过 postMessage 来进行通信。因此，我们也可以使用这个方法来向 Service Worker “传输”数据

大致思路如下：

client 触发 sync 事件
在 sync 注册完成后，使用 postMessage 和 Service Worker 通信
在 Service Worker 的 sync 事件回调中等待 message 事件的消息
收到 message 事件的消息后，将其中的信息提交到服务端

public/index.js

// 使用postMessage来传输sync数据
navigator.serviceWorker.ready.then(function (registration) {
    var tag = 'sample_sync_event';

    document.getElementById('js-sync-event-btn').addEventListener('click', function () {
        registration.sync.register(tag).then(function () {
            console.log('后台同步已触发', tag);

            // 使用postMessage进行数据通信
            var inputValue = document.querySelector('#js-search-input').value;
            var msg = JSON.stringify({type: 'bgsync', msg: {name: inputValue}});
            navigator.serviceWorker.controller.postMessage(msg);
        }).catch(function (err) {
            console.log('后台同步触发失败', err);
        });
    });
});

在registration.sync.register完成后，调用navigator.serviceWorker.controller.postMessage来向 Service Worker Post 数据

为了提高代码的可维护性，我在sw.js中创建了一个SimpleEvent类，可以把它看做一个最简单的 EventBus，用来解耦 Service Worker 的 message 事件和 sync 事件

public/sw.js

class SimpleEvent {
    constructor() {
        this.listenrs = {};
    }

    once(tag, cb) {
        this.listenrs[tag] || (this.listenrs[tag] = []);
        this.listenrs[tag].push(cb);
    }

    trigger(tag, data) {
        this.listenrs[tag] = this.listenrs[tag] || [];
        let listenr;
        while (listenr = this.listenrs[tag].shift()) {
            listenr(data)
        }
    }
}

在 message 事件中监听 client 发来的消息，并通过 SimpleEvent 通知所有监听者

public/sw.js

const simpleEvent = new SimpleEvent();
self.addEventListener('message', function (e) {
    var data = JSON.parse(e.data);
    var type = data.type;
    var msg = data.msg;
    console.log(`service worker收到消息 type：${type}；msg：${JSON.stringify(msg)}`);

    simpleEvent.trigger(type, msg);
});

在 sync 事件中，使用 SimpleEvent 监听 bgsync 来获取数据，然后再调用 fetch 方法。注意，由于e.waitUntil()需要接收 Promise 作为参数，因此需要对SimpleEvent.once进行 Promisfy

public/sw.js

self.addEventListener('sync', function (e) {
    if (e.tag === xxx) {
        // ……
    }

    // sample_sync_event同步事件，使用postMessage来进行数据通信
    else if (e.tag === 'sample_sync_event') {
        // 将SimpleEvent.once封装为Promise调用
        let msgPromise = new Promise(function (resolve, reject) {
            // 监听message事件中触发的事件通知
            simpleEvent.once('bgsync', function (data) {
                resolve(data);
            });
            // 五秒超时
            setTimeout(resolve, 5000);
        });

        e.waitUntil(
            msgPromise.then(function (data) {
                var name = data && data.name ? data.name : 'anonymous';
                var request = new Request(`sync?name=${name}`, init);
                return fetch(request)
            }).then(function (response) {
                response.json().then(console.log.bind(console));
                return response;
            })
        );
    }
});

进行后台同步时，使用 postMessage 来实现 client 向 Service Worker 的传输数据，是一个不错的方法

使用indexedDB

在 client 与 Servcie Worker 之间同步数据，还有一个可行的思路：client 先将数据存在某处，待 Servcie Worker 需要时再读取使用即可

为此需要找一个存数据的地方。你第一个想到的可能是 localStorage

然而，在最开始介绍 Service Worker 时提到过，为了保证性能，实现部分操作的非阻塞，在 Service Worker 中我们经常会碰到异步操作(因此大多数 API 都是 Promise 形式的)。那么像 localStorage 这样的同步 API 会变成异步化么？答案很简单：不会，并且 localStorage 在 Servcie Worker 中无法调用

不过我们还另一个强大的数据存储方式——indexedDB。它是可以在 Service Worker 中使用的

首先，需要一个方法用于连接数据库并创建相应的 store：

public/index.js

function openStore(storeName) {
    return new Promise(function (resolve, reject) {
        if (!('indexedDB' in window)) {
            reject('don\'t support indexedDB');
        }
        var request = indexedDB.open('PWA_DB', 1);
        request.onerror = function(e) {
            console.log('连接数据库失败');
            reject(e);
        }
        request.onsuccess = function(e) {
            console.log('连接数据库成功');
            resolve(e.target.result);
        }
        request.onupgradeneeded = function (e) {
            console.log('数据库版本升级');
            var db = e.srcElement.result;
            if (e.oldVersion === 0) {
                if (!db.objectStoreNames.contains(storeName)) {
                    var store = db.createObjectStore(storeName, {
                        keyPath: 'tag'
                    });
                    store.createIndex(storeName + 'Index', 'tag', {unique: false});
                    console.log('创建索引成功');
                }
            }
        }
    });
}

然后，在navigator.serviceWorker.ready中打开该数据库连接，并在点击按钮时，先将数据存入 indexedDB，再注册 sync：

public/index.js

navigator.serviceWorker.ready.then(function (registration) {
    return Promise.all([
        openStore(STORE_NAME),
        registration
    ]);
}).then(function (result) {
    var db = result[0];
    var registration = result[1];
    var tag = 'sample_sync_db';

    document.getElementById('js-sync-db-btn').addEventListener('click', function () {
        // 将数据存储进indexedDB
        var inputValue = document.querySelector('#js-search-input').value;
        var tx = db.transaction(STORE_NAME, 'readwrite');
        var store = tx.objectStore(STORE_NAME);
        var item = {
            tag: tag,
            name: inputValue
        };
        store.put(item);

        registration.sync.register(tag).then(function () {
            console.log('后台同步已触发', tag);
        }).catch(function (err) {
            console.log('后台同步触发失败', err);
        });
    });
});

同样的，在 Service Worker 中也需要相应的数据库连接方法：

public/sw.js

function openStore(storeName) {
    return new Promise(function (resolve, reject) {
        var request = indexedDB.open('PWA_DB', 1);
        request.onerror = function(e) {
            console.log('连接数据库失败');
            reject(e);
        }
        request.onsuccess = function(e) {
            console.log('连接数据库成功');
            resolve(e.target.result);
        }
    });
}

并且在 sync 事件的回调中，get 到 indexedDB 中对应的数据，最后再向后端发送请求：

public/index.js

self.addEventListener('sync', function (e) {
    if (e.tag === xxx) {
        // ……
    }
    else if (e.tag === yyy) {
        // ……
    }
    
    // sample_sync_db同步事件，使用indexedDB来获取需要同步的数据
    else if (e.tag === 'sample_sync_db') {
        // 将数据库查询封装为Promise类型的请求
        var dbQueryPromise = new Promise(function (resolve, reject) {
            var STORE_NAME = 'SyncData';
            // 连接indexedDB
            openStore(e.tag).then(function (db) {
                try {
                    // 创建事务进行数据库查询
                    var tx = db.transaction(STORE_NAME, 'readonly');
                    var store = tx.objectStore(STORE_NAME);
                    var dbRequest = store.get(e.tag);
                    dbRequest.onsuccess = function (e) {
                        resolve(e.target.result);
                    };
                    dbRequest.onerror = function (err) {
                        reject(err);
                    };
                }
                catch (err) {
                    reject(err);
                }
            });
        });

        e.waitUntil(
            // 通过数据库查询获取需要同步的数据
            dbQueryPromise.then(function (data) {
                console.log(data);
                var name = data && data.name ? data.name : 'anonymous';
                var request = new Request(`sync?name=${name}`, init);
                return fetch(request)
            }).then(function (response) {
                response.json().then(console.log.bind(console));
                return response;
            })
        );
    }
});

相比于 postMessage，使用 indexedDB 的方案要更复杂一点。它比较适用于一些需要数据持久化的场景

兼容性

依照惯例，我们还是来简单看一下文中相关功能的兼容性

先是 Background Sync：

Background Sync 兼容性

然后是 indexedDB：

indexedDB 兼容性

相较于 Background Sync 还是有着不错的兼容性的。而且在 safari(包括iOS safari)中也得到了支持

本章分支: sync

小贤笔记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【PWA学习】6. 使用 Service Worker 进行后台同步

引言你一定遇到过类似这样的场景：当用手机填写完一张信息表单点击"提交"时，恰好手机网络很差或没有网络，这时候只能盯着手机看着旋转的小圆圈。经过长时间等待后依然没有结果，这时候关闭浏览器，请求也被终止上面的场景其实暴露了两个问题：普通的页面发起的请求会随着浏览器进程的结束或者 Tab 页面的关闭而终止无网环境下，没有一种机制能“维持”住该请求，以待有网情况下再进行请求然而，Servi...
复制链接

扫一扫