使用angular/service-worker时，PWA应用程序不能在脱机模式下工作

Question

我已经在服务器上部署了PWA应用程序，但不知何故它在脱机模式下无法工作。请查找https://notifystaging.securenow.in/app地址

当在线时，服务工作者似乎得到了完美的安装。请参考屏幕截图以获取相同信息。对于service worker安装，我使用@angular/service-worker请让我知道我应该检查的可能的循环漏洞。

​

​

​

​

Answer 1

我知道我在这一点上太晚了，我也一直在努力，最终按照以下步骤解决了这个问题：

1. 在manifest.JSON文件中，设置"scope": "."和"start_url": "./"。这表明您正在使用sub-directory.
2. Then构建项目，使用CLI命令ng build --prod --baseHref=/Your_sub_directory_name/
3. And最终将dist文件夹内容粘贴到您指定的Your_sub_directory_name IIS位置(或您正在使用的任何服务器)。
4. 然后只需刷新页面并等待注册服务工作者，您可以在chrome的开发人员工具的应用程序选项卡中检查这一点。一旦服务工作者注册，只需切换到脱机模式，页面将在脱机状态下正常工作。

Answer 2

我面临的问题是，在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文件等的其余详细信息，After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode