如何让前端页面在浏览器当app安装网页应用PWA-web-app-manifest

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让前端页面在浏览器当app安装网页应用PWA-web-app-manifest相关的知识,希望对你有一定的参考价值。

PWA,即Progressive Web App, 是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。PWA本质上依然是一个Web App


Web App Manifest,manifest 的目的是将Web应用程序安装到设备的主屏幕,为用户提供更快的访问和更丰富的体验

 manifest.json

快速生成该文件-跳转


    "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"
    ]

使用

<!-- 在index.html中添加以下meta标签 -->
<link rel="manifest" href="/manifest.json">

判断是否支持serviceWorker功能,支持,当网页加载完成后加载sw.js文件去开启pwa功能

<script>
  if ("serviceWorker" in navigator) 
	window.addEventListener("load", function () 
	  navigator.serviceWorker.register("sw.js");
	);
  
</script>

sw.js

self.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,
      ),
    ],
  ),
);

以上是关于如何让前端页面在浏览器当app安装网页应用PWA-web-app-manifest的主要内容,如果未能解决你的问题,请参考以下文章

web发布新版本,前端页面如何自动刷新

浏览器原理 26 # 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题?

DRF--介绍和安装

请问在微信端打开网页app下载页面,如何让它自动跳转到浏览器端打开下载啊?

如何让浏览器窗口显示在最前端?

如何让 Angular Universal 和 PWA 协同工作?