我们目前正在使用Angular构建我们的应用。此应用可从多个域提供服务,并根据用户所在的域提供不同的颜色和内容。但这是相同的Angular应用程序。
为了提供速度和一些脱机体验,我们已经设置了工作正常的服务工作程序。每当应用更新后,我们将使用以下代码向用户显示对话框,然后自动重新加载页面:
export class ApplicationService {
constructor(private dialog: DialogService, private worker: SwUpdate) {
this.worker.available.subscribe(event => {
this.dialog.updateApplication();
});
}
}
由于该应用程序在多个域上提供服务,所以这也意味着每个域都在管理自己的基于域的缓存。
例如,当用户导航到domain-a.com
并且有新版本可用时,将显示对话框,页面将刷新,并且可以。
但是,如果同一用户现在导航到domain-b.com
,他将经历同样的事情,而这不是我们想要的。由于这是同一应用程序,因此理想情况下,我们希望所有域都与新版本保持最新。
所以问题是:这是否可能?如果是的话,我们可以采取哪些策略来解决此问题?
这里是清单的部分内容以及服务人员的配置:
manifest.webmanifest
{
"name": "my-project",
"short_name": "my-project",
"theme_color": "#277f31",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [...]
}
ngsw-config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
您使用不同的域,并且PWA必须遵守Same Origin Policy限制。服务工作者脚本URL的来源必须与调用register()
方法的页面的来源相同。相同的原始策略也会影响Cache或IndexedDB的范围。
在您的情况下,您可能只有一个根域,您可以在其中注册服务工作者,并在其下注册一系列子域/路径。像:domain.com/domain-a
和domain.com/domain-b
。这样,您仍然应该能够根据选择的最终路径提供不同的用户体验,并且可以在所有子域之间使用集中式软件和缓存。