[Angular] Upgrade existing Angular app to Progressive Web App
If you alread have an existing Angular application and want to upgrade to progressive web app.
1. Install @angular/service-worker:
npm i --save @angular/service-worker
2. Create a file: src/ngsw-config.json
{
"index": "./index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
]
}
3. Create a src/manifest.json file:
{
"dir": "ltr",
"lang": "en",
"name": "Application Name",
"scope": "/",
"display": "fullscreen",
"start_url": "http://localhost:8000/",
"short_name": "Application name",
"theme_color": "transparent",
"description": "All about your app",
"orientation": "any",
"background_color": "transparent",
"related_applications": [],
"prefer_related_applications": false,
"icons": [
{
"src": "/favicon.ico",
"sizes": "16x16 32x32"
},
{
"src": "/assets/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "/assets/android-icon-48x48.png",
"sizes": "48x48",
"type": "image.png",
"density": "1.0"
},
{
"src": "/assets/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "/assets/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "/assets/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "/assets/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
]
}
4. Update .angular-cli.json file:
{
"apps": [
{
"root": "src",
...
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
},
"serviceWorker": true
}
}
5. Import ServiceWorkerModule in app.module.ts file:
import {ServiceWorkerModule} from '@angular/service-worker'; @NgModule({
declarations: [
AppComponent
],
imports: [
...
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
],
...
bootstrap: [AppComponent]
})
export class AppModule {
}
'ngsw-worker.js' will be created in dist folder after we build the application in production mode.
6. Run:
ng build --prod
7. cd to dist folder, run in local server.
[Angular] Upgrade existing Angular app to Progressive Web App的更多相关文章
- 说说 PWA 和微信小程序--Progressive Web App
作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...
- [io PWA] keynote: Launching a Progressive Web App on Google.com
Mainly about Material design (effects / colors / flashy stuff) Components (web components / polymer) ...
- (转)PWA(Progressive Web App)渐进式Web应用程序
PWA 编辑 讨论 PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化 ...
- Progressive web app理念及发展前景
前一段时间微信推出微信小程序进行公测,着实火了一把,博得了大众的眼球,不明真相的吃瓜观众们纷纷围观,所谓的“微信小程序”,通俗的讲就是一种不需要下载安装即可使用的应用程序,脱离于app商店依托于浏览器 ...
- PWA(Progressive Web App)入门系列:(一)PWA简单介绍
前言 PWA做为一门Google推出的WEB端的新技术,长处不言而喻.但眼下对于相关方面的知识不是非常丰富.这里我推出一下这方面的新手教程系列.提供PWA方面学习. 什么是PWA PWA全称Progr ...
- Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗?
什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...
- 原生APP与移动Web App的比较
中国手机网民已超4.5亿,智能机用户超过3.8亿,中国移动互联网市场产值已超过712.5亿元,手机营销是未来必然趋势,而App恰恰是这个趋势下的一个强有力的营销工具: App已有两个主要的方向:原生A ...
- Progressive Web App
下一代 Web 应用? 近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展. 包括但不限于基于 N ...
- Native App开发 与Web App开发(原生与web开发优缺点)
Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...
随机推荐
- php实现简单验证码的功能
php实现简单验证码的功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...
- global cache cr request
当一个进程访问需要一个或者多个块时,它会首先检查自己的CACHE是否存在该块,如果发现没有,就会先通过global cache赋予这些块 共享访问的权限,然后再访问.假如,通过global cache ...
- React-Native Android开发沉思录
在runServer.js中有声明如何启动http服务: 查看端口占用情况 而且在系统管理器中,根本找不到PID为7956的应用,那能更改端口吗?在server.js中有声明: module.expo ...
- 23. Merge k Sorted Lists[H]合并k个排序链表
题目 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity ...
- Hadoop MapReduce编程 API入门系列之网页排序(二十八)
不多说,直接上代码. Map output bytes=247 Map output materialized bytes=275 Input split bytes=139 Combine inpu ...
- Java多线程编程那些事:volatile解惑--转
http://www.infoq.com/cn/articles/java-multi-thread-volatile/ 1. 前言 volatile关键字可能是Java开发人员“熟悉而又陌生”的一个 ...
- Entity Framework 的懒加载、预先加载、显示加载
1.新建两个实体,一个班级有多个学生 public class Student { public int StudentId { get; set; } public string StudentNa ...
- SQLServer 添加序号列
select ROW_NUMBER()OVER(ORDER BY 用来排序的列的列名),XXX,XXX from XXX 按照原始顺序: ROW_NUMBER()OVER(ORDER BY (sele ...
- lua lfs库
lfs.attributes(filepath [, aname]) 获取路径指定属性 lfs.chdir(path) 改变当前工作目录,成功返回true,失败返回nil加上错误信息 l ...
- java exception 异常错误记录
//异常:Could not obtain transaction-synchronized Session for current thread 做定时器的时候用ApplicationContext ...