如何跟踪 Service Worker 当前的 URL 变化？

Question

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

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

我的示例服务-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);
    })
  );
});

Answer 1

这个问题应该这样表述：

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

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

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

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

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

希望这对您有所帮助。如果您有更多问题和需要说明，请告诉我。

如何跟踪 Service Worker 当前的 URL 变化？

How to track current URL changes in service worker?

javascript

service-worker

progressive-web-apps

service-worker-events