如何让前端页面在浏览器当app安装网页应用PWAappmanifest

　　PWA，即Progressive Web App, 是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。PWA本质上依然是一个Web App
　　Web App Manifest，manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验manifest.json快速生成该文件-如下
　　Generatore di Web App Manifest per migliori prestazioni del sito - SeoChecker{     ＂name＂: ＂图书搜索＂,  //指定了Web App的名称     ＂short_name＂: ＂书查＂, //简称     ＂start_url＂: ＂/＂, //指定用户打开该Web App时加载的URL。相对URL会相对于manifest     ＂display＂: ＂standalone＂, //控制页面的显示模式，有四个值可以选择：fullscreen、standalone、minimal-ui、browser。minimal-ui比standalone多出一个地址栏     ＂background_color＂: ＂#333＂,     ＂description＂: ＂一个PWA应用＂,     ＂orientation＂: ＂portrait-primary＂, //控制Web App的方向。具体的值包括：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary     ＂theme_color＂: ＂#5eace0＂, //定义应用程序的默认主题颜色     ＂icons＂: [{ //用来指定应用的桌面图标         ＂src＂: ＂img/icons/book-32.png＂,         ＂sizes＂: ＂32x32＂,         ＂type＂: ＂image/png＂     }, {         ＂src＂: ＂img/icons/book-72.png＂,         ＂sizes＂: ＂72x72＂,         ＂type＂: ＂image/png＂     }, {         ＂src＂: ＂img/icons/book-128.png＂,         ＂sizes＂: ＂128x128＂,         ＂type＂: ＂image/png＂     }, {         ＂src＂: ＂img/icons/book-144.png＂,         ＂sizes＂: ＂144x144＂,         ＂type＂: ＂image/png＂     }, {         ＂src＂: ＂img/icons/book-192.png＂,         ＂sizes＂: ＂192x192＂,         ＂type＂: ＂image/png＂     }, {         ＂src＂: ＂img/icons/book-256.png＂,         ＂sizes＂: ＂256x256＂,         ＂type＂: ＂image/png＂     }, {         ＂src＂: ＂img/icons/book-512.png＂,         ＂sizes＂: ＂512x512＂,         ＂type＂: ＂image/png＂     }] }使用
　　判断是否支持serviceWorker功能，支持，当网页加载完成后加载sw.js文件去开启pwa功能sw.jsself.addEventListener(＂error＂, function(e) {   self.clients.matchAll().then(function(clients) {     if (clients && clients.length) {       clients[0].postMessage({         type: ＂ERROR＂,         msg: e.message || null,         stack: e.error ? e.error.stack : null,       });     }   }); });   self.addEventListener(＂unhandledrejection＂, function(e) {   self.clients.matchAll().then(function(clients) {     if (clients && clients.length) {       clients[0].postMessage({         type: ＂REJECTION＂,         msg: e.reason ? e.reason.message : null,         stack: e.reason ? e.reason.stack : null,       });     }   }); });   importScripts(＂https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js＂); workbox.setConfig({   debug: false,   modulePathPrefix: ＂https://g.alicdn.com/kg/workbox/3.3.0/＂, }); workbox.skipWaiting(); workbox.clientsClaim();   var cacheList = [＂/＂, ＂/index.html＂];   workbox.routing.registerRoute(   new RegExp(/.(?:html|css)$/),   workbox.strategies.networkFirst({     cacheName: ＂ql:html＂,     plugins: [       new workbox.expiration.Plugin({         maxEntries: 10,       }),     ],   }), );   workbox.routing.registerRoute(   new RegExp(/.(?:js|css)$/),   workbox.strategies.staleWhileRevalidate({     cacheName: ＂ql:static＂,     plugins: [       new workbox.expiration.Plugin({         maxEntries: 20,       }),     ],   }), );   workbox.routing.registerRoute(   new RegExp(/.(?:png|gif|jpg|jpeg|webp|svg|cur)$/),   workbox.strategies.cacheFirst({     cacheName: ＂ql:img＂,     plugins: [       new workbox.cacheableResponse.Plugin({         statuses: [0, 200],       }),       new workbox.expiration.Plugin({         maxEntries: 20,         maxAgeSeconds: 12 * 60 * 60,       }),     ],   }), );