Ionic PWA serviceworker - no CORS

Question

serviceworkerファイルのキャッシュを実装する必要がありますが、no-corsフラグを使用する必要があります。 これは、私のWebサーバーで以下のコードでCORSエラーが発生したためです。このコードは、標準Ionic 2スターターテンプレート（serviceworker.js内）からのものです。何らかの理由で要求がCORSエラーのために失敗するURLへのリダイレクトがある認証フローをトリガーするため、私は標準コードを使用できません。

どうすればいいですか（最も簡単な方法）？

// TODO: Implement this without CORS (set no-cors flag) 
self.toolbox.precache(
    [ 
    // './build/main.js', 
    // './build/vendor.js', 
    // './build/main.css', 
    // './build/polyfills.js', 
    // 'index.html', 
    // 'manifest.json' 
    ] 
); 

EDIT：実際には認証エラーではなく、ユーザーは確実に認証されています。しかし、認証中のリダイレクトのために、上記のファイルの要求が間違っています。私はこの記事を見つけました：What is an opaque request, and what it serves for?これは解決策ではない設定フラグを示します。そのページのようなエラーは、 要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーが存在しません。 発信元 'http://abc'はアクセスできません。 不透明な応答が必要な場合は、要求のモードを 'no-cors' に設定して、CORSを無効にしてリソースをフェッチします。

Answer 1

以下のように自分で解決しました。インストールイベントは、アプリケーションがファイルをローカルに格納するためのものです。

/** 
* Check out https://googlechromelabs.github.io/sw-toolbox/ for 
* more info on how to use sw-toolbox to custom configure your service worker. 
*/ 


'use strict'; 
importScripts('./build/sw-toolbox.js'); 

self.toolbox.options.cache = { 
    name: 'ionic-cache' 
}; 

// pre-cache our key assets 
// TODO: Implemente this without using CORS (set no-cors flag) 
/* 
self.toolbox.precache(
    [ 
    './build/main.js', 
    './build/vendor.js', 
    './build/main.css', 
    './build/polyfills.js', 
    'index.html', 
    'manifest.json' 
    ] 
); 
*/ 

// MANUAL precaching in order to evade CORS error on SharePoint 

var aFilesToCache = [ 
    './assets/json/propertyLUT.js', 
    './assets/json/propertyvalues.js', 
    './build/main.js', 
    './build/vendor.js', 
    './build/main.css', 
    './build/polyfills.js', 
    'index.html', 
    'manifest.json' 
]; 

self.addEventListener('fetch', function(event) { 
    console.log('Handling fetch event for', event.request.url); 

    event.respondWith(

    // Opens Cache objects that start with 'font'. 
    caches.open('pwa_').then(function(cache) { 
     return cache.match(event.request).then(function(response) { 
     if (response) { 
      console.log('Found response in cache:', response); 

      return response; 
     } 
     }).catch(function(error) { 

     // Handles exceptions that arise from match() or fetch(). 
     console.error('Error in fetch handler:', error); 

     throw error; 
     }); 
    }) 
); 
}); 

self.addEventListener('install', event => { 
    function onInstall(event, filesToCache) { 
    console.log('Hit event INSTALL'); 
    return Promise.all(filesToCache.map(function(aUrl) 
    { 
     return caches.open('pwa_').then(function(cache) 
     { 
     debugger; 
     aUrl = resolveURL(aUrl, self.location.href); 
     return fetch(aUrl, { mode: 'no-cors' }) 
      .then(function(response) 
      { 
       return cache.put(aUrl, response.clone()); 
      }); 

     }) 
    })) 
    } 

    event.waitUntil(
    onInstall(event, aFilesToCache).then(() => self.skipWaiting()) 
); 
}); 

function resolveURL(relative, base) { 
    var stack = base.split("/"), 
     parts = relative.split("/"); 
    stack.pop(); // remove current file name (or empty string) 
       // (omit if "base" is the current folder without trailing slash) 
    for (var i=0; i<parts.length; i++) { 
     if (parts[i] == ".") 
      continue; 
     if (parts[i] == "..") 
      stack.pop(); 
     else 
      stack.push(parts[i]); 
    } 
    return stack.join("/"); 
} 
/* 
foreach(aUrl in aFilesToCache) 
{ 
    var corsRequest = new Request(url, {mode: 'no-cors'}); 
    fetch(corsRequest).then(response => { 
    return cache.put("pwa_" + url, response); 
    }); // response won't be opaque. 
} 
*/ 

// dynamically cache any other local assets 
self.toolbox.router.any('/*', self.toolbox.fastest); 

// for any other requests go to the network, cache, 
// and then only use that cached resource if your user goes offline 
self.toolbox.router.default = self.toolbox.networkFirst;