如何使用Workbox与Service Worker配合使用“ POST”?

时间:2019-09-11 05:31:51

标签: javascript service-worker progressive-web-apps workbox

我正在寻找使POST请求与Service Worker一起工作的方法。我决定不缓存.js文件;并且在我的服务工作者中未包含任何用于处理.js文件的代码。这是ym SW供参考-

importScripts("/ce-sw-base-files/precache-manifest.99e329b365f3e07d00d5df746d12a847.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

// Google Analytics
workbox.googleAnalytics.initialize({
    parameterOverrides: {
        cd1: 'offline',
    },
});

// Install the service worker; and cache the layout files
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('ce-super-cache')
            .then(cache => {
                cache.addAll([
                    '/dashboard',
                    '/offline',
                    '/manifest.json'
                ]);
            })
    );
});

// Images Cache
workbox.routing.registerRoute(
    /\.(?:png|gif|jpg|jpeg|svg)$/,
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: 'images-cache',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 20,
                maxAgeSeconds: 5 * 24 * 60 * 60, // 5 Days
            }),
        ],
    }),
);

// Static Resources (Only CSS)
workbox.routing.registerRoute(
    /\.(?:css)$/,
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: 'static-css-resources',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 20,
                maxAgeSeconds: 5 * 24 * 60 * 60, // 5 Days
            }),
        ],
    })
);

// Default strategy if not above.
workbox.routing.setDefaultHandler(
    new workbox.strategies.NetworkOnly()
);

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        }).catch(() => {
            return caches.match('/offline');
        })
    )
});

workbox.routing.setCatchHandler(({event}) => {
    switch (event.request.destination) {
        case 'document':
            return caches.match('offline');
            break;

        // case 'image':
        //     return caches.match(FALLBACK_IMAGE_URL);
        //     break;
        //
        // case 'font':
        //     return caches.match(FALLBACK_FONT_URL);
        //     break;

        default:
            // If we don't have a fallback, just return an error response.
            return Response.error();
    }
});

为了不让服务工作者处理.js文件,我决定不匹配任何.js文件。我还尝试过将NetworkOnly用作所有不匹配请求的默认策略;但这不能可靠地工作。

我想知道是否有什么方法可以完全跳过服务工作者捕获/拦截的.js文件,以便发出常规POST请求?

目前,我无法转换为fetch;并且必须依靠axios来执行我的POST请求。

将感谢您提出解决方案/指导。预先谢谢你。

0 个答案:

没有答案