将门户构建为渐进式 Web 应用

备注

先决条件

作为渐进式 Web 应用启用门户

使用 Power Apps 门户工作室配置您的渐进式 Web 应用 (PWA)。 您可以启用或禁用 PWA 功能、自定义 PWA 设置,并准备创建应用包,来发布到相应的设备商店(如果您愿意)。

  1. 登录到 Power Apps

  2. 在左侧窗格上,选择应用

  3. 从应用列表中,选择您的门户。

  4. 选择编辑

  5. 在门户工作室中,选择渐进式 Web 应用

    门户工作室中的渐进式 Web 应用图标。

  6. 选择启用 PWA

    从门户工作室启用 PWA 功能。

打造您的应用品牌

您可以使用自定义选项来更改应用名称、起始页面、颜色等,从而创建您自己的品牌 PWA。

备注

在 iOS 设备上,PWA 的图标将显示为缩略图,自定义的初始屏幕不会显示。

  1. 在门户工作室中,选择渐进式 Web 应用

  2. 自定义下,选择自定义 PWA

  3. 为您的门户更新以下 PWA 设置。

    设置 描述
    称谓 将显示在移动设备和应用商店中的门户 PWA 的名称。
    说明 将显示在移动设备和应用商店中的门户 PWA 的说明。
    应用的起始页 通过 PWA 打开时门户的起始页。
    初始屏幕背景 加载 PWA 时初始屏幕的背景颜色。
    应用图标 将显示在移动设备和应用商店中的应用的图标。
    注意: 支持 .jpg、.jpeg、.png 格式,最大上传大小为 5 MB。 图标的大小必须为 512 × 512 像素。

    自定义 PWA 设置,如标题、说明和颜色。

    备注

    自定义 PWA 后,选择浏览网站清除缓存。 这会让更改立即反映出来。

管理离线行为

当使用的设备离线或与互联网断开连接时,PWA 支持流畅的导航体验。 您可以选择门户中可离线使用的页面(只读),以及未启用离线访问的其余门户功能的消息页面。

为门户 PWA 配置离线页面

  1. 在门户工作室中,选择渐进式 Web 应用

  2. 选择自定义 PWA

  3. 离线行为下,选择管理离线页面

    选择离线模式页面。

  4. 选择您希望允许用户在离线使用 PWA 时访问的页面。

    管理离线页面。

备注

在为 PWA 页面配置离线访问时,请务必考虑用户设备的存储限制。 当离线 PWA 访问的存储要求超过设备上的可用存储时,整个门户将无法进行离线访问。 我们建议您测试离线访问用户体验,并仅缓存对您的用户最有帮助和最重要的页面。 请记住,离线页面只能显示信息;包含要填写或运行查询的窗体的页面在离线时将无法工作。

设置离线消息页面

当设备离线时,您配置为离线消息页面的页面会在用户尝试访问尚未启用离线访问的页面时出现。

  1. 在门户工作室中,选择渐进式 Web 应用

  2. 自定义下面,选择离线消息页面

    配置离线消息页面。

  3. 像自定义任何其他门户页面一样自定义此页面。

  4. 更改页面模板以满足您的业务需求。

    在门户工作室中自定义离线消息页面。

备注

您无法更改离线页面的标题部分 URL(“/default-offline-page”)字段。 如果缺少离线页面,将向用户显示默认离线页面。

提示

配置离线 PWA 体验后,选择浏览网站清除缓存。 这会让更改立即反映出来。

在离线模式下测试门户

启用离线页面后,您现在可以在离线模式下使用移动设备,并浏览已启用离线访问的不同页面。

  1. 在在线模式下使用移动设备上的 Web 浏览器浏览到您的门户。

  2. 选择添加到主屏幕或类似选项。 例如,在 Android 设备上,此选项可能为 + 添加到 > 应用屏幕

    在移动设备上将 PWA 添加到主页。

    备注

    此操作会下载已启用离线浏览的门户页面。 这可能需要一段时间,具体取决于网络带宽和为离线浏览选择的页面大小。

  3. 在您的移动设备中启用离线模式。

  4. 从主屏幕打开您的门户。 您会在顶部看到一条通知,提醒您正在离线模式下浏览。 如果您选择任何尚未启用离线浏览的页面,将会出现离线消息。

    PWA 应用的离线模式下的只读页面。 未在 PWA 应用中连接到 Internet 页面。

分发应用

使用浏览器分发您的应用

作为 PWA 启用了您的门户后,您的用户可以将 Power Apps 门户作为应用固定到其设备上的主屏幕。 除了所有外形规格(移动设备、台式机和平板电脑)外,所有平台(Android、iOS、Chromebook 和 Windows)都支持此功能。

通过应用商店分发您的应用

您可以为门户的 PWA 创建一个应用包,并将该包发布到不同的应用商店,如 Microsoft Store 和 Google Play。

要创建应用包,请转到门户工作室。 在应用包下,选择创建应用包

打开 PWA 生成器在门户工作室内创建应用包。

您将被带到 PWA 生成器网站,在那里,您可以为各种应用商店创建应用包。 使用 PWA 生成器创建的包包含:

  • 要在各自应用商店中使用的 PWA 的应用包。

  • 有关发布应用的分步文档。

有关更多详细信息,请转到 PWA 资源中心

Android 的其他注意事项

对于 Android 平台,您还可以使用更新 android 证书选项更新 Android 证书。

门户工作室中用于更新 Android 证书的菜单项。

更新标题和 SHA-256 证书指纹,以更新用于证明 PWA 所有权的数字资产链接文件 (assetlinks.json)。

更新 Android 证书详细信息。

高级配置

门户的 PWA 功能使用可以使用门户管理应用进行更新的以下配置。

备注

我们建议您使用 Power Apps 门户工作室来使用 PWA 功能,而不是使用门户管理应用进行自定义。

类型 名称 描述
站点设置 PWAFeature 用于为门户启用 PWA 的网站设置 { "status": "enable" }

{ "状态": "禁用" }
Web 文件 PWAManifestjson.en-US.json PWA 清单文件存储为此 JSON Web 文件。 此 Web 文件包含 PWA 的所有与自定义相关的属性(如应用名称和初始屏幕颜色)。
站点标记 默认离线页面 此站点标记定义用户离线时要显示的页面。 默认情况下,它指向默认离线页面。 “默认离线页面”

另请参阅

作为渐进式 Web 应用的门户概述
渐进式 Web 应用概述 (PWA)

备注

您能告诉我们您的文档语言首选项吗? 进行简短调查。(请注意,此调查是英文版调查)

此调查大约需要七分钟。 不会收集个人数据(隐私声明)。