如何在 Web 应用程序中使用 Workbox Background Sync 进行离线 post 请求

Question

我正在尝试创建一个支持离线的 webapp post requests.I 使用工作箱来预缓存我的文件但是插件 Background Sync 没有 work.I 在 IndexedDB 中没有看到排队的请求Chrome 开发工具。它是如何工作的？

Answer 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>

如何在 Web 应用程序中使用 Workbox Background Sync 进行离线 post 请求

How to use Workbox Background Sync in an Web App for offline post requests

service-worker

progressive-web-apps

workbox