pwa应用进阶-区分AB面-添加安装按钮而且区分不同的系统和浏览器的各种情况

本文链接：https://blog.csdn.net/Silent_F/article/details/145596051

年前将cocosCreator导出的pwa包后，近两天又将pwa应用进行一些优化
主要优化点如下：
1、区分AB面,即用户直接通过浏览器访问链接和安装后点击桌面图标进来看到的内容不一样
2、添加了安装按钮，用户打开url后，需要手动点击安装按钮才能进行安装
3、区分了不同的系统和浏览器，在无法直接安装时，进行了弹窗提示
公开地址https://lengmo714.top/a37e9cdc.html

功能说明和注意事项

1、区分AB面，我这里的A面是index.html里面的内容，因为我的url直接指向的是这个文件。B面的内容可以使用另外一个链接，将链接地址写在manifest.json文件的start_url字段，这个字段其实就是通过桌面图标打开的路径。
2、区分了不同和系统和浏览器，这里主要是因为并不是所有的系统和浏览器都支持安装pwa。在点击按钮时会去判断系统和浏览器，如果支持安装，则进行安装，如果不支持，则进行弹窗提示。比如在苹果手机，使用chrome打开，会提示你使用safair浏览器打开。在safair打开后会提示你如何将应用添加到桌面。如下图片所示：
在这里插入图片描述

代码实现

index.html代码，其实主要的修改逻辑都在这里，其他的代码都和前面介绍的一样，不用怎么修改

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PWA 示例</title>
    <meta name="theme-color" content="#ffffff">
    <link rel="manifest" href="manifest.json">
    <style>
        #install-btn {
     
     
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 提示图片样式 */
        #ios-install-guide {
     
     
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content