PWAをMacに入れるとは｜何ができて、どこで詰まるか

PWAをMacに入れる、という言い方で調べ始めた人は、たいてい同じ場所で止まります。手順の説明は見つかるのに、それをやると自分のMacで何がどう変わるのかが書かれていない。結果として、入れてみたけれど前と同じようにブラウザの窓が開いただけだった、という感想になります。この記事では、Macで「PWAを入れる」と呼ばれている操作が実際には何を指しているのかを切り分けて、入れたあとに変わること、変わらないこと、そして先に知っておかないと必ず詰まる場所を並べます。

Macで「PWAを入れる」と言うとき、指しているものは3つある

同じ言葉で呼ばれていますが、Macの上で起きていることは3種類に分かれます。この区別を付けないまま手順だけをなぞると、説明どおりに操作したのに結果が違う、という状態になります。

1つ目は、Safariでページを開いてDockに追加する操作です。macOS Sonoma 14から入った機能で、メニューバーの「ファイル」から「Dockに追加」を選ぶか、ツールバーの共有ボタンから同じ項目を選びます。名前を決めて追加すると、ホームフォルダの中の「アプリケーション」フォルダに保存され、Dockからも Spotlight からも呼び出せるようになります。

2つ目は、Chromeをはじめとする Chromium 系のブラウザで、ページをアプリとしてインストールする操作です。Chromeの場合はメニューの「キャスト、保存、共有」の中に「ページをアプリとしてインストール」があります。以前は「その他のツール」の下に「ショートカットを作成」という名前で置かれていた項目で、名前と場所が変わったため、古い解説記事どおりに探すと見つかりません。作られたものは、ホームフォルダの「アプリケーション」の中にブラウザごとのフォルダができて、そこに入ります。実機で確認すると、Chrome なら「Chrome Apps」、Microsoft Edge なら「Edge Apps」というように、ブラウザの数だけフォルダが並びます。

3つ目は、ブラウザの機能ではなく、サイトを包んで独立したMacアプリの形にする道具を使う方法です。ここで作られるものはブラウザの付属物ではなく、Finderから見ても単体のアプリケーションとして扱われます。1つ目と2つ目が「ブラウザが用意した窓を切り出す」やり方なのに対して、3つ目は「アプリの側を先に用意して、そこにサイトを読み込ませる」やり方です。

検索で出てくる手順の多くは1つ目か2つ目です。3つ目を探している人が1つ目の手順を読むと物足りず、1つ目で足りる人が3つ目を読むと大げさに感じます。自分がどれを必要としているのかは、この記事の後半にある判断材料で決められます。

PWAという言葉の定義と、Macでの実態がずれている理由

そもそもPWAは、特定の技術ひとつを指す名前ではありません。開発者向けの解説では、いくつかの技術要素を組み合わせた「型」として説明されます。web.dev の学習教材は、PWAを技術スタックに縛られないものとして扱い、速く動くこと、どのブラウザでも動くこと、画面の大きさに合わせて表示できること、通信が切れたときの画面を持つこと、そしてインストールできることを挙げています。

ここで問題になるのが、最後の「インストールできること」です。WindowsやAndroidのChromeでは、サイト側が Web App Manifest というファイルを用意していて、条件を満たしているときだけアドレス欄にインストールの印が出ます。つまり、入れられるかどうかをサイト側が決めています。「このサイトはPWAに対応していないから入れられない」という説明は、この仕組みを指しています。

Macの Safari は、ここが違います。Dockに追加する操作は、サイト側が対応しているかどうかを問いません。マニフェストを持たないページでも、Dockのアイコンを押せば独立した窓として開きます。社内の管理画面でも、古い掲示板でも、対応表に載っていないサービスでも同じです。

A web app functions independently of Safari. It shares no browsing history, cookies, website data, or settings with Safari. 出典: support.apple.com

Apple の説明にあるとおり、Dockに追加したものは Safari とは別の入れ物として動きます。履歴も、Cookie も、サイトのデータも、設定も共有しません。ここを読み違えると後で困るので、詰まる場所の節でもう一度触れます。

つまり、Macで「PWAを入れる」と言うとき、多くの場合はPWAの定義を満たしているかどうかは関係ありません。関係しているのは、そのサイトを独立した窓で開きたいかどうかだけです。PWAという言葉でうまく検索できなかった人が、実は探していたのは「サイトを独立したアプリの形で開く方法」だった、という取り違えはよく起きます。

入れたあとに、実際に変わること

独立した入れ物にすると、日々の操作のうち次の点が変わります。どれも小さな違いに見えますが、毎日何度も繰り返す動作なので、積み上がると体感が変わります。

窓が単独になります。タブの列から切り離されるので、他のタブを閉じる作業の巻き添えで消えることがなくなります。調べ物で20枚のタブが開いている状態でも、その窓だけは別に残ります。

Dockに常駐します。押せば前面に出るので、ブラウザを前に出してからタブを探す、という2段階が1段階になります。Dockに置いたものは Spotlight の検索対象にもなるため、名前の数文字を打てば呼び出せます。

アプリ切り替えの対象になります。Macのアプリ切り替えは、ブラウザの中のタブまでは見てくれません。独立した入れ物にして初めて、切り替えの列に自分のアイコンとして並びます。

通知の見え方が変わります。Safariで作った入れ物は Web Push と バッジ表示に対応していて、未読の数がDockのアイコンの上に赤い印として出ます。サイト側が通知に対応していることが前提ですが、対応していれば、ブラウザを開いていない時間帯でも気づけるようになります。

権限の管理単位が分かれます。カメラとマイク、画面、位置情報の許可は、その入れ物ごとに設定できます。サイトのデータを消す操作も入れ物ごとに分かれているので、ブラウザ側の履歴やデータに触らずに、その1つだけを初期化できます。

入れても、変わらないこと

期待しすぎると落差が大きいので、変わらない部分も先に押さえておきます。

中身はWebのままです。通信が切れたときにどこまで使えるかは、サイト側の作りで決まります。入れ物を替えても、オフラインで動かない機能が動くようにはなりません。

表示の速さはほとんど変わりません。読み込んでいるものが同じなら、描画にかかる時間も同じです。速くなるのは「そのサイトにたどり着くまでの操作」であって、サイト自体の動作ではありません。

ログインの扱いが自動で引き継がれ続けるわけではありません。ここは誤解が多いので次の節で分けて書きます。

ブラウザの拡張機能は、そのままの形では持ち込めません。Safariで作った入れ物のツールバーには、戻る、進む、共有に加えて、インストール済みの Safari 拡張機能に関わるボタンが並びます。一方、Chromium 系の入れ物では拡張機能の扱いがブラウザ本体とは別になります。広告の非表示やページの書き換えを拡張機能に頼っている人は、入れる前にその1点だけ確かめておくと、作り直しの手間が減ります。

詰まりやすい4か所

ログインが切れる

Safariで追加したとき、そのサイトの Cookie は追加した瞬間に入れ物へコピーされます。だから作った直後はログイン済みの状態で開きます。ところが、コピーされるのはその1回だけで、その後はブラウザ側と行き来しません。ブラウザでログアウトしたり、パスワードを変えたり、二段階認証をやり直したりしても、入れ物の側は追従しません。逆に、入れ物の中でログインし直しても、ブラウザ側は知らないままです。

「作った直後は入れたのに、しばらく経ったらまたログインを求められた」という状態は、故障ではなくこの仕組みどおりの動きです。ログインし直せば済みますが、認証アプリやパスワードの保管場所をブラウザの拡張機能に置いている人は、入れ物の中でそれが使えないことに気づきます。この場合は、パスワードの保管をブラウザの外に出すか、入れ物を作るサイトを選ぶか、どちらかを決める必要があります。

拡張機能が前提の作業が止まる

毎日の作業に拡張機能が組み込まれている場合、独立した入れ物に移した途端にその工程だけが抜けます。翻訳、要約、スクリーンショット、フォームの自動入力あたりが典型です。入れる前に、そのサイトで拡張機能を何回使っているかを数えておくと判断が早くなります。1日に何度も使っているなら、そのサイトはブラウザのタブに残したほうが結果的に速いです。

同じサービスの2つ目のアカウント

仕事用と個人用など、同じサービスを2つのアカウントで使い分けている場合、入れ物を2つ作れば分けられるように見えます。ただし、ブラウザの機能で作るものは、作ったときのブラウザのプロファイルに紐づきます。どのプロファイルで作ったかを覚えていないと、あとから「どちらのアカウントで開くのか分からない入れ物」が2つ並ぶことになります。作る前にプロファイルを決めて、名前にもその区別を入れておくのが手戻りの少ない順番です。

リンクの開き先

入れ物の中でリンクを押したとき、それが入れ物の中で開くのか、既定のブラウザで開くのかは、そのリンク先が入れ物の範囲に入っているかで決まります。macOS Sequoia 以降は、押したリンクが入れ物の範囲と一致していれば、既定のブラウザではなく入れ物の側で開くようになりました。範囲の外に出るリンク、たとえば外部サイトへの案内や、認証のために別ドメインを経由する画面は、ブラウザ側に飛びます。認証の途中でブラウザに飛ばされて戻ってこない、という詰まり方をするサービスがあるのはこのためです。

ブラウザごとの違い

ブラウザ	入れる操作	作られる場所	対応していないサイト
Safari	ファイルメニューの「Dockに追加」	ホームフォルダのアプリケーション	マニフェストが無くても作れる
Chrome	「キャスト、保存、共有」の中の「ページをアプリとしてインストール」	アプリケーションの中の Chrome Apps	作れる。ただしプロファイルに紐づく
Microsoft Edge	同種のインストール項目	アプリケーションの中の Edge Apps	作れる
Firefox	該当する機能は無い	作られない	作れない

Firefox は、サイトごとの独立した窓を作る機能を過去に試作していましたが、隠し設定でしか使えず不具合も残っていたため、86 で削除されています。デスクトップ版でこの種の機能を復活させる計画は示されていません。Firefox を主に使っている人が「手順どおりに探しても項目が無い」と感じるのは、機能が見つけにくいのではなく、存在していないためです。

入れる価値があるサイトの見分け方

全部のサイトを入れ物にすると、Dockが埋まって元の問題に戻ります。判断は次の順で付きます。

まず、1日に何回そのサイトを開き直しているかを数えます。朝に開いて夜まで開きっぱなしにするサイトは、独立した入れ物にする効果が大きいです。逆に、週に1回しか開かないものはブックマークで足ります。

次に、そのサイトから通知を受け取りたいかを決めます。受け取りたいなら、独立した入れ物にする価値があります。通知は要らない、見たいときに自分で開くだけ、という使い方なら、入れ物にしなくても困りません。

3つ目に、そのサイトで拡張機能を使っているかを確かめます。使っているなら、拡張機能を手放してよいかどうかがそのまま判断になります。

最後に、他の作業と混ざると困るかを見ます。仕事の管理画面と個人の買い物が同じ窓に並ぶのが嫌なら、入れ物を分ける意味があります。混ざっても気にならないなら、タブのままで支障はありません。

この4つのうち2つ以上が当てはまるサイトだけを入れ物にすると、Dockは埋まらず、効果だけが残ります。

対応表から読み取れる、入れ物にされやすいサイトの傾向

サイトをアプリの形にする道具の多くは、よく使われるサービスをあらかじめ用意しています。対応サービス一覧には、そうして整えられたサービスが並んでいて、どの種類のサイトが独立した入れ物にされやすいかが読み取れます。上位に来るのは、対話型のAI、チャット、ノート、案件や課題の管理、カレンダー、メールの類です。いずれも「開きっぱなしにする」「通知を受け取る」「他の作業と混ぜたくない」という条件に当てはまります。

逆に、検索や買い物や動画の視聴のように、用事があるときだけ開くサイトはこの並びの中では目立ちません。前の節で挙げた判断基準と、実際に用意されているサービスの傾向は、おおむね一致しています。

どこまでをアプリらしく振る舞わせられるかは道具によって差があり、名前とアイコンだけを替えるものから、通知やキー操作まで面倒を見るものまで幅があります。何が設定できるのかはできることに一覧があり、実際に作る流れは使い方ガイドに手順として並んでいます。費用の考え方は料金に、権限やデータの扱いについての細かい疑問はよくある質問にまとまっています。

最初に手を付けるなら、いま開いているタブの中から、朝いちばんに開いて夜まで閉じないものを1つだけ選んで試すのが確実です。1つで効果が分かれば、2つ目以降は迷わなくなります。