渐进式 Web 应用示例

这些演示 PWA 演示如何使用在设备上安装时可以逐步增强应用的功能和 API。

入门时使用的第一个示例是 温度转换器示例。

有关示例，请参阅自述文件;某些示例需要设置，如果只是单击下面的应用链接，则不起作用。

其中大多数 PWA 演示都在 MicrosoftEdge/Demos 存储库中。

1DIV

1DIV 是一个 CSS 编辑器，允许用户通过只创建一个 HTML 元素和 CSS 代码来创建绘图。

• 应用
• /1DIV/ - 源代码目录。
  • 自述文件

1DIV 使用以下功能：

Email客户端

演示如何使用 PWA 协议处理程序的模拟电子邮件客户端 PWA。

• 应用
• /email-client/ - 源代码目录。
  • 自述文件

Email客户端使用以下功能：

应用程序标题元标记

用于展示元标记的 application-title 演示 Web 应用。

• 应用
• /pwa-application-title/ - 源代码目录。
  • 自述文件

应用程序标题元标记使用以下功能：

温度转换器

转换温度的简单 PWA 演示应用。 请参阅 温度转换器示例。

• 应用
• /temperature-converter/ - 源代码目录。
  • 自述文件

PWA 安装程序

使用 Web 安装 API 安装其他 PWA 的 PWA。 还使用 CSS Masonry。

• PWA 安装程序应用
• /pwa-installer/ - 源代码目录。
  • 自述文件

PWA 安装程序使用以下功能：

另请参阅：

• Microsoft Edge：实时 Web 安装 API 开发试用版
• Web 安装 API - 解释器。

计时器 PWA

具有 “设置计时器 ”按钮，可以设置计时器的持续时间。

• 应用
• /pwa-timer/ - 源代码目录。
  • 自述文件

PWA 要执行的作

在浏览器中本地创建任务列表，或通过安装应用创建任务列表。 单击呈现的演示中的 “关于” 链接。

• 应用
• /pwa-to-do/ - 源代码目录。
  • 自述文件

PWAmp

PWAmp 是播放本地和远程音频文件的桌面音乐播放器。

• 应用
• /pwamp/ - 源代码目录。
  • 自述文件

PWAmp 使用以下功能：

wami

wami 可以应用一系列图像作步骤，例如裁剪、调整大小、旋转或添加对批量图像的效果。

• 应用
• /wami/ - 源代码目录。
  • 自述文件

wami 使用以下功能：

我的电影列表

通过这个简单的 PWA 演示，可以搜索制作电影并将其存储在本地。

• 应用程序
• /movies-db-pwa/ - 源代码目录。
  • 无自述文件。

“我的电影列表”使用以下功能：

我的轨迹

“我的轨迹”可用于在地图上可视化 GPS 轨迹 (*.gpx 文件) 。

• 应用程序 - 请参阅有关设置的自述文件。
• /mytracks/ - 源代码目录。
  • 自述文件

“我的轨迹”使用以下功能：

BPM Techno

BPM Techno 通过设备麦克风分析音频，并显示实时每分钟节拍数 (BPM) 计数器。

• 应用
• /bpm-counter/ - 源代码目录。
  • 自述文件

此演示位于 webmaxru/bpm-counter 存储库中。

BPM Techno 使用以下功能：

Webboard

Webboard 是一个绘图应用程序。

• 应用
• /web-whiteboard/ - 源代码目录。
  • 自述文件

此演示位于 pwa-builder/web-whiteboard 存储库中。

Webboard 使用以下功能：

另请参阅

• 在 DevTools 的示例代码中将 Edge Demos 存储库克隆到驱动器。