👻 DeathGhost

初略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

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

当前共获取0条评论。

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕

"新码笔记"微信公众号🤳

Web前端实时信息尽在掌握之中

🟢同意 🔴拒绝