如何使用 nuxt.config.js (Safari) 在主屏幕上的 PWA 应用程序和书签上设置图标

Question

我正在使用 Nuxt.js 开发 PWA 应用程序。我可以很好地启动它，所以我尝试通过 Safari (iOS11.4) 添加主屏幕和书签。但是主屏幕和书签上没有显示图标。（Google Chrome 和 Android 效果很好）

nuxt.config.js 如下

const pkg = require('./package')
const dir = "/dir/"

module.exports = {
  mode: 'spa',
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-status-bar-style', content:'black'},
      { name: 'apple-mobile-web-app-title', content:"test"},
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${dir}/favicon.ico` },
      { rel: 'apple-touch-icon', type: 'image/x-icon', href: `${dir}/apple-touch-icon.png` }
    ]
  },
  loading: { color: '#fff' },
  router:{
    base:`${dir}/`,
    mode:"history",
    middleware:[
      'auth'
    ]   
  },
  plugins: [
    '~/plugins/onsenui',
    '~/plugins/axios',
    '~/plugins/routerOption'
  ],
  manifest: {
      name: "test",
      lang: 'ja',
      'display':'fullscreen',
      title:'test',
      'og:title':'test',
      description:'test',
      'og:description':'test',
      theme_color:'#FFFFFF',
      background_color:'#FFFFFF',
      start_url:`${dir}/`,
      short_name:"test",
      icons:[{
        src:`${dir}/icon.png`,
        size:"144x144",
        type:"image/png"
      },{
        src:`${dir}/icon.png`,
        size:"192x192",
        type:"image/png"
      }]
  },
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa', 
    ['@nuxtjs/moment', ['ja']],
    defaultLocale: 'ja',
  ],    
  workbox: {
    dev: true 
  },
  axios:{
    proxy:true
  }
}

出了什么问题？有人教我如何修复它:)

P.S。这里是静态文件夹目录。

静态 -icon.png -favicon.ico

我试过了，但没用。

   const pkg = require('./package')
const dir = "/dir/"

module.exports = {
  mode: 'spa',
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-status-bar-style', content:'black'},
      { name: 'apple-mobile-web-app-title', content:"test"},
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${dir}/favicon.ico` },
      { rel: 'apple-touch-icon', type: 'image/x-icon', href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"57x57", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"60x60", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"72x72", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"76x76", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"114x114", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"120x120", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"144x144", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"152x152", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"180x180", href: `${dir}/apple-touch-icon.png` }

    ]
  },
  manifest: {
      name: "test",
      lang: 'ja',
      'display':'fullscreen',
      title:'test',
      'og:title':'test',
      description:'test',
      'og:description':'test',
      theme_color:'#FFFFFF',
      background_color:'#FFFFFF',
      start_url:`${dir}/`,
      short_name:"test",
      icons:[{
        src:`${dir}/icon.png`,
        size:"144x144",
        type:"image/png"
      },{
        src:`${dir}/icon.png`,
        size:"180x180",
        type:"image/png"
      }]
  }
}

Answer 1

您可以简单地将您的文件添加到静态 nuxt 文件夹中（静态）

只需从根路径加载所有文件。

      <!-- Static image from static directory -->
      <img src="/my-image.png"/>

查看文档 =>

https://nuxtjs.org/guide/assets/ .

谢谢

Answer 2

基于此，iOS 11.3 确实支持网络应用程序清单，但尚不支持以这种方式指定图标。您需要将它包含在其他设备的清单中，但至少现在您必须对 iOS 使用以下内容：

<link rel="apple-touch-icon" sizes="180x180" href="icon.png">

您必须指定图标大小，并包含 URL。

请检查此 Apple documentation。

Answer 3

我可以使用 PWACompat 自己解决。

效果如下。

module.exports = {
  mode: 'spa',
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-status-bar-style', content:'black'},
      { name: 'apple-mobile-web-app-title', content:"test"},
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${dir}/favicon.ico` }
    ],
    script:[
      {
      src:"https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js",
        integrity:"sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA",
        crossorigin:"anonymous" ,defer:true
      }
    ]
  },
  manifest: {
      name: "test",
      lang: 'ja',
      // 'display':'standalone',
      title:'test',
      'og:title':'test',
      description:'test',
      'og:description':'test',
      theme_color:'#FFFFFF',
      background_color:'#FFFFFF',
      start_url:`${dir}/`,
      short_name:"test",
      icons:[{
        src:`${dir}/icon.png`,
        size:"144x144",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"128x128",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"152x152",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"180x180",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"192x192",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"256x256",
        type:"image/png"
      }
    ]
  }
}

感谢观看和回答！:)

如何使用 nuxt.config.js (Safari) 在主屏幕上的 PWA 应用程序和书签上设置图标

How to set icon on PWA app on home screen and Bookmark using nuxt.config.js (Safari)

javascript

safari

manifest

progressive-web-apps

nuxt.js