Getting started with Progressive Web apps

evolution of PC and mobile development technologypc direction, from the client to the rich client, to the now widely used web. moving direction, the current main or primary application and mobile WEB,PWA related technology is the future development direction. the concept of PWAthe experience of the Progressive Web App (translated as: Progressive Web App) combines the benefits of network applications with the benefits of native applications. Users can appreciate the benefits of their first visit in the browser, because no installation is required. As users increase their relationship with the app over time, their functionality becomes more powerful. It can load quickly, send related push notifications, have desktop icons, and be loaded in a top-level full-screen experience, even on unreliable networks. Features of PWA

• Progressive Type -For all users who choose any browser, because it is developed as a core tenet of progressive enhancement.

• Adaptive -For any model: desktop, mobile, tablet or any future device.

• Connection independence -ability to work in offline or low-quality network situations with the help of service worker threads.

• Similar applications -because they are developed on the basis of the app Shell model, they have an application-style interaction and navigation that gives the user an application-like familiarity.

• Continuous update -keep up-to-date with the role of the service worker thread update process.

• Secure -provided via HTTPS to prevent prying eyes and ensure that the content is not tampered with.

• Discoverable -list and service worker thread registration scopes enable search engines to find them and identify them as "apps."

• Re-interaction -simplifies re-interaction with features such as push notifications.

• Installable -Users can avoid the hassle of using the store and "keep" the apps that are most useful to them directly on the home screen.

• Links -Easy to share via URLs without complicated installation.

PWA vs Native AppNative app: relies on running platform operating systems, such as Android or iOS, to submit apps to the App Store, such as the Apple App Store or Google Play store, the big app stores in the country. PWA: Does not relate to the platform operating system, runs in the browser, uses standard Web development technology, does not need to submit to the store for audit, publish is ready to use. PWA vs Web AppWeb App: Use standard Web technology, but in the process of offline, push on the lack of, can not generate desktop icons and so on. PWA: Using standard Web development techniques, you can support offline availability, update and cache through service workers, and use the App Shell Model Foundation development, interface and interactive similar applications. Support for push, in the future also support the operation of the device (call camera, read the gyroscope, etc.). Key technologies for PWA ManifestA Web application manifest is a JSON file that you, the developer, can use to control how a web app or website is displayed to the user in the area where the user wants to see the app, such as the home screen of the mobile device, to indicate what features the user can launch, and to define how it will look at startup. The Web App manifest provides the ability to save site bookmarks to the home screen of the device. A manifest.json example of PWA:

{  "Name": "Hackerweb",  "Short_name": "Hackerweb",  "Start_url": ".",  "Display": "Standalone",  "Background_color": "#fff",  "description": "A simply readable Hacker News app.",  "Icons": [{    "src": "Images/touch/homescreen48.png",    "Sizes": "48x48",    "Type": "Image/png"  }, {    "src": "Images/touch/homescreen72.png",    "Sizes": "72x72",    "Type": "Image/png"  }, {    "src": "Images/touch/homescreen96.png",    "Sizes": "96x96",    "Type": "Image/png"  }, {    "src": "Images/touch/homescreen144.png",    "Sizes": "144x144",    "Type": "Image/png"  }, {    "src": "Images/touch/homescreen168.png",    "Sizes": "168x168",    "Type": "Image/png"  }, {    "src": "Images/touch/homescreen192.png",    "Sizes": "192x192",    "Type": "Image/png"  }],  "Related_applications": [{    "Platform": "Web"  }, {    "Platform": "Play",    "url": "Https://play.google.com/store/apps/details?id=cheeaun.hackerweb"  }]}

Service Workera Service Worker is a script that, like a WEB worker, runs in the background. As a separate thread, the running environment is different from the normal script, so you cannot participate directly in the WEB interaction behavior. The Native app can be used offline, message push, background auto-Update, the presence of Service Worker is to make the Web app can also have similar ability. Example page Injection service worker code:

if (navigator.serviceworker) {  navigator.serviceWorker.register (' service-worker.js ')  . Then (  function(registration) {    console.log (' service worker registration succeeded ');  }). Catch (function  (err) {    console.log (' Servcie worker registration failed ');  });

Responsive Web DesignRWD is a technical approach to web design that enables websites to be viewed in different resolutions, from desktop monitors to mobile phones or other mobile device devices, to reduce user behavior such as zooming, panning, and scrolling. 第4-6点 not here to expand, just interested can find the appropriate information to learn. browser support for PWAmore and more browsers support PWA technology, especially mobile browsers, such as Chrome,firefox,uc mobile browsers. PWA Case Appreciationdomestic Sina Weibo lite version:Https://m.weibo.cn/beta are you hungry? Mobile version:https://h5.ele.me/msite/#pwa =true There are Twitter mobile version, Pinterest and other products abroad. With the support of major browsers for PWA technology, more and more PWA applications will appear in the future. Reference Links https://codelabs.developers.google.com/codelabs/your-first-pwapp/#01190000008880637https://zhuanlan.zhihu.com/p/25800461https://developer.mozilla.org/zh-CN/Apps/Progressivehttps://openweb.baidu.com/pwa-future/Https://lavas.baidu.com/dochttps://zhuanlan.zhihu.com/p/25524382

Getting started with Progressive Web apps