# 初略Angular应用安装@angular/pwa > PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。 Author: DeathGhost Published: 2020-06-02 21:51:24 Category: angular Canonical: https://www.deathghost.cn/article/angular/76 Keywords: Angular, PWA, @Angular/pwa, manifest.webmanifest, Chrome, 渐进式Web应用程序, 添加到桌面, 安装, add to home screen, 缓存 在Chrome中浏览网页，常常会看到其搜索栏右上角有个➕安装图标，安装后，类似页面收藏到桌面一般。桌面会生成一个带图标的快捷键（移动端浏览器“add to home screen”或“添加到桌面”）。 这个可能需要了解下PWA(Progressive web apps，渐进式 Web 应用)，按其说明，貌似可与上次提到的[electron](https://www.deathghost.cn/article/javascript/42)相媲美了。 ![](https://www.deathghost.cn/public/upload/article/2020/06/02/1591112589184453.jpg) PWA - Progressive web apps，渐进式 Web 应用 ## ✨PWA 的优势 [PWA](https://www.deathghost.cn/article/angular/76) 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。 例如，web应用更加易于发现——相比于安装应用，访问一个网站显然更加容易和迅速，并且你可以通过一个链接来分享web应用。 下面看看在[Angular](https://www.deathghost.cn/catalog/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文件中看到： 注意，如果更改了manifest中的theme_color，那么对应这里也不要忘记修改。 若在安装过程中，项目启动状态，可能会出错 Cannot read property 'id' of undefined at registerNgModuleType 重启下项目即可。 ![PWA 示例图](https://www.deathghost.cn/public/upload/article/2020/06/03/1591161435519533.jpg) PWA 示例图 ![PWA 示例图](https://www.deathghost.cn/public/upload/article/2020/06/03/1591161479870460.jpg) 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。 ## Related - Previous: [Angular路由预加载](https://www.deathghost.cn/article/angular/73) - Next: [Angular自定义预加载策略](https://www.deathghost.cn/article/angular/88)