Tech: Unearthing a Potential Safari 17 Anomaly: Service Worker and ITP Conflict

TL;DR: A potential issue in Safari 17's Intelligent Tracking Prevention (ITP) affects service worker traffic, causing blocked resources and a notable drop in Google Analytics data for a major retail client in the Netherlands. The solution involved routing specific URLs to bypass the service worker, leading to improved analytics performance across browsers.

Uncovering the Challenge

In the fast-paced world of web development, unexpected challenges often lead to valuable insights. This was the case when Kedos Consulting discovered a potential bug in Safari 17. This bug appeared to apply ITP rules to all traffic from service workers, an issue not documented in existing resources.

Background

Our client, a large retail company in the Netherlands, runs a custom-built e-commerce platform. Their Server-Side Rendered (SSR) React frontend uses a service worker to intercept and cache JS and CSS files, leveraging Workbox. This setup aims to enhance performance and provide a seamless user experience.

Identifying the Problem

The problem surfaced with a significant drop in Google Analytics (GA) traffic from Safari 17 users. GA showed a sharp decline in user statistics specifically for Safari. The users that were being recorded appeared to only view a single landing page and then nothing further, and were primarily new visitors. This was not normal behaviour for the site, and indicated that GA was working on the initial page load, but failed on subsequent page loads.

This suggested a potential issue with the service worker, which is inactive on the first page load and activates on the next reload.

Technical Analysis

The first clue found was a console error indicating a blocked GTM script. The error originated from the service worker, leading us to check the service worker's console. The error read: "Failed to load resource: Resource blocked by content blocker." This occurred in a standard Safari installation without additional plugins or blockers.

This anomaly suggested that Safari 17 might be applying ITP rules to service worker-routed traffic, especially since blocks were noted for Google Tag Manager, Google Analytics, and HotJar, but not for other trackers like Bing. Typically, Safari's ITP should only activate in private browsing mode or if manually enabled, which was not the case here.

Here’s the initial Workbox service worker configuration:

// Initial Workbox configuration
workbox.routing.registerRoute(
  new RegExp('.*\\.(?:js|css)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'assets'
  })
);
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly);

This configuration attempted to cache all JS and CSS files and route everything else to the network. The critical point is that all traffic was routed to the service worker due to the default handler, leading to the issue.

Implementing a Solution

Kedos Consulting devised a workaround by modifying the service worker’s routing logic. The solution excluded URLs triggering ITP, such as googletagmanager.com, allowing these requests to bypass the service worker. We also removed the default routing to ensure only specific requests were intercepted.

// Revised Workbox configuration
workbox.routing.registerRoute(
  ({ url }) =&gt; !url.hostname.includes('googletagmanager.com') &amp;&amp; /\.(?:js|css)$/.test(url.pathname),
  new workbox.strategies.NetworkFirst()
);

This approach included a 'bypass list' of domain names that would always bypass the service worker. While this method risks a continuous game of cat-and-mouse with ITP rules, it offers a resilient solution. Another option is to use a 'cache list' approach, only caching specific domains or URIs.

Unexpected Outcomes

After implementing the changes, analytics teams reported improved data collection not only from Safari but also from other browsers. This unexpected result suggests there might be additional layers to this issue, necessitating further investigation.

Conclusion

This situation highlights the complexity of modern web environments, where browser-specific behaviors can have broad impacts. The findings suggest a potential undocumented behavior in Safari 17, presenting both a challenge and an opportunity for web developers. Kedos Consulting continues to investigate this issue to fully understand its implications for our client and the broader web community.

About Kedos Consulting

Kedos Consulting specializes in e-commerce architectural design and cloud system implementation, addressing and resolving complex technical challenges in the digital landscape. Our recent work with a prominent retail client in the Netherlands showcases our commitment to innovation and adaptability in web technologies.

Contact Kedos Consulting:

Stay ahead of web development challenges with insights from Kedos Consulting. If you've encountered similar issues or need expert guidance, reach out to our team today. Let's solve these complexities together and ensure your analytics remain robust and accurate. Contact us now to explore tailored solutions for your business needs.