为博客园加上PWA支持

在这篇博客文章中，我将分享如何将您的博客首页作为PWA App固定到iOS设备的主屏幕上。这样，博客将以全屏模式打开，提供更好的用户体验。

在查阅了iOS 如何添加网页到主屏幕可以全屏打开后，我了解到只需在网页的head内添加以下标签即可实现该功能：

<meta name="apple-mobile-web-app-capable" content="yes">

然而，仅添加这个标签并不能提供最佳的用户体验，因为它不会指定主屏幕图标，并且地址栏会显示为黑色。为了改进这些问题，我们需要添加更多的标签以实现：白色通知栏、指定PNG格式的主屏幕图标以及点击博文时不显示地址栏等功能。可以使用以下代码：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#fff">
<link rel="apple-touch-icon" sizes="180x180" href="https://files.cnblogs.com/files/StarsbySea/apple-touch-icon.ico">
<link rel="manifest" href="https://files-cdn.cnblogs.com/files/StarsbySea/manifest.json">

为了实现上述需求，我借助ChatGPT生成了如下JavaScript代码：

<script>
  function addMetaTagsAndLinks() {
    // 添加适配iOS PWA模式的meta标签
    const appleWebAppMetaTag = document.createElement('meta');
    appleWebAppMetaTag.name = 'apple-mobile-web-app-capable';
    appleWebAppMetaTag.content = 'yes';
    document.head.appendChild(appleWebAppMetaTag);

    // 添加主题颜色meta标签
    const themeColorMetaTag = document.createElement('meta');
    themeColorMetaTag.name = 'theme-color';
    themeColorMetaTag.content = '#fff';
    document.head.appendChild(themeColorMetaTag);

    // 添加Apple Touch图标
    const appleTouchIconLink = document.createElement('link');
    appleTouchIconLink.rel = 'apple-touch-icon';
    appleTouchIconLink.sizes = '180x180';
    appleTouchIconLink.href = 'https://files.cnblogs.com/files/StarsbySea/apple-touch-icon.ico';
    document.head.appendChild(appleTouchIconLink);

    // 添加iPhone 14启动画面
    const iPhoneXRSplashLink = document.createElement('link');
    iPhoneXRSplashLink.href = 'https://files.cnblogs.com/files/StarsbySea/apple-splash-1170-2532.ico';
    iPhoneXRSplashLink.media = '(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)';
    iPhoneXRSplashLink.rel = 'apple-touch-startup-image';
    document.head.appendChild(iPhoneXRSplashLink);

    // 添加Manifest
    const manifestLink = document.createElement('link');
    manifestLink.rel = 'manifest';
    manifestLink.href = 'https://files-cdn.cnblogs.com/files/StarsbySea/manifest.json';
    document.head.appendChild(manifestLink);
  }

  // Call the function immediately after its definition
  (function() {
    addMetaTagsAndLinks();
  })();
</script>

将以上代码添加到博客管理后台设置中的“页首HTML代码”部分。这样，当您通过iOS的Safari浏览器将博客首页添加到主屏幕时，它将以PWA App的形式打开，这将使您的博客看起来更像一个原生应用，提升整体感观和使用体验。

参考：

1. iOS PWA Compatibility