Zenn
Open6

Nextでショートカットを保存時に名前とアイコンを適用する

Next.js
PWA
shortcut
ようかんようかん

この記事はかなり時間をかなり費やしてしまった対応への"とりあえず動く"の備忘録です。

GOLE

ようかんようかん

ダメな例

アプリの初期値が入っていない

アイコンが反映されていない

ようかんようかん

favicon Generatorで複数サイズのアイコンを作成

https://ao-system.net/favicongenerator/

ダウンロードした画像からいくつかを取得

  • iOS用 apple-touch-icon-180x180.png
  • Android用 android-chrome-512x512.pngとandroid-chrome-192x192.png
  • Favicon 用 Favicon.ico

リポジトリに反映する

iOSとAndroid用の画像はpublic/に(今回はpublic/icons/)に保存した
Faviconはapp/に保存(App Router時)

next-pwaのインストール

npm i next-pwa

https://www.npmjs.com/package/next-pwa

next-pwsの設定

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
}

module.exports = withPWA(nextConfig)
ようかんようかん

app/manifest.tsを作成

Androidのアイコンの反映がうまくいかなかったのでpurpose属性をanyとmaskableでそれぞれ作成しておく

import { MetadataRoute } from 'next'

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'TATEKA | 立て替え・割り勘・清算',
    short_name: 'TATEKA',
    description: 'TATEKA',
    start_url: '/homeicon',
    display: 'standalone',
    display_override: ['browser'],
    background_color: '#000000',
    theme_color: '#000000',
    icons: [
      {
        src: '/favicon.ico',
        sizes: 'any',
        type: 'image/x-icon',
      },
      {
        src: '/icons/apple-touch-icon-180x180.png',
        sizes: '180x180',
        type: 'image/png',
      },
      {
        src: '/icons/android-chrome-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        purpose: 'any',
      },
      {
        src: '/icons/android-chrome-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        purpose: 'maskable',
      },
      {
        src: '/icons/android-chrome-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'any',
      },
      {
        src: '/icons/android-chrome-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'maskable',
      },
    ],
  }
}
ようかんようかん

npm run buildしてpublic/にファイルが生成されるのを確認

sw.jsとworkbox.jsが作成されるはず

デプロイして完成🎉

デバッグにはDeveloper Tool->Application->manifestが便利

登録が反映されているかどうかを簡単に確認できる

ようかんようかん

沼ったポイント

next-pwaを入れることで、iOSの対応は簡単にできた。
問題はAndroidの対応で、最初はpurpose属性を追加していなかった。
これをanyとmaskableでそれぞれ登録することによって動く様になった。

細かい原因調査までは今回行えていない。