仅需三步，给你的网站增加一个基于Chrome的添加到桌面应用

Chromium内核的浏览器访问我的博客的时候会有这样的提示，安装后会创建一个基于web页面的应用程序（渐进式 Web 应用）可以以更精简的窗口访问网站。以下分三步来实现这个功能：

第一步

创建一个JS在你页面中引用，名称自定，代码如下

$(document).ready(function() {
  let deferredPrompt;
  if (!localStorage.getItem('need_app_install')) {
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      deferredPrompt = e;
      showInstallModal();
    });
  }
  function showInstallModal() {
    const $modal = $('<div>', { class: 'c-app-install-popup', css: { display: 'flex' } });
    const $modalContents = $('<div>', { class: 'c-app-insxtall-popup__title' }).append(
      $('<p class="c-app-install-popup__title">').text('现在，您可以添加此程序'),
      $('<p class="c-app-install-popup__tip">').text('放在桌面上你喜欢的位置，可以快速访问应用'),
    );
    const $modalContent = $('<div>', { class: 'c-app-install-popup__buttons' }).append(
      $('<button>', {
        class: 'c-app-install-popup__button-add',
        text: '安装',
        click: async function() {
          if (deferredPrompt) {
            deferredPrompt.prompt();
            await deferredPrompt.userChoice;
            $modal.hide();
          }
        }
      }),
      $('<button>', {
        class: 'c-app-install-popup__button-cancel',
        text: '取消',
        click: function() {
          localStorage.setItem('need_app_install', 'true');
          $modal.hide();
        }
      })
    );
    $modal.append($modalContents);
    $modal.append($modalContent);
    $('body').append($modal);
  }
});

JS的作用是当你点击安装的时候引用浏览器的Web API的install实现网站打包成应用，取消写入localStorage不再出现提示窗口，然后里面的样式可以自定义，也就是第二步。

第二步

创建一个CSS文件，放入样式表，这个是提醒安装界面的样式

.c-app-install-popup {
	display:-webkit-flex;
	display:-ms-flexbox;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-justify-content:space-around;
	-ms-flex-pack:distribute;
	justify-content:space-around;
	position:fixed;
	z-index:100001;
	top:30px;
	left:50%;
	-webkit-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);
	width:300px;
	height:150px;
	border-radius:8px;
	background:#f6f6f6;
	box-shadow:0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -2px rgba(0,0,0,.3)
}
.c-app-install-popup__title {
	padding:8px 10px
}
.c-app-install-popup__tip {
	padding:8px 10px;
	font-size:12px;
	color:#9a9994
}
.c-app-install-popup__buttons {
	display:-webkit-flex;
	padding:0 6px 8px;
	display:-ms-flexbox;
	display:flex;
	-webkit-justify-content:flex-end;
	-ms-flex-pack:end;
	justify-content:flex-end
}
.c-app-install-popup button {
	border-radius:8px;
	border:0;
	padding:0;
	padding:8px 16px;
	margin:0 4px;
	box-shadow:0 0 transparent,0 0 transparent,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)
}
.c-app-install-popup button:hover {
	opacity:.8
}
.c-app-install-popup__button-add {
	color:#333;
	background-color:#45B6F7
}
.c-app-install-popup__button-cancel {
	color:#333;
	background-color:#fff
}

样式可以自己优化，觉得什么样好看，放什么位置，多大窗口都随自己。

第三步

这是最重要的一步，也是最麻烦的一步，所以关个注再看吧

也就一分钟的时间，三步走完，你的网站也会有这个功能了

后续高级扩展看这里：https://www.ediok.cn/forum/6500.html