离子PWA服务工人 - 无库

Question

我需要实现ServiceWorker文件缓存，但使用No-Cors标志。这是因为我在Web服务器上有一个CORS错误以下代码。该代码来自标准离子2启动模板（Inside ServiceWorker.js）。我无法使用标准代码，因为出于某种原因，请求触发了身份验证流，其中重定向到某些URL，由于CORS错误而失败。

我将如何以最好的（最简单的）方式做到这一点？

// 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'
  ]
);

编辑：这并不是实际发生的身份验证错误，用户肯定已经进行了身份验证。但是由于身份验证期间的重定向，上述文件请求错误。我找到了这篇文章：什么是不透明的请求，它的用途是什么？这表明设置无CORS标志将是解决方案。我遇到的错误，就像在该页面上一样：请求的资源上没有"访问控制"标头。因此，不允许访问原点" http：//abc"。如果不透明的响应满足您的需求，请将请求模式设置为"无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;