Angular IIS 子文件夹中的 PWA 无法脱机工作

Question

当我将 angular pwa 应用程序发布到 IIS 中的子文件夹时，pwa 应用程序无法离线运行。

ng build --prod --baseHref=/subfolder/ 没有帮助。

我在网站上使用 https。

如果应用程序未发布到 IIS 的根目录而是发布到 IIS 的子文件夹，如何准确地重新配置 angular pwa 应用程序以脱机工作？

有人有 angular pwa 应用程序在发布到 IIS 子文件夹后脱机工作的功能演示吗？

Answer 1

我知道我已经很晚了，我也一直在努力解决这个问题，最后按照以下步骤解决了这个问题：

在 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，只需切换到离线模式，您的页面将在离线状态下正常工作。

Answer 2

用于从 Vinod 构建的 --baseHref=/mypath/ 为我指明了方向，谢谢！！更多观察：

Angular 的服务人员似乎在 URL 上区分大小写：如果在你的 ngsw.json 中你有 /MyPath/index.html 并且有人运行页面键入 mysite。com/mypath service worker 失败。可恶的！根据规范，URL 的路径 区分大小写，但是...
如果您使用 IIS：仅停止网站不会模拟 Angular 服务工作者的离线情况。您将不得不停止整个 IIS。
根据我的观察，清单对于服务工作人员/离线功能并不重要。您可以在 index.html 中将其注释掉。仅安装时需要。 Vinod 的价值观为此发挥了作用。

新手了解最新情况的有用步骤：

构建后在 dist 中检查 ngsw.json。所有文件都应以 /mypath/.
加载到 Chrome 后检查 DevTools/Application/Cache 存储。条目 "ngsw:/...:assets:app:cache" 应包含来自 ngsw.json WITH /mypath/ 前缀的文件。
在按 F5 时打开 DevTool/Network 也可以查看文件的来源。对于脱机工作的文件，刷新应在大小列中显示 (ServiceWorker)。

我发现将 baseHref 放在 angular.json 中也适用于这种情况。在 outputPath 旁边有意义。

  "outputPath": "D:/somewhere/WwwRoot/full/public/path",
  "baseHref":"/full/public/path/",

Answer 3

我遇到的问题是，在 Azure 上部署后，Angular PWA service worker 在离线模式下不会从缓存中获取 api 响应，而且创建的清单在部署时显示错误版本，而在 localhost 中一切正常。对我来说主要问题是：默认情况下，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 应用程序，可以使用应用程序图标和所有其他特征。您还可以参考我的问题以获取有关 ngsw-config.json 文件的其余详细信息和 web.config 文件等的完整代码，After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode

Answer 4

对于 Angular v10.24.0 我做了以下操作：

ng build --prod
在 IIS 上添加新网站
将所有文件复制到网站文件夹
为新添加的网站添加 MIME 类型。

文件扩展名：.webmanifest

MIME 类型：application/manifest+json

我没有更改 manifest.json 或 baseHREF。添加 MIME 类型后一切正常。

请参考

Angular IIS 子文件夹中的 PWA 无法脱机工作

Angular PWA in IIS subfolder not work offline

angular

publish

progressive-web-apps

subdirectory

offline