2

我想在我的 PWA 中跟踪用户的活动。是否可以使用当前 URI 在每次网站展示时向我的服务器发送请求？

场景：用户使用当前 URI 打开 PWA -> 请求。用户打开子页面 -> 使用当前 URI 发送请求。

我的示例 service-worker.js：

var cacheName = 'weatherPWA-step-6-2';
var filesToCache = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/styles/inline.css',
  '/images/clear.png',
  '/images/cloudy-scattered-showers.png',
  '/images/cloudy.png',
  '/images/fog.png',
  '/images/ic_add_white_24px.svg',
  '/images/ic_refresh_white_24px.svg',
  '/images/partly-cloudy.png',
  '/images/rain.png',
  '/images/scattered-showers.png',
  '/images/sleet.png',
  '/images/snow.png',
  '/images/thunderstorm.png',
  '/images/wind.png'
];

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) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  console.log("Url", Client.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});
4

1 回答 1

0

这个问题大概应该这样表述：

从缓存提供文件时，如何跟踪分析包中的页面浏览量？

这是一个很好的问题，因为您肯定在调整活动。

如果您仅根据服务器日志跟踪活动，那么您每次都需要执行网络请求。这有点低效和老派的IMO。但是，如果这是您跟踪活动的方式，请建立一种处理方式。您将需要构建一种虚假的 AJAX 方式来更新日志。当然，您也可以使用它来保持缓存新鲜，在重新验证策略时保持陈旧。

如果您使用的是像 Google Analytics 这样的服务，那么您将以编程方式触发流量。这些服务的好处是您不需要更改任何内容来触发它们的日志记录活动，因为它们是从 UI 而非服务器测量的。

如果您在消费者离线时允许活动，那么您需要将活动排队并在他们重新上线后重播。这就是后台同步 API 获得广泛支持后将派上用场的地方。

希望这可以帮助。如果您有更多问题和说明，请告诉我。

于 2017-10-21T18:28:15.280 回答