使用angular / service-worker时，PWA应用程序无法在离线模式下工作

Question

我已经在服务器上部署了PWA应用程序，但是以某种方式它无法在脱机模式下工作。请找到URL https://notifystaging.securenow.in/app

在线时，服务人员的安装似乎很完美。请参考相同的屏幕截图。对于服务人员的安装，我正在使用@ angular / service-worker 请让我知道应该检查的可能的漏洞。

Answer 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. 然后只需刷新页面并等待注册服务人员，即可在chrome开发人员工具的应用程序标签中进行检查。一旦服务人员重新注册，只需切换到离线模式，页面就会在离线状态下正常工作。

Answer 2

我遇到的问题是，在Azure上部署后，Angular PWA服务工作程序无法在脱机模式下从缓存中获取api响应，并且所创建的清单在部署版本中显示错误，而在localhost中，它们都可以正常运行。 对我而言，主要问题是：默认情况下，IIS在（IIS）核心设置中不提供任何未与MIME映射相关联的文件。 为了解决此难题，您将需要将.webmanifest文件扩展名映射到其相应的MIME类型。 为此，您需要在web.config文件中添加以下内容：

request

这可以帮助azure了解我们的manifest.webmanifest文件，否则该文件将无法理解。此后，它能够检测到解决了我两个问题的manifest.webmanifest文件，并以脱机模式从缓存中获取响应，并且现在有了清单文件，我的Angular PWA应用程序可以使用应用程序图标和所有其他功能进行安装。您也可以参考我的问题，以获取有关ngsw-config.json文件等其他详细信息，After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode