feat(plugin-pwa): improve pwa support (#301)

Author: Mister-Hope

docs/.vuepress/configs/head.ts

@@ -21,8 +21,6 @@ export const head: HeadConfig[] = [
   ],
   ['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
   ['meta', { name: 'application-name', content: 'VuePress' }],
-  ['meta', { name: 'apple-mobile-web-app-title', content: 'VuePress' }],
-  ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
   [
     'link',
     { rel: 'apple-touch-icon', href: `/images/icons/apple-touch-icon.png` },
@@ -35,6 +33,5 @@ export const head: HeadConfig[] = [
       color: '#3eaf7c',
     },
   ],
-  ['meta', { name: 'msapplication-TileColor', content: '#3eaf7c' }],
   ['meta', { name: 'theme-color', content: '#3eaf7c' }],
 ]

docs/plugins/pwa/pwa/config.md

@@ -146,31 +146,15 @@ Special settings for better supporting Safari, ignoring these options are safe.
 - Type: `string`
 - Details: Icon link used by Safari.
 
-#### apple.statusBarColor
-
-- Type: `"black" | "white"`
-- Default: `"black"`
-- Details: Status bar color for Safari
-
 #### apple.maskIcon
 
 - Type: `string`
 - Details: Safari mask icon
 
-### msTile
-
-Special settings for Microsoft tiles, ignoring these options are safe.
-
-#### msTile.image
-
-- Type: `string`
-- Details: Tile image
-
-#### msTile.color
+#### apple.statusBarColor
 
-- Type: `string`
-- Default value: `themeColor`
-- Details: Tile color
+- Type: `'black-translucent' | 'black' | 'default`
+- Details: Status bar color for Safari
 
 ### foundComponent
 

docs/zh/plugins/pwa/pwa/config.md

@@ -144,31 +144,15 @@
 - 类型：`string`
 - 详情：填入苹果使用的图标地址，推荐 152×152 大小
 
-#### apple.statusBarColor
-
-- 类型：`"black" | "white"`
-- 默认值：`"black"`
-- 详情：Safari 状态栏颜色
-
 #### apple.maskIcon
 
 - 类型：`string`
 - 详情：Safari 图标
 
-### msTile
-
-针对微软磁贴的特殊设置，忽略它们是安全的。
-
-#### msTile.image
-
-- 类型：`string`
-- 详情：磁贴图标
-
-#### msTile.color
+#### apple.statusBarColor
 
-- 类型：`string`
-- 默认值：`themeColor`
-- 详情：磁贴颜色。
+- 类型：`'black-translucent' | 'black' | 'default`
+- 详情：Safari 状态栏颜色
 
 ### foundComponent
 

plugins/pwa/plugin-pwa/src/node/helper.ts

@@ -46,9 +46,6 @@ export const appendBase = (base: string, options: PwaPluginOptions): void => {
       options.apple.maskIcon = appendBaseToLink(base, options.apple.maskIcon)
   }
 
-  if (options.msTile && options.msTile.image)
-    options.msTile.image = appendBaseToLink(base, options.msTile.image)
-
   if (options.manifest)
     options.manifest = appendBaseToManifest(base, options.manifest)
 }

plugins/pwa/plugin-pwa/src/node/injectLinksToHead.ts

@@ -1,18 +1,12 @@
-import type { HeadConfig } from 'vuepress/core'
+import type { App, HeadConfig } from 'vuepress/core'
 import { isPlainObject } from 'vuepress/shared'
 import type { PwaPluginOptions } from './options.js'
 
 export const injectLinksToHead = (
-  {
-    favicon,
-    manifest,
-    themeColor = '#46bd87',
-    apple,
-    msTile,
-  }: PwaPluginOptions,
-  base = '/',
-  head: HeadConfig[] = [],
+  app: App,
+  { favicon, manifest, themeColor = '#46bd87', apple }: PwaPluginOptions,
 ): HeadConfig[] => {
+  const { base, head } = app.options
   const metaKeys: string[] = []
   const linkKeys: string[] = []
 
@@ -22,7 +16,9 @@ export const injectLinksToHead = (
     else if (item[0] === 'link') linkKeys.push(item[1].rel as string)
   })
 
+  const appTitle = manifest?.name ?? app.siteData.title
   let fallBackIcon = ''
+
   const setLink = (
     rel: string,
     href: string,
@@ -40,8 +36,22 @@ export const injectLinksToHead = (
       head.push(['meta', { name, content, ...more }])
   }
 
+  if (appTitle) setMeta('application-name', appTitle)
+
+  setMeta('mobile-web-app-capable', 'yes')
+  setMeta('theme-color', themeColor || '#46bd87')
+
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  if (isPlainObject(apple) && apple.statusBarColor)
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    setMeta('apple-mobile-web-app-status-bar-style', apple.statusBarColor)
+
   if (favicon) setLink('icon', favicon)
 
+  setLink('manifest', `${base}manifest.webmanifest`, {
+    crossorigin: 'use-credentials',
+  })
+
   if (manifest?.icons) {
     const { icons } = manifest
 
@@ -56,34 +66,14 @@ export const injectLinksToHead = (
     }
   }
 
-  setLink('manifest', `${base}manifest.webmanifest`, {
-    crossorigin: 'use-credentials',
-  })
-  setMeta('theme-color', themeColor || '#46bd87')
-
   if (isPlainObject(apple) && (apple.icon || fallBackIcon)) {
     setLink('apple-touch-icon', apple.icon || fallBackIcon)
-    setMeta('apple-mobile-web-app-capable', 'yes')
-    setMeta(
-      'apple-mobile-web-app-status-bar-style',
-      apple.statusBarColor || 'black',
-    )
     if (apple.maskIcon)
       setLink('mask-icon', apple.maskIcon, {
         color: themeColor || '#46bd87',
       })
   } else if (apple !== false && fallBackIcon) {
     setLink('apple-touch-icon', fallBackIcon)
-    setMeta('apple-mobile-web-app-capable', 'yes')
-    setMeta('apple-mobile-web-app-status-bar-style', 'black')
-  }
-
-  if (isPlainObject(msTile) && (msTile.image || fallBackIcon)) {
-    setMeta('msapplication-TileImage', msTile.image || fallBackIcon)
-    setMeta('msapplication-TileColor', msTile.color || themeColor || '#46bd87')
-  } else if (msTile !== false && fallBackIcon) {
-    setMeta('msapplication-TileImage', fallBackIcon)
-    setMeta('msapplication-TileColor', themeColor || '#46bd87')
   }
 
   return head

plugins/pwa/plugin-pwa/src/node/options.ts

@@ -14,41 +14,23 @@ interface ApplePwaOptions {
    */
   icon?: string
 
-  /**
-   * Color of status bar
-   *
-   * 状态栏的颜色
-   *
-   * @default "black"
-   */
-  statusBarColor?: 'black' | 'white'
-
   /**
    * Safari mask icon
    *
    * Safari 图标
    */
   maskIcon?: string
-}
 
-interface MicrosoftPwaOptions {
   /**
-   * Microsoft tile image
-   *
-   * 144×144 transparent recommended
+   * @deprecated Related tag is unstandardized so you should avoid declaring it.
    *
-   * 微软磁贴图片
+   * Color of status bar
    *
-   * 推荐 144×144，透明
-   */
-  image?: string
-
-  /**
-   * Tile color
+   * 状态栏的颜色
    *
-   * 磁贴颜色
+   * @default "default"
    */
-  color?: string
+  statusBarColor?: 'black-translucent' | 'black' | 'default'
 }
 
 export interface PwaPluginOptions {
@@ -136,13 +118,6 @@ export interface PwaPluginOptions {
    */
   apple?: ApplePwaOptions | false
 
-  /**
-   * Settings for Microsoft
-   *
-   * 微软设置
-   */
-  msTile?: MicrosoftPwaOptions | false
-
   /**
    * Update logic
    *

plugins/pwa/plugin-pwa/src/node/pwaPlugin.ts

@@ -27,7 +27,7 @@ export const pwaPlugin =
         'The plugin will register service worker to handle assets, so we recommend you to set "shouldPrefetch: false" in VuePress config file.',
       )
 
-    app.options.head = injectLinksToHead(options, base, app.options.head)
+    app.options.head = injectLinksToHead(app, options)
 
     return {
       name: PLUGIN_NAME,