相关疑难解决方法(0)

所以我正在构建一个Django渐进式Web应用程序,使用服务工作者提供离线支持.

根据谷歌的文档,sw.js文件应该是应用程序URL的根目录:

您需要执行此操作,因为服务工作者的范围(ServiceWorker将加载的URL集)由其所在的目录定义.

目前,我正在从http://example.com/static/文件夹中提供所有静态资源.但我需要在以下网址上提供此特定文件:http://example.com/sw.js.

知道我怎么能做到这一点？我可以制定一个特定的nginx规则来执行此重定向,但我不知道这是否是最干净的方法.也许这个设置应该存在于urls.py中？

注意:我已经看到这个问题建议使用static()方法django.conf.urls.static.但是django的文档说静态方法仅供开发使用,对我不利.

注意(2):我想我可以更改STATIC_URL设置,但我对从/ static目录提供的文件感到满意.我只希望这个文件位于url的根目录下.

• 我正在尝试使用脱机第一个策略构建PWA.
  • 源文件的服务器是NodeJS服务器.
  • 我目前正在localhost节点服务器上测试它(不确定它有影响吗？).
  • 服务工作者+缓存似乎很好,但在离线模式下我只能获得Chrome离线页面.

让我们进入细节:

提供的页面(通过http:// localhost:8080/place/test url)有一些客户端JS,我在其中注册一个Service Worker:

client.js

    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
                 .register(rootPath+'/js/service-worker.js')
                 .then(function() { console.log('Service Worker Registered'); });
    }

service-worker.js(基于Google PWA教程)

var cacheName = 'myCacheVersion';
var filesToCache = [
    '../',
    '../place/test',
    '../js/client.js',
    '../js/service-worker.js',
    "../css/style.css"
];


self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) { …

我有一个网站，我在根目录安装了一个 Service Worker，甚至将范围设置为“/”，如此处所述：Service Worker 正在缓存文件，但从未触发 fetch 事件

但是， fetch 事件没有触发。任何帮助表示赞赏。

importScripts('/site/themes/libs/cache-polyfill.js');

self.addEventListener('install', function (e) {
  e.waitUntil(
    caches.open('v1').then(function (cache) {
      return cache.addAll([
        '/',
        '/test-page',
        '/site/themes/css/main.css',
        '/site/themes/js/vendors.min.js',
        '/site/themes/js/app.min.js'
      ]);
    })
  );

  self.skipWaiting()
});

self.addEventListener('fetch', function (event) {
  console.log(event.request.url);
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    })
  );
});

编辑：我在网站上使用 statamic。