10、构建渐进式Web应用（PWA）电商应用及公寓审计原生应用

构建渐进式Web应用（PWA）电商应用及公寓审计原生应用

1. 构建PWA电商应用

在构建PWA电商应用时，我们先使用生产模式构建应用，并通过 http-server 来提供服务，之后再次对应用进行审计。最初应用的得分从46分提升到了92分，此时剩下的两个待完成检查项是使用HTTPS以及减少 manifest.json 文件中 short_name 的字符数。我们将 short_name 更新为 es 来替代 electronic-store ：

{
    ...
    "short_name": "es",
    ...
}

目前，让应用在PWA评分中达到100分的唯一关键点是使用HTTPS而非HTTP，后续我们会使用Firebase来部署应用并使用HTTPS。

1.1 离线支持

为了验证应用的离线支持能力，我们可以手动将网络切换到离线模式，通过开发者工具实现这一操作。在Chrome开发者工具中，进入“Network”标签并选择“Offline”模式。但此时我们发现应用无法显示产品，购物车图标显示为 shopping_cart ，这是因为我们没有在 ngsw-config.json 文件中为这些请求添加缓存机制。下面是更新后的 ngsw-config.json 代码：