harvis.dev をアプリとしてインストール
harvis.dev はウェブマニフェストを配信しているので、ブラウザは他のアプリと同じようにインストールできます。専用のウィンドウと、Dock やホーム画面に置ける専用アイコン。アプリストアもインストーラーも権限も不要です。
インストールすると変わること
専用のウィンドウ
タブもアドレスバーもありません。アップローダーとダッシュボードは、アプリスイッチャーに自分の場所を持つすっきりした単体ウィンドウで開きます。
ワンタップで公開
Dock やタスクバー、ホーム画面にアイコンが並びます。開いてフォルダをドロップすれば、ウィンドウが落ち着く前にサイトは公開されています。
ダウンロードは不要
いま読んでいるサイトそのものです。インストールで増えるのはアイコンとウィンドウだけ。バンドルもストアのアカウントも、承認が必要なバックグラウンド更新もありません。
インストール方法
いま読んでいるブラウザを選んでください。どの道筋でも、最後は harvis.dev がネイティブアプリの隣に並びます。
パソコンの Chrome・Edge・Brave
- 01アドレスバーの右端を見てください。下向き矢印の付いた小さなモニターがインストールアイコンです。
- 02見当たらないときはブラウザのメニューを開き、「ページをアプリとしてインストール」を選びます（Edge ではアプリ → このサイトをアプリとしてインストール）。
- 03確認すると harvis.dev が専用ウィンドウで開き、アプリ一覧にも追加されます。
Android の Chrome
- 01右上の ⋮ メニューをタップします。
- 02「ホーム画面に追加」を選び、続けて「インストール」をタップします。
- 03アイコンがホーム画面に追加され、ブラウザの枠なしで開きます。
iPhone・iPad の Safari
- 01共有ボタン（上向き矢印の付いた四角）をタップします。
- 02シートを下にスクロールし、「ホーム画面に追加」→「追加」をタップします。
- 03iOS も同じマニフェストを読みますが、インストールの案内は出ないので、この方法だけです。
Mac の Safari
- 01harvis.dev を通常のタブで開きます。
- 02メニューバーの「ファイル」→「Dock に追加」を選び、名前を付けて「追加」をクリックします。
- 03macOS Sonoma 以降が必要です。それ以前の Safari はウェブアプリをインストールできません。
パソコン版 Firefox はウェブアプリのインストールを廃止したため、ブックマークが一番近い代替です。Android 版 Firefox にはいまも「ホーム画面に追加」がメニューにあります。
マニフェストの中身
インストールのすべては /site.webmanifest で配信される 1 つのファイルで決まります。ブラウザはそこからアプリ名、使うアイコン、ウィンドウの開き方を読み取ります。
{
"name": "harvis.dev",
"short_name": "harvis.dev",
"start_url": "/",
"display": "standalone",
"background_color": "#13161a",
"theme_color": "#13161a",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}ブラウザの枠を外すのが「standalone」、Android が独自の形に切り抜くのが maskable アイコンです。
自分のサイトもインストール可能に
harvis.dev で公開したサイトも、まったく同じようにインストールできます。index.html の隣に manifest.json を置き、head から読み込み、192px と 512px のアイコンを用意する。必要なのはそれだけです。
<!-- index.html --> <link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#13161a">
ブラウザはインストールを提案する条件として HTTPS も求めます。harvis.dev のアドレスはすべて HTTPS で配信されているので、設定は不要です。