初略Angular应用安装@angular/pwa

这篇文章发布于 2020-06-02 21:51:24

由 DeathGhost 编辑，归类于 angular » 当前评论 0 条。

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。

在Chrome中浏览网页，常常会看到其搜索栏右上角有个➕安装图标，安装后，类似页面收藏到桌面一般。桌面会生成一个带图标的快捷键（移动端浏览器“add to home screen”或“添加到桌面”）。

这个可能需要了解下PWA(Progressive web apps，渐进式 Web 应用)，按其说明，貌似可与上次提到的electron相媲美了。

✨PWA 的优势

PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。

例如，web应用更加易于发现——相比于安装应用，访问一个网站显然更加容易和迅速，并且你可以通过一个链接来分享web应用。

下面看看在Angular应用中的配置安装。

📦安装@angular/pwa

添加且修改文件信息如下(本示例于Angular9.x版本)：

CREATE ngsw-config.json (620 bytes)
CREATE src/manifest.webmanifest (1358 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (4234 bytes)
UPDATE package.json (1406 bytes)
UPDATE src/app/app.module.ts (1492 bytes)
UPDATE src/index.html (674 bytes)

然后修改图标为自己的站点logo标识图。同时manifest.webmanifest文件相关参数。

每个PWA有一个配置清单（manifest.webmanifest 或 manifest.json），通过上述 ng add命令，Angular CLI已经自动创建了一个。我们会在index.html文件中看到：

<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">

注意，如果更改了manifest中的theme_color，那么对应这里也不要忘记修改。

若在安装过程中，项目启动状态，可能会出错

Cannot read property 'id' of undefined at registerNgModuleType

重启下项目即可。

Chrome浏览器打开网址后，PC（电脑）端将会在搜索栏右侧出现“➕安装”提示；移动端则会在底部弹出“Add xxx to Home screen”。安装或点击添加即可在桌面生成快捷方式。

若出现 manifest.webmanifest 或 ngsw-worker.js （A bad HTTP response code (404) was received when fetching the script）404未找到，可以看看项目根路径配置，同时注意ngsw-config.json中"index": "./index.html"，默认“/index.html”。

最后，打包至服务器，另外，本地环境可运行测试，线上环境支持需要HTTPS。