初略Angular应用安装@angular/pwa

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

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

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

PWA - Progressive web apps，渐进式 Web 应用

✨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

重启下项目便可。

PWA 示例图

PWA 示例图

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。