PWA でホーム画面に追加

こぴぺったりは PWA (Progressive Web App) として動作し、スマホのホーム画面に追加するとネイティブアプリのように起動できます。iOS Safari と Android Chrome 別のインストール手順、オフライン動作の仕組みを解説します。

「こぴぺったり」は PWA (Progressive Web App) として実装されています。スマートフォンのホーム画面に追加すると、ネイティブアプリのように単独ウィンドウで起動でき、オフラインでも動作します。

PWA のメリット

ホーム画面から1タップ起動 : ブラウザを経由せず即座にアプリ画面へ
アドレスバー非表示 : 画面が広く使える、ネイティブ感のある UI
オフライン動作 : Service Worker のキャッシュによりネット未接続でも開ける
自動更新 : 新バージョンがリリースされると次回起動時に自動反映
ストア審査不要 : Apple / Google のアプリストア審査を経ずに配布される
インストール容量が小さい : 数百 KB 〜 1MB 程度

iOS (iPhone / iPad) でのインストール

Safari からの手順

Safari で「こぴぺったり」のサイトを開く
画面下部 (またはアドレスバー) の 共有ボタン (□に↑のアイコン) をタップ
メニューを下にスクロールし、「ホーム画面に追加」 を選ぶ
名前を確認 (デフォルトは「こぴぺったり」) → 右上の 「追加」 をタップ
ホーム画面にアイコンが追加されます

注意: Chrome / その他ブラウザ from iOS

iOS では Apple の制約により、PWA インストールは Safari のみ で可能です。Chrome や Firefox は内部的に Safari エンジンを使っているため、メニューに「ホーム画面に追加」が表示されません。Safari で開いてからインストールしてください。

Android でのインストール

Chrome からの手順

Chrome で「こぴぺったり」のサイトを開く
アドレスバーの インストールアイコン (画面右下の「+」または家のアイコン) をタップ
または、メニュー (⋮) → 「アプリをインストール」 を選択
確認ダイアログで 「インストール」 をタップ
ホーム画面とドロワーにアイコンが追加されます

Edge / Firefox / Samsung Internet など、Android の主要ブラウザはすべて PWA インストールに対応しています。

デスクトップ (PC) でのインストール

Chrome / Edge の場合

ブラウザで「こぴぺったり」を開く
アドレスバー右端の インストールアイコン をクリック
「インストール」 を選択
デスクトップに専用ウィンドウのアプリとして追加されます

スタートメニュー / Launchpad からも起動できるようになります。

オフライン動作の仕組み

PWA の中核技術である Service Worker が、サイトの主要ファイル (HTML / JS / CSS / 画像) をブラウザにキャッシュします。一度開いたサイトは、以後ネット接続がなくても起動できます。

データ自体は localStorage に保存されているため、オフラインでも:

アイテムの閲覧
アイテムのコピー (Clipboard API はオフラインでも動く)
フォルダの追加・削除
アイテムの編集
テーマ切り替え

すべて通常通りに動きます。

注意: 同期機能はないため、オフライン中の変更は他端末には反映されません。複数端末で使う場合はオンライン状態でエクスポート / インポートを行ってください。

自動更新

新バージョンがリリースされた際、PWA は 次回起動時に自動的に更新 されます。本サイトは vite-plugin-pwa の autoUpdate モードで構成されており、明示的な「更新を確認」操作は不要です。

更新後は通常通りデータが引き継がれます。localStorage はキャッシュとは別の領域に保存されているため、PWA 更新でデータが消えることはありません。

アンインストール

iOS

ホーム画面でアイコンを長押し → 「Appを削除」

Android

ドロワーでアイコンを長押し → 「アンインストール」 または設定 → アプリ → 該当 PWA → アンインストール

Windows / macOS Chrome

PWA ウィンドウのメニュー (⋮) → 「こぴぺったりをアンインストール」

トラブルシューティング

「ホーム画面に追加」が表示されない (iOS)

Safari で開いているか確認 (Chrome / Firefox では出ない)
HTTPS でアクセスしているか確認 (HTTP では PWA インストール不可)

インストール後にアイコンが汚い

apple-touch-icon と pwa-512x512 アイコンは個別に配信されているため、極端な解像度の端末で粗く見えることがあります。「こぴぺったり」では 192px / 512px の 2 解像度を提供しているので、ほとんどの端末で問題なく表示されます。

オフラインで動かない

初回アクセス時にネット接続が必要です。一度オンラインで開いてから、オフラインで使ってください。