当我将 Angular pwa 应用程序发布到 IIS 中的子文件夹时,pwa 应用程序无法离线工作。
ng build --prod --baseHref=/subfolder/ 没有帮助。
我在网站上使用https。
如果应用程序未发布到 IIS 的根目录而是发布到 IIS 的子文件夹,如何准确地重新配置 angular pwa 应用程序以脱机工作?
有人有发布到 IIS 子文件夹后脱机工作的角度 pwa 应用程序的功能演示吗?
我知道我在这方面已经很晚了,我也一直在努力解决这个问题,最后按照这些步骤解决了这个问题:
在
manifest.JSON
文件中,设置"scope": "."
和"start_url": "./"
。这表明您正在使用子目录。然后使用 CLI 命令构建项目
ng build --prod --baseHref=/Your_sub_directory_name/
最后将
dist
文件夹内容粘贴到指定的 Your_sub_directory_name
IIS 位置。然后刷新页面等待注册service worker,你可以在chrome的开发者工具的application选项卡中查看。一旦注册了 service worker,只需切换到离线模式,您的页面就可以在离线状态下正常工作。
Vinod 构建的 --baseHref=/mypath/ 为我指明了方向,谢谢!! 更多观察:
Angular 的 service-worker 似乎对 URL 区分大小写:如果在你的 ngsw.json 中你有 /MyPath/index.html 并且有人在运行页面时键入 mysite.com/mypath,则 service worker 失败。可恶的!根据规范,URL 的路径区分大小写,但是......
如果你使用 IIS:只是停止一个 网站 不会模拟 Angular service-worker 的离线情况。您将不得不停止整个 IIS。
根据我的观察,清单对于服务工作者/离线功能并不重要。您可以在 index.html 中将其注释掉。仅安装时需要。 Vinod 的价值观为此发挥了作用。
新手了解情况的有用步骤:
构建后检查 dist 中的 ngsw.json。所有文件都应以 /mypath/.
在 Chrome 中加载后,检查 DevTools/Application/Cache storage。条目“ngsw:/...:assets:app:cache”应该包含 ngsw.json 中带有 /mypath/ 前缀的文件。
按 F5 时打开 DevTool/Network 也可以查看文件的来源。对于离线工作的文件,刷新应该在大小列中显示 (ServiceWorker)。
我发现将 baseHref 放在 angular.json 中也适用于这种情况。在 outputPath 旁边有意义。
"outputPath": "D:/somewhere/WwwRoot/full/public/path",
"baseHref":"/full/public/path/",
对于 Angular v10.24.0,我做了以下事情:
ng 构建 --prod
在 IIS 上添加新网站
复制所有文件到网站文件夹
为新添加的网站添加MIME类型。
文件扩展名:.webmanifest
MIME 类型:application/manifest+json
我没有更改 manifest.json 或 baseHREF。添加 MIME 类型后,一切都按预期工作。
请参考如何添加MIME类型
我面临的问题是,在 Azure 上部署后,Angular PWA 服务工作人员不会在离线模式下从缓存中获取 api 响应,而且创建的清单在部署版本中显示错误,而在本地主机中一切正常。 对我来说主要问题是:默认情况下,IIS 不提供任何在其 (IIS) 核心设置中没有与之关联的 MIME 映射的文件。 要应对这一挑战,您需要将 .webmanifest 文件扩展名映射到其适当的 MIME 类型。 为此,您需要将以下内容添加到 web.config 文件中:
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
这有助于 azure 理解我们的 manifest.webmanifest 文件,否则它将无法理解。在此之后,它能够检测到解决我的两个问题的 manifest.webmanifest 文件,在离线模式下从缓存中获取响应,并且现在我的 Angular PWA 应用程序可以使用应用程序图标和所有其他功能安装清单文件。