当前位置:网站首页>PWA (Progressive Web App)
PWA (Progressive Web App)
2022-07-05 10:44:00 【Code Bruce Lee】
PWA (Progressive Web App)
1、 brief introduction
It's an idea , Use a variety of techniques to enhance web app The function of , Can make the experience of the website better , It can simulate some native functions , such as : Notification push
Js-to-Native And with PWA The first pure web application , Will be squeezed in two directions Hybrid Living space of , Digest current Hybird The architecture mainly solves the problem
IOS Not yet PWA
2、 The next generation web application
2.1 advantage
webpack、Rollup Wait for the packing tool
Babel、PostCSS And other translation tools
TypeScript Etc. can be translated into Javascript Programming language
React、Angular、vue Etc web The front frame
isomorphism Javascript application
2.2 shortcoming
Network delay caused by downloading web resources
web Applications rely on browsers as portals
There is no good offline use scheme
There is no good news notification scheme
3、PWA Advantages and characteristics of
Significantly improve application loading speed
web Applications can be used in offline environments
web Applications can be added to the main screen like native applications
web Applications can initiate push notifications when they are not activated
web The integration ability of application and operating system is further improved
With progressive enhancement , Responsive user interface , Do not rely on network links , Class native application , Continuous updating , Security , Can be found , Revisit , Installable , The characteristics of connectivity
4、Web App Manifest
4.1 Introduce
Expose to the browser through a manifest file web Application metadata , Including the name 、icon Of URL etc. , For browser use , such as : Exposed to the operating system when added to the home screen or push notifications , To enhance web Application and operating system integration capabilities
It's like PWA Your household register is the same , Bearing the web The important task of application and operating system integration , It will continue to develop in the future , To satisfy web The need for high-speed evolution of applications
4.2 manifest.json
{
“short_name”: “Manifest Sample”,
“name”: “Web Application Manifest Sample”,
“icons”: [{
“src”: “launcher-icon-2x.png”,
“sizes”: “96x96”,
“type”: “image/png”
}],
“scope”:“/sample/”, // -> Defined web The browsing scope of the application , For example, those outside the scope of action url Will open the browser instead of in the current PWA Continue browsing in
“start_url”: “/sample/index.html”, // -> Defined a PWA Entry page for
“display”: “standalone”,
“orientation”: “landspace”, // -> Lock screen rotation
“theme_color”: “#000”, // -> Theme color
“background_color”: “#fff” // -> Background color
}
5、Service Worker
5.1 LocalServer
Give Way web The first attempt to use the app offline
Google In order to make web Applications can store data locally and execute offline , Deliberately 07 In, a browser was developed to enhance web application Goole Gears
stay Gears API in , Through to the LocalServer The module submits a list of cache files to realize offline support
5.2 Application Cache
Give Way web The second attempt to use the app offline
stay LocalServer Further development on the basis of
shortcoming : Not programmable , Unable to clean cache , There is almost no routing mechanism
})
7、PWA With native APP The difference of
03.png
8、PWA Yes web APP Influence
Experience level gradually to the original APP close , Available offline , Main screen icon entry , Start animation , Basically, it can be compared with native APP The experience is consistent
The change of development mode ,Web Consider offline mode and experience while developing
App The installation and update mechanism of brings changes to the operation mode ,url Can be up to , Applications can be linked , Not only rely on shopping malls to distribute applications
边栏推荐
- 数据类型、
- beego跨域问题解决方案-亲试成功
- 2021年山东省赛题库题目抓包
- [vite] 1371 - develop vite plug-ins by hand
- Go project practice - parameter binding, type conversion
- 2022年流动式起重机司机考试题库及模拟考试
- 【黑马早报】罗永浩回应调侃东方甄选;董卿丈夫密春雷被执行超7亿;吉利正式收购魅族;华为发布问界M7;豆瓣为周杰伦专辑提前开分道歉...
- Comparative learning in the period of "arms race"
- 微信核酸检测预约小程序系统毕业设计毕设(6)开题答辩PPT
- Solution of ellipsis when pytorch outputs tensor (output tensor completely)
猜你喜欢
Go language-1-development environment configuration
The first product of Sepp power battery was officially launched
基于昇腾AI丨爱笔智能推出银行网点数字化解决方案,实现从总部到网点的信息数字化全覆盖
Idea create a new sprintboot project
基于昇腾AI丨以萨技术推出视频图像全目标结构化解决方案,达到业界领先水平
磨砺·聚变|知道创宇移动端官网焕新上线,开启数字安全之旅!
How does redis implement multiple zones?
[observation] with the rise of the "independent station" model of cross-border e-commerce, how to seize the next dividend explosion era?
Go语言-1-开发环境配置
Based on shengteng AI Yisa technology, it launched a full target structured solution for video images, reaching the industry-leading level
随机推荐
Customize the left sliding button in the line in the applet, which is similar to the QQ and Wx message interface
Atcoder beginer contest 254 "e BFS" f st table maintenance differential array GCD "
2022年化工自动化控制仪表考试试题及在线模拟考试
Nuxt//
“军备竞赛”时期的对比学习
web安全
Go语言-1-开发环境配置
Ad20 make logo
DGL中异构图的一些理解以及异构图卷积HeteroGraphConv的用法
【DNS】“Can‘t resolve host“ as non-root user, but works fine as root
[vite] 1371 - develop vite plug-ins by hand
Share Net lightweight ORM
Timed disappearance pop-up
非技術部門,如何參與 DevOps?
2021年山东省赛题库题目抓包
TSQL–标示列、GUID 、序列
双向RNN与堆叠的双向RNN
Singleton mode encapsulates activity management class
beego跨域问题解决方案-亲试成功
基于昇腾AI丨爱笔智能推出银行网点数字化解决方案,实现从总部到网点的信息数字化全覆盖