【问题标题】:Angular PWA in IIS subfolder not work offlineIIS 子文件夹中的 Angular PWA 无法脱机工作
【发布时间】:2020-01-19 10:19:06
【问题描述】:

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

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

我在网站上使用 https。

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

在发布到 IIS 子文件夹后,是否有人提供 angular pwa 应用程序脱机工作的功能演示?

【问题讨论】:

  • 你明白了吗?

标签: angular publish progressive-web-apps subdirectory offline


【解决方案1】:

我知道我对此很晚,我也一直在努力,最后按照以下步骤解决了这个问题:

  1. manifest.JSON 文件中,设置"scope": ".""start_url": "./"。这表明您正在使用子目录。

  2. 然后使用CLI命令ng build --prod --baseHref=/Your_sub_directory_name/构建项目

  3. 最后将dist 文件夹内容粘贴到您指定的Your_sub_directory_name IIS 位置。

  4. 然后刷新页面等待注册service worker,你可以在chrome开发者工具的application tab中查看。重新注册 Service Worker 后,只需切换到离线模式,您的页面就可以在离线状态下正常工作。

【讨论】:

  • 是的,它有效 - 谢谢。应该作为 pwa 文档的一部分。而且 - 我必须将 manifest.webmanifest 添加到 IIS 上的 MIME 类型中 - 请参阅 stackoverflow.com/questions/49566446/…
  • 很高兴帮助并感谢分享清单 MIME 类型设置,这些对于处理 IIS 的人很重要。
  • 我仍然无法在本地 IIS 上进行测试。我正在使用 Angular 9,当我提供 SSR 版本(npm run serve:ssr)时,PWA 工作正常。该项目托管在 Windows 10 上的本地 IIS 10 上,除了服务人员未注册外,一切正常。我的猜测是需要有效的 SSL 证书。如果是这样,SSR 版本如何使用 express-engine 在 HTTP 上工作?
【解决方案2】:

用于从 Vinod 构建的 --baseHref=/mypath/ 引导了我,谢谢!! 更多观察:

  • Angular 的 service-worker 似乎在 URL 上区分大小写:如果在您的 ngsw.json 中有 /MyPath/index.html 并且有人运行输入 mysite.com/mypath 的页面,则 service-worker 会失败。可恶的!根据规范,URL 的路径 区分大小写,但是...

  • 如果您使用 IIS:仅停止 网站 不会模拟 Angular 服务人员的离线情况。您将不得不停止整个 IIS。

  • 根据我的观察,清单对于服务工作者/离线功能无关紧要。您可以在 index.html 中将其注释掉。仅安装时需要。 Vinod 的价值观为此发挥了作用。

新手了解正在发生的事情的有用步骤:

  1. 构建后检查 dist 中的 ngsw.json。所有文件都应以 /mypath/ 为前缀。

  2. 在 Chrome 中加载后检查 DevTools/Application/Cache 存储。条目“ngsw:/...:assets:app:cache”应该包含来自 ngsw.json 的文件,带有 /mypath/ 前缀。

  3. 在按下 F5 时打开 DevTool/Network 查看文件来自何处。对于离线工作的文件,刷新应该在大小列中显示 (ServiceWorker)。

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

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

【讨论】:

    【解决方案3】:

    我面临的问题是,在 Azure 上部署后,Angular PWA 服务工作者不会在离线模式下从缓存中获取 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

    【讨论】:

      【解决方案4】:

      对于 Angular v10.24.0,我执行了以下操作:

      1. ng build --prod

      2. 在 IIS 上添加新网站

      3. 将所有文件复制到网站文件夹

      4. 为新添加的网站添加 MIME 类型。

        文件扩展名:.webmanifest

        MIME 类型:application/manifest+json

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

      请参考How to add MIME type

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-06-03
        • 1970-01-01
        • 2019-06-06
        • 2011-04-11
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多