I have set up service worker for my existing angular application via the angular cli command ng add @angular/pwa.
Everything works as excepted, but unfortunately I cannot use google analyitcs/adsense yet. When a request is made for https://pagead2.googlesyndication.com/pagead/ or https://www.googletagmanager.com/gtag/ (haven't copied complete url), the status code 504 Gateway Timeout (from service worker) is returned.
(for adsense I use https://github.com/scttcper/ng2-adsense)
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/"/>
<title>Home</title>
<meta charset="utf-8"/>
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<link rel="manifest" href="manifest.webmanifest">
<!-- Google Analytics -->
<script defer src="https://www.googletagmanager.com/gtag/js?id=G-YNGTS7N58K?ngsw-bypass=true"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-YNGTS7N58K");
</script>
<!--Google AdSense-->
<script defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?ngsw-bypass=true"></script>
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
Because I thought the error had to do with the request going from the service worker proxy, I added the ngsw-bypass query parameter to the script links as suggesteded here https://angular.io/guide/service-worker-devops#bypassing-the-service-worker.
When I inspect the network tab i can see that both scripts for adsense and analytics are successfully downloaded and cached. But the requests made by the scripts are failing. Can I configure the service worker proxy to add the ngsw-bypass query paramter automatically since I cannot edit those scripts or is my itention why this fails wrong?
ngsw-config.json
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}