如何在 Web 应用程序中使用 Workbox 后台同步进行离线发布请求答案

【问题标题】：How to use Workbox Background Sync in an Web App for offline post requests如何在 Web 应用程序中使用 Workbox 后台同步进行离线发布请求
【发布时间】：2019-09-14 17:07:54
【问题描述】：

我正在尝试创建一个支持离线发布请求的 web 应用程序。我使用工作箱来预缓存我的文件，但插件后台同步不起作用。我没有使用 Chrome 开发工具在 IndexedDB 中看到排队的请求。它是如何工作的？

【问题讨论】：

标签： service-worker progressive-web-apps workbox

【解决方案1】：

在 Service Worker 文件中：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.2.0/workbox-sw.js');

//The new installed service worker replaces the old service worker immediately
self.skipWaiting();

//Test workbox
if (workbox) {
    console.log('Workbox is loaded');
} else {
    console.log('Workbox did not loaded');
}


//Precaching
workbox.precaching.precacheAndRoute([
    { url: 'index.html', revision: '0000' },
    { url: 'manifest.json', revision: '0000' },
    { url: 'images/icons/icon-48x48.png', revision: '0000' },
]);

//BackgroundSync
//On https://ptsv2.com/t/n5y9f-1556037444 you can check for received posts
const bgSyncPlugin = new workbox.backgroundSync.Plugin('queue', {
    maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
});

workbox.routing.registerRoute(
    'https://ptsv2.com/t/n5y9f-1556037444/post',
    new workbox.strategies.NetworkOnly({
        plugins: [bgSyncPlugin]
    }),
    'POST'
);

在 index.html 中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--Include Manifest (Metadata for Browser)-->
    <link rel="manifest" href="manifest.json">
    <!--Metadata for Apple-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Weather PWA">
    <link rel="apple-touch-icon" href="images/icons/icon-144x144.png">
    <!--Metadata for Microsoft-->
    <meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
    <meta name="msapplication-TileColor" content="#2F3BA2">
</head>
<body>

    <button onclick="sendPost()">Send post</button>

    <!--Register Service Worker-->
    <script>
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker
                .register('service-worker.js')
                .then(function() { console.log('Service Worker Registered'); });
        }
    </script>

    <!--Send the post request-->
    <script>
        function sendPost() {
            console.log("Send post...");
            fetch('https://ptsv2.com/t/n5y9f-1556037444/post', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                mode:'no-cors',
                body: JSON.stringify({
                    message: 'hello world'
                }),
            }).then(function (res) {
                console.log('Sended data', res);
            }).catch(function (error) {
                console.log('Error while sending data', error);
            })

        }
    </script>

</body>
</html>

【讨论】：