让网页支持iOS添加到主屏幕全屏应用，webapp启动图生成

好久没有写魔改了，这次写一个提升网页体验的魔改教程吧！因为比较喜欢打开APP的感觉，但是为了博客做一个app显然是大材小用了。毕竟也不是社交媒体社区之类的。所以一个简单的类似应用内一样的app是最好的。看到了爱发电的iOS版本用的就是添加网页到桌面的方式，但是没开启pwa，所以我就尝试一下复刻。

爱发电的添加流程

这里展示的是Hexo的Butterfly主题的修改方法。其他网页的修改方法大同小异，无非是head标签里面添加一些meta和link代码。

至于为什么不用原生的PWA，主要还是bug太多了，要做的兼容性适配太多了。

废话不多说，我们开始吧！

修改head文件

themes/butterfly/layout/includes/head.pug

//- pwa
meta(name='apple-mobile-web-app-capable', content='yes')
meta(name='apple-touch-fullscreen', content='yes')
meta(name='apple-mobile-web-app-status-bar-style', content='black-translucent')
link(rel='manifest', href='/manifest.json')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2048x2732.png', media='(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2732x2048.png', media='(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1668x2388.png', media='(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2388x1668.png', media='(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1536x2048.png', media='(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2048x1536.png', media='(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1668x2224.png', media='(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2224x1668.png', media='(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1620x2160.png', media='(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2160x1620.png', media='(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1290x2796.png', media='(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2796x1290.png', media='(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1179x2556.png', media='(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2556x1179.png', media='(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1248x2778.png', media='(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2778x1248.png', media='(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1170x2532.png', media='(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2532x1170.png', media='(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1125x2436.png', media='(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2436x1125.png', media='(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1242x2688.png', media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2688x1242.png', media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-828x1792.png', media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1792x828.png', media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1242x2208.png', media='(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-2208x1242.png', media='(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-750x1334.png', media='(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1334x750.png', media='(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-640x1136.png', media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)')
link(rel='apple-touch-startup-image', href='/img/pwa/splash-1136x640.png', media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)')

将这部分代码添加到文件结尾。如果不是butterfly主题，可以尝试将下面的html代码添加到head标签：

<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<link rel="manifest" href="/manifest.json"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2388x1668.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2048x1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2224x1668.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1620x2160.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2160x1620.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1290x2796.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2796x1290.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1179x2556.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2556x1179.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1248x2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2778x1248.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1170x2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2532x1170.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2436x1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2688x1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1792x828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-2208x1242.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1334x750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
<link rel="apple-touch-startup-image" href="/img/pwa/splash-1136x640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>

添加manifest

我们需要添加一个文件。

themes/butterfly/source/manifest.json

其他主题尝试在网站根目录添加manifest.json，你需要修改一下name、short_name为你的网站名称。

{
  "name": "张洪Heo",
  "short_name": "张洪Heo",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
      {
        "src": "img/pwa/36.png",
        "sizes": "36x36",
        "type": "image/png"
      },
      {
          "src": "img/pwa/48.png",
        "sizes": "48x48",
        "type": "image/png"
      },
      {
        "src": "img/pwa/72.png",
        "sizes": "72x72",
        "type": "image/png"
      },
      {
        "src": "img/pwa/96.png",
        "sizes": "96x96",
        "type": "image/png"
      },
      {
        "src": "img/pwa/144.png",
        "sizes": "144x144",
        "type": "image/png"
      },
      {
        "src": "img/pwa/192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "img/pwa/196.png",
        "sizes": "196x196",
        "type": "image/png",
        "purpose": "any maskable"
      },
      {
        "src": "img/pwa/512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
}