相关疑难解决方法(0)

我在Angular 5.2.5应用程序中使用Angular-CLI 1.6.6和@ angular/service-worker 5.2.5.除了在我们的生产环境中弹出一条错误消息外,一切在本地lite-server和生产服务器上都能正常工作:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

查看ngsw-worker.js脚本,我发现上面生成错误消息的行(2466):

async safeFetch(req) {
    try {
        return await this.scope.fetch(req);
    }
    catch (err) {
        this.debugger.log(err, `Driver.fetch(${req.url})`);
        return this.adapter.newResponse(null, {
            status: 504,
            statusText: 'Gateway Timeout',
        });
    }
} 

catch中的控制台日志记录错误会发出以下错误:

TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    at Driver.safeFetch (ngsw-worker.js:2464)
    at Driver.handleFetch (ngsw-worker.js:1954)
    at <anonymous>

与此问题相关的错误:导致'ServiceWorkerGlobalScope'上执行'fetch'失败的原因:'only-if-cached'只能设置为'same-origin'模式错误？

生成此错误的req是应用程序的任何首次访问:

https://example.com/test/#/connect
https://example.com/test/#/map?token=[accestoken]
...

在应用程序重新加载时,错误不会重复.

有人可以帮帮我吗？服务工作者的safeFetch()中是否存在错误(可能支持HashLocationStrategy)？我必须在配置中更改任何内容吗？

我正在从空白的 CRA 模板开始开发 PWA。该应用程序需要在安装后完全离线工作，因此我利用 Workbox 的方法来预缓存所有静态内容。

不幸的是，我有一些 5 到 10 MB 之间的内容（音频文件），并且在 Create React App Service Worker 中，限制设置为 5MB（以前为 2MB - 请参阅此处））。

这些文件没有预先缓存，实际上我在构建过程中收到警告： /static/media/song.10e30995.mp3 is 5.7 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.。

遗憾的是maximumFileSizeToCacheInBytes似乎无法在 CRA SW 中进行配置:(

由于音频质量要求，我无法减小文件大小。

我还编写了一个自定义软件逻辑来预先缓存来自互联网的外部资源，并且我考虑在那里添加音频文件。但是 React 构建过程会根据文件内容向文件名添加哈希码，因此每次更新音频内容时我都需要更改 SW 代码，这并不理想。

所以我的问题是：

• 有什么办法可以强制maximumFileSizeToCacheInBytes在 CRA 应用程序中强制限制自定义值？
• 我正在考虑尝试在构建过程后获取哈希码并自动更新软件代码，但这对我来说不是很有说服力。
• 有没有其他解决方案或方法来实现我需要的？

这是我的 SW 代码（默认的 CRA 代码 + 最后我的自定义逻辑）

import { clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import …

我试图从网络工作者内部的服务器获取数据。但每次在开发工具中我都会遇到同样的错误。

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /api/books

我看到了 这个关于服务人员的答案，但它对我不起作用。

WebWorker文件代码！

// data-handling.web-worker.js

const workercode = () => {
  onmessage = async e => {
    const res = await fetch('/api/books');

    postMessage(res);
  }
};

let code = workercode.toString();
code = code.substring(code.indexOf('{')+1, code.lastIndexOf('}'));

const blob = new Blob([code], {type: 'application/javascript'});
const worker_script = URL.createObjectURL(blob);

export default worker_script;

在 React 组件中导入。

import data_handling_worker from "./data-handling.web-worker";
const dataHandlingWorker = new Worker(data_handling_worker);

在钩子内运行并发布消息！

const [searchQuery, …