PWA (Progressive Web App)

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

 ​   CACHE MANIFEST  ​  CACHE:  index.html  main.js 5.3 Service Worker Introduce Give Way web The third attempt to use the app offline programmable Web Worker Like a client agent between browser and network , Can intercept 、 Handle 、 Respond to the flow of HTTP request coordination Cache Storage API, Can manage freely HTTP Request file granularity caching It's support PWA As the next generation web The core technology of application model The future web The inevitable place for the engineering of Client Technology , Bring an architectural revolution of offline priority 5.4 Service Worker Life cycle 01.png 5.5 Service Worker Installation  // sw.js  self.oninstall = (e) => {  e.waitUntil(  caches.open('installation').then(cache => cache.addAll([  './',  './styles.css',  './script.js'  ]))  )  } 5.6 Service Worker Use offline cache  // sw.js  self.onfetch = (e) => {  const fetched = fetch(e.request)  const cached = caches.match(e.request)  e.respondWith(  fetched.catch(_ => cached)  )  } 5.7 Service Worker The cache strategy of 02.png 6、Push Notification Push API The emergence of makes push services have the ability to web The ability to apply push messages Push API Do not rely on web Applications and browsers UI Survive , So even in web When the application and browser are not opened by the user , You can also accept the push message through the background process and call Notification API Send notification to users  // sw.js  self.addEventListener('push', event => {  event.waitUntil(  self.registration.showNotification('Hey!')  )  })  self.addEventListener('notificationclick', event => {  event.notification.close()  })  self.addEventListener('notificationclose', event => { 

})
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