Google chrome 验证后，重定向到PWA UI将显示服务工作者代码

访问已安装的PWA会通过SAML触发身份验证页面。输入用户名和密码后，通过POST发送信息以进行验证：

Request URL: https://url/saml/SSO
Request Method: POST
Status Code: 302
Referrer Policy: no-referrer-when-downgrade

成功后，执行302到PWA的重定向：

Response Headers
Content-Length: 0
Date: Fri, 30 Aug 2019 09:58:49 GMT
Location: https://url/sw.js

但是，完成此操作后，将显示服务工作者文件的代码，而不是UI

包括针对错误的解决方法：

服务工作者配置如下所示：

// Caches
var cacheStatic = 's1';
var cacheDynamic  = 'd1';

// Array with the files to cache
var cacheFiles = [
    '/',
    '/offline.html',
    '/index.html',
    '/images/icons/Android/mconnect-192x192.png',
    '/images/icons/Android/mconnect-512x512.png',
    '/lib/bootstrap/css/bootstrap.min.css',
    '/fonts/fontawesome-free/css/all.min.css',
    '/lib/jquery/jquery.min.js',
    '/lib/bootstrap/js/bootstrap.bundle.min.js',
    '/js/app.js'
]

// Pre-cache static assets
self.addEventListener('install', function(event){
    self.skipWaiting();
    console.log('[ServiceWorker] Installed');
    event.waitUntil(caches.open(cacheStatic).then(function(cache){
        console.log('[ServiceWorker] Caching Application Shell Files');
        return cache.addAll(cacheFiles);
    }));
});

// Cleaning cache
self.addEventListener('activate', function (event) {
  console.log('Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== cacheStatic && key !== cacheDynamic) {
            console.log('Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

// Cache-Fetch Strategy
self.addEventListener('fetch', function(event) {

let request = event.request;

  if (request.method == 'GET') {
    request = new Request(request.url, {
      method: 'GET',
      headers: request.headers,
      mode: request.mode == 'navigate' ? 'cors' : request.mode,
      credentials: request.credentials,
      redirect: request.redirect
    });
  }

event.respondWith(
    // Try the network
    fetch(event.request)
      .then(function(response) {
        return caches.open(cacheDynamic)
          .then(function(cache) {
            // Put in cache if succeeds
            cache.put(event.request.url, response.clone());
            return response;
          })
      })
      .catch(function(err) {
            console.log('[Error fetching]', err);
          // Fallback to cache if not offline
          return caches.match(event.request)
            .then(function(response){
                if (response === undefined) { 
                    // fallback to offline page
                    return caches.match('/offline.html');
                } 
                return response;
            })


      })
  );
});

---

预期的行为是查看应用程序的UI，而不是服务人员文件的代码。

我们经历了相同的行为，不得不公开一些文件（不受SAML保护）： -ngsw.json -ngsw-worker.js -manifest.json

后来，它果然起了作用

// Caches
var cacheStatic = 's1';
var cacheDynamic  = 'd1';

// Array with the files to cache
var cacheFiles = [
    '/',
    '/offline.html',
    '/index.html',
    '/images/icons/Android/mconnect-192x192.png',
    '/images/icons/Android/mconnect-512x512.png',
    '/lib/bootstrap/css/bootstrap.min.css',
    '/fonts/fontawesome-free/css/all.min.css',
    '/lib/jquery/jquery.min.js',
    '/lib/bootstrap/js/bootstrap.bundle.min.js',
    '/js/app.js'
]

// Pre-cache static assets
self.addEventListener('install', function(event){
    self.skipWaiting();
    console.log('[ServiceWorker] Installed');
    event.waitUntil(caches.open(cacheStatic).then(function(cache){
        console.log('[ServiceWorker] Caching Application Shell Files');
        return cache.addAll(cacheFiles);
    }));
});

// Cleaning cache
self.addEventListener('activate', function (event) {
  console.log('Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== cacheStatic && key !== cacheDynamic) {
            console.log('Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

// Cache-Fetch Strategy
self.addEventListener('fetch', function(event) {

let request = event.request;

  if (request.method == 'GET') {
    request = new Request(request.url, {
      method: 'GET',
      headers: request.headers,
      mode: request.mode == 'navigate' ? 'cors' : request.mode,
      credentials: request.credentials,
      redirect: request.redirect
    });
  }

event.respondWith(
    // Try the network
    fetch(event.request)
      .then(function(response) {
        return caches.open(cacheDynamic)
          .then(function(cache) {
            // Put in cache if succeeds
            cache.put(event.request.url, response.clone());
            return response;
          })
      })
      .catch(function(err) {
            console.log('[Error fetching]', err);
          // Fallback to cache if not offline
          return caches.match(event.request)
            .then(function(response){
                if (response === undefined) { 
                    // fallback to offline page
                    return caches.match('/offline.html');
                } 
                return response;
            })


      })
  );
});