PWA脱机服务工作者设置

时间:2019-07-18 09:56:42

标签: django progressive-web-apps

我正在使用Python Django和django-pwa软件包构建一个简单的渐进式Web应用程序。我已经设置了所有内容,但离线功能无法正常工作。此时,将安装服务工作者(SW),并且开发工具将应用程序识别为PWA。但是,当我在devtools->Application中选中“离线”并重新加载网页时,出现“没有互联网连接”错误。

这是我的软件设置:

var staticCacheName = 'djangopwa-v1';

var filesToCache = [
    '/',
    '/x_offline/',
    '/static/x_django_pwa/images/my_app_icon.jpg',
    '/media/images/bfly1.2e16d0ba.fill-320x240.jpg',
];

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("djangopwa-v1")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});

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

列出的设置与django-pwa repo中的默认设置几乎相同 当我第一次加载页面时,我看到也对SW中列出的URL进行了请求,并且所有URL的状态均为200。在缓存存储中,我看到了在SW中设置了路径的缓存。所以我不明白我做错了什么。

不确定此附加信息是否有用,但是:当我将SW设置为脱机并重新加载网页时,缓存存储空间为空。

1 个答案:

答案 0 :(得分:0)

问题出在django-pwa回购提供的设置中。 他们意外地在,变量的末尾添加了符号scope,因此,如果您复制设置,则复制时将使用错误的scope设置(PWA_APP_SCOPE = '/',),它会制动离线模式。我将与回购管理员联系,以便为下一个用户解决此问题。