具有动态值的 Angular index.html |网络工作者答案

【问题标题】：Angular index.html with dynamic values | web-worker具有动态值的 Angular index.html |网络工作者
【发布时间】：2019-08-28 12:26:08
【问题描述】：

直到最近我们还使用 express.js 为 Angular 提供 index.html，因为我们需要在应用启动之前从数据库中填充动态变量。

<script> window .__ envs = {{{json envs}}} </script>

但是，新的 Angular 7 通过 web-worker 缓存了源 index.html。

所以当我加载网页时，它无法正确加载，直到我点击重新加载。

我试图从 webworker 中禁用 index.html。什么都没发生。

我试图关闭网络工作者并将其从任何地方删除。现在我不必使用硬重新加载，但第一次加载仍然会显示源文件而不是通过 express.js 修改

1) 源为什么会加载源文件以及它是如何到达的？

2) 我可以在 webworker 中设置它吗？

【问题讨论】：

您能否添加一个缓存您的 index.html 的 webworker 代码示例？
如果您需要在应用星标之前从数据库中获取变量，为什么不使用 APP_INITIALIZER？

标签： angular web-worker

【解决方案1】：

您可以在您的模块中使用 APP_INITIALIZER 并使用工厂来加载提供者服务，如下所示：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [
    ServiceProvider, 
    { provide: APP_INITIALIZER, useFactory: ServiceProviderFactory, deps: [ServiceProvider], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

你的服务来获取数据作为服务：

@Injectable()
export class ServiceProvider{
constructor(private http: Http) {

    }

getInitialData(){

 // your fetch logic from API
 }
}

您的服务工厂（添加模块）：

export function ServiceProviderFactory(provider: ServiceProvider) {
  return () => provider.getInitialData();
}

【讨论】：

【解决方案2】：

感谢您的回答，但没有人能完全解决我的问题。我不能使用APP_INITIALIZER，因为我现在不知道API_URL，这是我需要传递给应用程序的事情之一。它是动态值，因此它不能是 process.env 的一部分。

禁用缓存 index.html 对我来说不起作用。

但解决方法很简单。

我没有直接更改 index.html 文件，而是将<script src="/envs"> 放入其中我在 express.js 中公开了这个文件

app.get('/envs', async (req, res) => {
    const envs = ...
    res.end('window.__envs = ' + JSON.stringify(envs))
})

【讨论】：

【解决方案3】：

你的index文件在你刷新两次后会更新是正常的。

Service Worker 实现的缓存机制将检查 Hash Sum 以检测文件的任何更改。如果哈希值不同，将下载新版本并缓存（但不会从第一次显示）。

第二次刷新后会看到更新的版本。

如果你根本不需要缓存，你可以从 angular.json 中禁用你的 service worker：

"configurations": {
     "production": {
          "serviceWorker": false,
          "ngswConfigPath": "src/ngsw-config.json"
     }
}

此外，您还可以侦听更改（SW 工作人员检测何时发现新版本）并向用户显示适当的消息，并使用按钮刷新页面。看看here如何捕捉和处理更新过程。

祝你好运！

【讨论】：