初略Angular应用安装@angular/pwa

这篇文章由 DeathGhost 编辑,发布于

归类于 Angular » 👋分享到微博 当前评论 0 条。

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.webmanifestmanifest.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 示例图
PWA 示例图
PWA 示例图

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

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

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


Angular PWA @Angular/pwa manifest.webmanifest Chrome 渐进式Web应用程序 添加到桌面 安装 add to home screen 缓存

上一篇:

下一篇: