uniapp h5添加到手机桌面变成伪应用 pwa模式

这个功能是把手机浏览上的h5添加到桌面上，变成一个单独的应用，有自己的图标 ，开屏加载图片，后台应用 目前只知道苹果的safari，谷歌可以实现，其它的可以自行测试

第一步是在html里添加头部声明

html

<!-- 添加主屏幕名称 -->
    <meta name="apple-mobile-web-app-title" content="散人岛">
    <!-- 像原生应用一样加载 -->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 明添加到主屏幕时隐藏地址栏和状态栏（即全屏） -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 明添加到主屏幕时隐藏地址栏和状态栏（即全屏） -->
    <meta name="mobile-web-app-capable" content="yes" />
    <!-- 声明添加到主屏幕时设置系统顶栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="translucent" />

这样就可以了实现了一大半，可以测试在h5上添加到桌面打开就是单独的应用，不急现在还有问题，

问题1：打开应用后切换到其它分页面，显示的还是浏览器的方式，只不过是变成应用的方式浏览器了就是底部和头部都有浏览器的东西

问题2：没有桌面图片和开屏加载的图片

问题1解决：

我们需要引入个文件manifest.json，如果你是uniapp的项目，那我说的并不是的你根目录那个manifest.json文件，我测试过了在那上面加没有效果，我们需要单独声明一个文件放在我们打包后项目可以访问到的文件夹下面，或者网络链接（应该也可以）

我是放在根目录下的static下的    项目名/static/manifest.json ，注：我在网上找了很多都只是说要加这个文件就可以，但后面还会出问题，可以往下看

然后我们在里面配置

{
    "name": "散人岛", //应用名称
    "short_name": "散人岛", //应用短名
    "start_url": "https://xxx", //应用打开启动的页面，通常是应用首页
    "scope": "/",//应用作用域，定义pwa覆盖url的范围，浏览器将所有在/路径下的页面都视为该应用的一部分。sw的注册也受这个作用域限制
    "display": "standalone", //应用显示的模式，standalone表示应用将隐藏传统浏览器的ui元素
　　"display_override": ["fullscreen", "minimal-ui"], //浏览器首先尝试使用 display_override 列表中的第一个值作为应用的显示模式,如果都不支持就会使用display显示有兴趣的可以去了解一下，我没有添加这个
    "background_color": "#c42b1c", //应用的背景颜色
    "theme_color": "#ffffff", //主题颜色
    "orientation": "portrait", //默认屏幕方向
    "icons": [ //应用添加到桌面后的图标
    {
      "src": "16.png",
      "sizes": "16x16"
    },
    {
      "src": "20.png",
      "sizes": "20x20"
    },
    {
      "src": "29.png",
      "sizes": "29x29"
    },
    {
      "src": "32.png",
      "sizes": "32x32"
    },
    {
      "src": "40.png",
      "sizes": "40x40"
    },
    {
      "src": "50.png",
      "sizes": "50x50"
    },
    {
      "src": "57.png",
      "sizes": "57x57"
    },
    {
      "src": "58.png",
      "sizes": "58x58"
    },
    {
      "src": "60.png",
      "sizes": "60x60"
    },
    {
      "src": "64.png",
      "sizes": "64x64"
    },
    {
      "src": "72.png",
      "sizes": "72x72"
    },
    {
      "src": "76.png",
      "sizes": "76x76"
    },
    {
      "src": "80.png",
      "sizes": "80x80"
    },
    {
      "src": "87.png",
      "sizes": "87x87"
    },
    {
      "src": "100.png",
      "sizes": "100x100"
    },
    {
      "src": "114.png",
      "sizes": "114x114"
    },
    {
      "src": "120.png",
      "sizes": "120x120"
    },
    {
      "src": "128.png",
      "sizes": "128x128"
    },
    {
      "src": "144.png",
      "sizes": "144x144"
    },
    {
      "src": "152.png",
      "sizes": "152x152"
    },
    {
      "src": "167.png",
      "sizes": "167x167"
    },
    {
      "src": "180.png",
      "sizes": "180x180"
    },
    {
      "src": "192.png",
      "sizes": "192x192"
    },
    {
      "src": "256.png",
      "sizes": "256x256"
    },
    {
      "src": "512.png",
      "sizes": "512x512"
    },
    {
      "src": "1024.png",
      "sizes": "1024x1024"
    }
  ]
}

做完这些应用添加到桌面后就有桌面图标了，如果没有效果可以在浏览器上看看

 有没有这个文件，如果没有效果一定是这个文件没有访问到，

解决问题二

现在是没有开屏图标，我们可以在html上添加link图片链接

图片大小要严格按照大小来，不然没有效果,每个机型有各自的尺寸，我看到过一张图，但忘记在那里了有兴趣可以自己找到一下对应各种流行机型

    <link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="2048x2732.png">
    <link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="1668x2388.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="1536x2048.png">
    <link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="1668x2244.png">
    <link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="1620x2160.png">
    <link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="1284x2778.png">
    <link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="1170x2532.png">
    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="1125x2436.png">
    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="1242x2688.png">
    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="828x1792.png">
    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="1242x2208.png">
    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="750x1334.png">
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="640x1136.png">

这个添加完就有开屏图片了，但是还是有一点问题，就是我们添加到桌面第一步打开，停留在这里，或者打开内嵌的h5页面，然后退出浏览器并清除应用，再打开，再点击添加到桌面可能会发现添加到浏览器的地址变了不是我们配置的start_url地址，

我是添加过这个方法后就没有出现过问题了，苹果需要专门添加一个文件声明

<link rel="manifest" href="/static/manifest.webmanifest" />

就是这个文件，这个文件就是我们把manifest.json文件格式改一下，变成 manifest.webmanifest放在我们项目访问的到的文件就行，这个我找了老半天了

自此完毕