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

pwa add to home screen example
nuxt pwa
nuxt pwa app
pwa nuxt icon
add to home screen html code
nuxt workbox
nuxt icons
add to home screen button on website

I'm developing PWA app using Nuxt.js. I could launch it well , So I tried to add HomeScreen and Bookmark by Safari (iOS11.4). However icon weren't shown on home screen and bookmark.(Google Chrome and Android work well)

nuxt.config.js is bellow

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
  }
}

You can simply add your file inside the static nuxt folder (static)

an load all your file simply from the root path.

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

See the docs =>

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

Thanks

How to make PWAs installable, In this article, we learned about how we can make PWAs installable how the user can then install the PWA with the "add to home screen" feature of their browser. and then navigate to the site by using a bookmark or typing the URL. the app on an OS (such as an icon on the home screen, an entry in� CSS Transitions In Vuejs And Nuxtjs CSS Transitions In Vuejs And Nuxtjs Timi Omoyeni 2020-07-10T09:00:00+00:00 2020-07-10T19:05:50+00:00 Transitions are a module of CSS that lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. Using these

Based from this SO post, iOS 11.3 does support web app manifests, it does not yet support specifying icons this way. You'll want to include it in your manifest for other devices, but at least for now you'll have to use the following for iOS:

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

You must specify the icon size, and include a URL.

Kindly check this Apple documentation.

Web app manifests, Unlike regular web apps with simple homescreen links or bookmarks, PWAs can PWA manifests include its name, author, icon(s), version, description, and list must be set to use-credentials , even if the manifest file is in the same origin Safari ? WebView Android ? Chrome Android ? Firefox Android ? 277k ratings See, that’s what the app is perfect for.

I could solve by myself using PWACompat.

It worked well as bellow.

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"
      }
    ]
  }
}

apple-touch-icon not showing in iOS and iPadOS bookmarks � Issue , iOS or iPadOS device will load apple-touch-icon.png from url in. And now my apple-touch-icon not showing in bookmarks (only on home screen as web app). favicons;; Add precomposed version of apple-touch-icon;; Use @nuxtjs/pwa in nuxt.config.js to use custom favicons: pwa.meta.favicon: false .

Workbox Module, Workbox is a collection of JavaScript libraries for Progressive Web Apps. (Learn You can pass options to pwa.workbox in nuxt.config.js to override the defaults . It is recommended to test workbox using nuxt build / nuxt start . (Array) Cache a set of files when registering service worker. Safari requires rangeRequests.

Icon Module, This module automatically generates app icons and favicon with different sizes using You can pass options to pwa.icon in nuxt.config.js to override defaults.

apple-touch-icon not showing in iOS and iPadOS bookmarks, Try to add website to bookmarks (or to "Favourites") on iOS or iPadOS. And now my apple-touch-icon not showing in bookmarks (only on home screen as web app). Also I'm using @nuxtjs/pwa@3.0.0-0 , but I disabled favicon property in nuxt.config.js to use custom favicons: Expected a property name in Safari hot 2.

Comments
  • HI Birante . Thank you for comment and sorry for I didn't inform you what is my static folder going on. I ready files in the static folder like bellow . /static/favicon.ico /static/apple-touch-icon.png However it didn't work yet ..
  • Hi jess, Thank you for comment . I tried that but It didn't work unfortunately . icon.png what I prepare and store in static folder should be 180x180 size? I stored icon.png(size:192x192) then I wrote bellow but it didn't work well. 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', href: ${dir}/apple-touch-icon.png sizes:"180x180" } ]