如何讓前端頁面在浏覽器當app安裝網頁應用PWA-web-app-manifest

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

使用

<!-- 在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,
      }),
    ],
  }),
);