Angular PWA使用的使用的Demo示例示例
什么是什么是PWA
PWA(Progressive Web App)利用TLS,webapp manifests和service workers使应用程序能够安装并离线使用。 换句话
说,PWA就像手机上的原生应用程序,但它是使用诸如HTML5,JavaScript和CSS3之类的网络技术构建的。 如果构建正
确,PWA与原生应用程序无法区分。
PWA 的主要特点包括下面三点:
可靠 – 即使在不稳定的网络环境下,也能瞬间加载并展现
体验 – 快速响应,并且有平滑的动画响应用户的操作
粘性 – 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面
PWA 本身强调渐进式,并不要求一次性达到安全、性能和体验上的所有要求,开发者可以通过 PWA Checklist 查看现有的特
征。
创建项目创建项目
Step 1.创建项目创建项目
我们使用Angular CLI来创建PWA程序,首先我们安装。
npm install -g @angular/cli
npm install -g @angular/service-worker
首先我们需要确定angular/cli版本在1.6.0或以上。
最新版本6.0.0将无效,应该后续会修复。
.angular-cli.json文件被更名为angular.json
如果是全新项目如果是全新项目
可以使用angular/cli帮你创建一个Angular Service Worker项目:
ng new PWCat --service-worker
就这样,cli会帮你安装@angular/service-worker,在.angular-cli.json中启用serviceWorker,为app注册serviceWorker和生成默认配置
的ngsw-config.json。
生成的文件中,注意检查一下app.module,ts,其中serviceWorkerModule注册的时候应该是这样:
imports: [
// other modules...
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
],
在Angular 6.0.0中ng new PWCat --service-worker已经被废弃,使用下面的命令为项目添加pwa
ng add @angular/pwa
执行后的结果
CREATE ngsw-config.json (392 bytes)
UPDATE angular.json (3464 bytes)
UPDATE package.json (1446 bytes)
UPDATE src/app/app.module.ts (851 bytes)
如果是已有项目如果是已有项目
对于老版本,也就是Angular 6.0.0以前:
安装@angular/service-worker:
npm install @angular/service-worker --save
在项目目录下面新增ngsw-config.json文件: