🔍
Androidの「ホーム画面に追加する」アイコン設定方法

2025/10/16に公開
 PWAPWA（Progressive Web App）＝Webサイトをアプリのように使える技術

（ホーム画面から直でhttps://...にアクセスできる）



Androidではインストールでき、iPhoneでは[ホーム画面に追加」で同等の見た目になります。
iPhoneはシンプルですが、(iPhone用の方法は本記事末尾に記載)

Androidは癖があるので記録しておきます。


 Androidアイコン(apple-touch-icon.png)を置く
例）

/mnt/c/Git/プロジェクトタイトル/src/storage/app/public/image/イベントID/apple-touch-icon.png
DBにカラムを追加したくないので、この場所に置く

(⇑apple-touch-iconは、404やエラー画面でもOSにファイル直参照してほしいから)

manifest.webmanifestファイルを作成
/mnt/c/Git/プロジェクトタイトル/src/storage/app/public/image/イベントID/manifest.webmanifest

manifest.webmanifest中身↓
{
    "name": "お好きに",
    "short_name": "お好きに",
    "start_url": "/event/イベントID/",
    "scope": "/event/イベントID/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "icons": [
        {
            "src": "/storage/image/イベントID/apple-touch-icon.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ]
}
※sizeを512×512にしているのは、PWAをインストールするとき、Androidはこの512px画像を基にしてさまざまなサイズ（192×192、96×96、48×48など）を自動生成して使うから。

Service Worker（サービスワーカー）作成
WSL (Ubuntu on Windows)ターミナルで、プロジェクトのルートにいる状態で以下のコマンド
例）

/mnt/c/Git/プロジェクトタイトル/src
echo "self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => self.clients.claim());" > public/sw.js
⇑sw.js…ブラウザに「このサイトはPWA」と認識させる宣言ファイル
中身を確認
cat public/sw.js
こうなっていればOK
self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', () => self.clients.claim());
⇑

install：self.skipWaiting() で「すぐ有効化してOK」と宣言

activate：self.clients.claim() で「全ページをこのService Workerの管理下にする」と宣言。
この2行があることで：

ChromeがPWAインストール対象として認識し、Androidで「アプリをインストール」メニューが出る

bladeに下記を追加
例）

/mnt/c/Git/プロジェクトタイトル/src/resources/views/layouts/common.blade.php
{{-- === Event-specific PWA Manifest (IDベース) === --}}
@php
  $eventId = $event?->id ?? null;
  $manifestRel = $eventId ? "storage/image/{$eventId}/manifest.webmanifest" : null;
  $manifestAbs = $manifestRel ? public_path($manifestRel) : null;
@endphp
@if ($manifestAbs && file_exists($manifestAbs))
  <link rel="manifest" href="{{ asset($manifestRel) }}?v={{ filemtime($manifestAbs) }}">
@endif

<script>
  'serviceWorker' in navigator && navigator.serviceWorker.register('/sw.js');
</script>

 iPhoneiPhone用はシンプル。

アイコン(apple-touch-icon.png)を置く
例）

/mnt/c/Git/プロジェクトタイトル/src/storage/app/public/image/イベントID/apple-touch-icon.png

bladeに下記を追加
例）

/mnt/c/Git/プロジェクトタイトル/src/resources/views/layouts/common.blade.php
{{-- === Event-specific Apple Touch Icon === --}}
    @php
        $eventId = $event?->id ?? null;

        $iconRel = $eventId ? "storage/image/{$eventId}/apple-touch-icon.png" : null;
        $iconAbs = $iconRel ? public_path($iconRel) : null;
    @endphp

    @if ($iconAbs && file_exists($iconAbs))
        <link rel="apple-touch-icon" sizes="180x180"
              href="{{ asset($iconRel) }}?v={{ filemtime($iconAbs) }}">
        <link rel="icon" type="image/png" sizes="192x192"
          href="{{ asset($iconRel) }}?v={{ filemtime($iconAbs) }}">
    @endif
PWA

Android

iPhone

Discussion
