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

问题描述 投票：0回答：3

我正在使用Nuxt.js开发PWA应用程序。我可以很好地启动它，所以我尝试通过Safari（iOS11.4）添加HomeScreen和Bookmark。但是主屏幕和书签上没有显示图标。（谷歌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
  }
}

什么地方出了错 ？有人教我如何修复它pls :)

附：这是静态文件夹目录。

static -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"
      }]
  }
}
javascript safari manifest progressive-web-apps nuxt.js
3个回答
0
投票

您只需在static nuxt文件夹中添加您的文件（静态）

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

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

请参阅docs =>

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

谢谢

0
投票

基于此SO post，iOS 11.3确实支持Web应用程序清单，它还不支持以这种方式指定图标。您希望将其包含在其他设备的清单中，但至少现在您必须使用以下iOS版本：

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

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

请检查这个Apple documentation。

0
投票

我可以自己解决使用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/[email protected]/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"
      }
    ]
  }
}

感谢收看和回答！:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.