1、配置sw.js文件

注意：sw.js放在根目录,与index.html同级

/**
 * service worker
 */
var cacheName = '';
var apiCacheName = '';
var cacheFiles = [
    '/',
    './index.html',
];

// 监听install事件
self.addEventListener('install', function (e) {
    // console.log('Service Worker 状态： install');
});

// 监听activate事件
self.addEventListener('activate', function (e) {
    // console.log('Service Worker 状态： activate');
});

self.addEventListener('fetch', function (e) {
    // 需要缓存的xhr请求
    // console.log("fetch 事件")
});

2.manifest.webmanifest文件

注意：icons文件大小必须一致,start_url为/或者是指向index.html目录

{
  "background_color": "#333",
  "description": "Zeroox",
  "display": "fullscreen",
  "icons": [{
      "src": "/static/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "name": "Zeroox",
  "short_name": "Zeroox",
  "start_url": "/"
}

3.在html文件中注册sw.js

3-1.引入配置文件

<link rel=stylesheet href=/static/index.b0707a6a.css> <link rel=manifest href=/static/json/manifest.webmanifest>

3-2.注册sw.js

此处获取的dom是点击事件，通过事件达到添加主屏幕的效果

<script>
	if ("serviceWorker" in navigator && 'PushManager' in window) {
			window.addEventListener('load', () => { // 这个load 可以删除 如果你的浏览器没加载出来 可以添加一下这个
				navigator.serviceWorker.register("sw.js", {
					scope: './'
				}).then(function (registration) {
					console.log('Service Worker Registered');
				});
				const showHomePopup = document.querySelector('.zeroox-home')

				if (showHomePopup !== null) {
					showHomePopup.style.display = 'none';
				}
				window.addEventListener('beforeinstallprompt', (e) => {
					console.log("beforeinstallpromptdiaoyong")
					e.preventDefault();
					deferredPrompt = e;
					showHomePopup.style.display = 'block';
					const addHomeBtn = document.querySelector(
						'.zeroox-home .u-modal__button-group__wrapper--confirm')
					const cancelHomeBtn = document.querySelector(
						'.zeroox-home .u-modal__button-group__wrapper--cancel')
					addHomeBtn.addEventListener('click', () => {
						console.log('点击shengxiao')
						// Show the prompt
						deferredPrompt.prompt();
						// Wait for the user to respond to the prompt
						deferredPrompt.userChoice.then((choiceResult) => {
							if (choiceResult.outcome === 'accepted') {
								showHomePopup.style.display = 'none';
								console.log('User accepted the A2HS prompt'); //生效
							} else {
								showHomePopup.style.display = 'none';
								console.log('User dismissed the A2HS prompt'); //取消
							}
							deferredPrompt = null;
						});
					});
					cancelHomeBtn.addEventListener('click', () => {
						showHomePopup.style.display = 'none';
					})
				});
			})
		}
</script>

通过浏览器添加到主屏幕的配置

	<!-- 安卓平台 chrome -->
		<meta name="mobile-web-app-capable" content="yes">
		<link rel="icon" sizes="192x192" href="/static/icons/icon.png">
		<!-- ios平台 safari -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="apple-touch-icon-precomposed" href="/static/icons/icon.png">
		<meta name="apple-mobile-web-app-title" content="Zeroox">
		<meta name="application-name" content="Zeroox">
		<meta name="format-detection" content="telephone=yes" />