MacでPWAをインストールする方法と、ブラウザごとにできることの違い

毎日使うWebサービスを、ブラウザのタブではなく、Dockから開けるアプリのように使いたい。そう考えたときに役立つのが、PWA（プログレッシブウェブアプリ）の仕組みです。Macでは、Safari、Chrome、Edgeのいずれからでも、WebサイトをWebアプリとしてインストールできます。ただし、ブラウザによって手順も、できることも、削除の方法も少しずつ違います。

この記事では、Apple、Google、Microsoftの公式ヘルプと、Web技術の解説の定番であるMDNの記載をもとに、PWAの基本、ブラウザごとのインストールの手順、設定と削除の方法、ブラウザによって違う点を整理します。後半では、在宅の仕事でPWAを使うときの注意点にも触れます。

PWAとは何か

PWAとは、Webサイトを、端末にインストールしたアプリのように使えるようにする仕組みのことです。Webの技術で作られたサイトですが、インストールすると、ブラウザのタブではなく独立したウインドウで開き、Dockから起動できるようになります。

Webの技術の解説で広く参照されているMDNでは、ブックマークとPWAの違いを次のように説明しています。ブックマークは、Webサイトへの単なるリンクです。一方、PWAとして作られたWebサイトをインストールすると、ほとんどの端末で、通常のアプリのようにOSに深く組み込まれます。サイトによっては、独立したウインドウでの表示、通知、オフラインでの閲覧のための保存、ファイルの扱いなど、アプリに近い機能が使えるようになります。

MacでPWAが使えるようになったのは、2019年のChrome 73からです。当時のIT系ニュースサイトは、次のように伝えています。

すでにChrome 70でWindowsとLinuxにおけるPWA対応が行われており、今回のmacOSでのPWA対応で、まるでネイティブアプリのようにPWAアプリをmacOSにインストールし、ダブルクリックで起動できるようになりました。 出典: publickey1.jp

その後、2023年に公開されたmacOS Sonoma 14で、Safariにも「Dockに追加」の機能が加わりました。現在は、Safari、Chrome、Edgeのいずれでも、Webサイトをアプリのように使えます。

なお、PWAとして作られていない普通のWebサイトも、ブラウザによってはアプリのように独立したウインドウで開けます。ただし、PWAとして作られたサイトのほうが、通知やオフラインでの動作など、使える機能が多くなる傾向があります。

MacでPWAを入れる方法は3つ

Macで使える主な方法は、次の3つです。

方法	必要な環境	主な特徴
SafariのDockに追加	macOS Sonoma 14以降	追加のアプリ不要。名前やアイコンを自由に変えられる
Chromeのアプリとしてインストール	Chromeが入っていること	Chromeの拡張機能の仕組みと組み合わせやすい
Edgeのアプリとしてインストール	Edgeが入っていること	Microsoftのサービスと組み合わせやすい

どの方法も、基本の操作は無料です。普段使っているブラウザで試すのが、いちばん手軽な始め方です。

MDNによると、macOS 14（Sonoma）より前のmacOSでは、Safari以外のブラウザからPWAをインストールできました。macOS 14.0以降では、対応しているどのブラウザからでもインストールできます。古いMacでSafariを使っている場合は、Chromeなどの方法を選ぶことになります。

SafariでWebアプリにする手順

Appleのサポート情報「MacでSafari Webアプリを使う」に沿って、手順を整理します。macOS Sonoma 14以降が必要です。

1. Safariで、Webアプリとして使いたいWebページを開きます。
2. メニューバーから「ファイル」、「Dockに追加」の順に選びます。または、Safariのツールバーにある共有のボタンをクリックし、「Dockに追加」を選びます。
3. Webアプリに付けたい名前を入力し、「追加」をクリックします。

作ったWebアプリは、ホームフォルダの中の「アプリケーション」フォルダに保存され、DockやSpotlightからも開けるようになります。

SafariのWebアプリには、次のような特徴があります。

・閲覧履歴、Cookie、Webサイトのデータ、設定をSafariと共有しません。Safariのプロファイルと同じように、ほかの閲覧と切り分けられます。 ・ツールバーには、戻る、進む、共有のボタンと、インストールしたSafariの機能拡張のボタンが表示されます。ブックマークやタブが必要なときは、共有のボタンから「Safariで開く」を選んで切り替えられます。 ・好きな名前とアイコンを付けられます。 ・通知を送るWebサイトの場合は、Dockのアイコンに未読の件数を表示できます。 ・ログイン項目に追加して、Macにログインしたときに自動で開くようにもできます。

この機能は、PWAとして作られていないサイトでも使えます。よく使うサイトをDockから開けるようにしたいだけなら、まずはSafariのWebアプリを試すのが手軽です。

SafariのWebアプリの設定と削除

SafariのWebアプリは、作った後に設定を変えられます。Webアプリを開いて、メニューバーでそのアプリの名前をクリックし、「設定」を選びます。

設定項目	できること
アプリケーション名	新しい名前を付ける
アプリケーションURL	開くURLを変える、または「現在開いているページを指定」を選ぶ
アイコン	好きな画像に変える
ナビゲーションコントロールを表示	戻る、進む、共有などのボタンを表示するかを選ぶ
タイトルバーにカラーを表示	タイトルバーにWebサイトの色を反映するかを選ぶ

「プライバシー」のタブからは、プライバシーとセキュリティの設定を開いたり、そのWebアプリのCookieやキャッシュを消去したりできます。機能拡張のタブでは、Safariの機能拡張をWebアプリごとに有効にしたり無効にしたりできます。

通知を使う場合は、Webサイトが通知の許可を求めてきたときに、Safariではなく、Webアプリの中で「許可」をクリックします。すると、未読の件数がDockのアイコンに赤いバッジで表示され、Webアプリがシステム設定の「通知」の一覧に、Webアプリの名前で表示されるようになります。

使わなくなったWebアプリを削除するには、Finderのメニューバーから「移動」、「ホーム」の順に選び、ホームフォルダの中の「アプリケーション」フォルダを開いて、Webアプリをゴミ箱にドラッグします。Mac全体の「アプリケーション」フォルダではない点に注意してください。

Chromeでインストールする手順

Google Chromeのヘルプ「ウェブアプリを使用する」に沿って、手順を整理します。

1. パソコンでChromeを開きます。
2. インストールしたいWebサイトにアクセスします。
3. 右上のその他のメニューから、「キャスト、保存、共有」、「ページをアプリとしてインストール」の順に選びます。一部のWebサイトでは、アドレスバーの右側にインストールのボタンが表示されるので、そこから選ぶこともできます。
4. 画面の案内に沿ってインストールします。

Chromeのヘルプでは、一部のウェブアプリには、オフラインでコンテンツを見るための追加の保存、通知、ファイルへのアクセス、アイコンのバッジなどの機能が含まれると説明されています。ウェブアプリはオフラインでも動作しますが、インターネットに接続していないと完全には動作しないこともあるとされています。

Chromeのウェブアプリの管理と削除

Chromeでインストールしたウェブアプリは、新しいタブで「chrome://apps」を開くと一覧で管理できます。

ショートカットを作る。chrome://apps で、アプリを右クリックし、「ショートカットを作成」を選ぶと、すぐに開けるショートカットを作れます。

ログイン時に開く。chrome://apps で、アプリを右クリックし、「起動時に開く」を選ぶと、Macにログインしたときにアプリが自動で起動します。やめるときは、同じ項目の選択を外します。

削除する。削除したいウェブアプリを開き、右上のその他のメニューから「（アプリ名）をアンインストール」、「削除」の順に選びます。Chromeからアプリのデータも消したいときは、「Chromeからもデータを削除する」を選びます。

名前やアイコンの更新。ウェブアプリの表示名やアイコンが更新される場合は、Chromeから通知が届き、更新を受け入れるか、無視するか、アンインストールするかを選べます。Chromeのヘルプでは、アプリの名前がほかのアプリと紛らわしいものに変わるなど、悪意のある変更が疑われる場合は、アプリをアンインストールするよう注意されています。

Edgeでインストールする手順

Microsoft Edgeでも、同じようにWebサイトをアプリとしてインストールできます。MicrosoftのEdgeの開発者向けの文書によると、EdgeがそのWebサイトをインストールできるPWAだと判断すると、アドレスバーに「利用可能なアプリ」のアイコンが表示されます。そのアイコンをクリックし、「インストール」をクリックすると、インストールが完了します。

インストールしたアプリの一覧は、Edgeで「edge://apps」を開くと確認できます。アプリの情報を見たり、アンインストールしたりできます。Edgeの設定のメニューからも、アプリの一覧を開けます。

MDNによると、デスクトップのChromeとEdgeでは、PWAとして作られたページを開いたときに、まだそのブラウザでインストールしていなければ、アドレスバーにインストールのアイコンが表示されます。アイコンを選ぶと、インストールするかを確認する画面が出て、承認するとインストールされます。インストールすると、macOSではDockにアイコンが表示され、ほかのアプリと同じように扱えます。

Firefoxではどうなるか

Firefoxを普段使っている人は、Firefoxでインストールできるかが気になるところです。MDNでは、FirefoxでPWAを使うには、PWAのための拡張機能が必要だと説明されています。Firefoxの標準の機能だけでは、Macでのインストールはできないと考えておきましょう。

Firefoxを使い続けたい場合は、よく使うサービスだけSafariのWebアプリやChromeのウェブアプリにする、という使い分けが現実的です。ブラウザをまたいでも、それぞれのWebアプリは独立して動くので、普段の閲覧はFirefox、決まったサービスはWebアプリ、という組み合わせで困ることは少ないはずです。

ブラウザごとにデータは共有されない

PWAを使ううえで知っておきたいのが、インストールしたブラウザとの関係です。MDNでは、次のように説明されています。

ブラウザでインストールしたPWAは、そのブラウザに結び付いたままになります。つまり、インストールに使ったブラウザが、そのPWAを動かすブラウザです。同じPWAを別のブラウザからもインストールすると、2つのアプリは別々に動き、データは共有されません。

たとえば、EdgeでインストールしたPWAがあっても、Chromeでそのサイトを開くと、Chromeはインストールを勧める表示を出し続けます。Chromeからもインストールすると、同じPWAが2つ存在することになり、それぞれのデータは別々です。

削除の方法も、インストールに使ったブラウザによって変わります。どのブラウザでインストールしたかを覚えておかないと、削除するときに迷うことがあります。アプリの名前の付け方を工夫したり、メモを残したりしておくと安心です。

この「データが共有されない」性質は、仕事では便利にも使えます。たとえば、仕事用のGoogleアカウントで使うサービスはSafariのWebアプリ、個人のアカウントはChromeのブラウザ、というように分ければ、アカウントの取り違えを防げます。

ブラウザごとの違いを整理する

ここまでの内容を、公式の記載で確かめられた範囲で表にまとめます。

比べる点	Safari	Chrome	Edge
入れ方	「ファイル」から「Dockに追加」	その他のメニューから「ページをアプリとしてインストール」	アドレスバーのアプリのアイコンから「インストール」
一覧の管理	ホームフォルダの「アプリケーション」	chrome://apps	edge://apps
名前とアイコン	設定から自由に変更	サイトの指定に従う（更新時に通知）	サイトの指定に従う
削除	ゴミ箱にドラッグ	アプリのメニューからアンインストール	アプリの一覧からアンインストール
拡張機能	Safariの機能拡張をアプリごとに切り替え	Chromeの仕組みを利用	Edgeの仕組みを利用

Safariは名前やアイコンを自由に変えられる点、ChromeとEdgeはPWAとして作られたサイトの機能を生かしやすい点が、それぞれの強みです。どれを選んでも大きな失敗はないので、まずは普段使っているブラウザから試すとよいでしょう。

PWAとして作られたサイトかを見分ける

インストールしようとしているサイトが、PWAとして作られているかどうかで、使える機能が変わります。見分け方の目安を挙げます。

ChromeやEdgeでは、PWAとして作られたページを開くと、アドレスバーにインストールのアイコンが表示されます。MDNでも、デスクトップのChromeとEdgeでは、PWAであるページを開いたときに、まだインストールしていなければURLバーにインストールのアイコンが表示されると説明されています。このアイコンが出るサイトは、PWAとしての機能を備えていると考えてよいでしょう。

アイコンが出ないサイトでも、Chromeのその他のメニューの「ページをアプリとしてインストール」や、Safariの「Dockに追加」を使えば、独立したウインドウで開けるようにはなります。ただし、この場合はブックマークに近い使い方になり、オフラインでの表示や通知など、PWAならではの機能は使えないことがあります。

もう1つの目安は、インストールした後の動きです。インターネットにつながっていない状態で開いても、画面の一部が表示されるサイトは、オフラインに備えた作りになっています。何も表示されないサイトは、通常のWebサイトに近い作りだと考えられます。

使いたい機能がはっきりしている場合、たとえば通知を受けたい、ネットが不安定な場所でも開きたい、という場合は、そのサービスの公式ヘルプで、Webアプリとしての使い方が案内されているかを確かめておくと安心です。

うまく動かないときに確かめること

Webアプリが開かない、ログインできない、通知が来ないといったときに、確かめたい点を順に挙げます。

ブラウザとmacOSの版

SafariのDockに追加はmacOS Sonoma 14以降が必要です。ChromeやEdgeは、ブラウザ自体が最新になっているかを確かめます。ブラウザが古いままだと、Webアプリの動きが不安定になることがあります。

通知の許可

SafariのWebアプリで通知が来ない場合は、Safariではなく、Webアプリの中で通知を許可したかを確かめます。許可していれば、システム設定の「通知」の一覧に、Webアプリの名前で表示されているはずです。

サイトのデータを消して入り直す

ログインの状態がおかしいときは、SafariのWebアプリなら、設定の「プライバシー」のタブからそのWebアプリのCookieやキャッシュを消去し、ログインし直します。Chromeのウェブアプリなら、いったんアンインストールし、「Chromeからもデータを削除する」を選んでから入れ直す方法があります。ただし、データを消すと、保存していた設定や下書きが消えることがあるので、必要なものは先に控えておきましょう。

インストールしたブラウザを確かめる

同じサービスを複数のブラウザでインストールしていると、どれを開いているのか分からなくなることがあります。Dockのアイコンを右クリックして表示される情報や、chrome://apps、edge://apps の一覧で、どのブラウザのアプリかを確かめます。

職種ごとにWebアプリにする候補

どのサービスをWebアプリにするかは、職種によって変わります。在宅で働く人の例を挙げます。

ライターや編集の仕事では、原稿を書く文書のサービス、取引先との連絡のチャット、表記の確認に使う辞書のサイトが候補です。原稿の画面と調べものの画面を分けておくと、書くことに集中しやすくなります。

事務やアシスタントの仕事では、メール、カレンダー、表計算、経費の精算のサービスが候補です。カレンダーをWebアプリにして通知を受けるようにすると、会議や締め切りを見逃しにくくなります。

営業や顧客対応の仕事では、顧客管理のサービスや問い合わせの管理画面が候補です。開く回数が多い画面ほど、Dockから一発で開けるようにしておく価値があります。

エンジニアの仕事では、課題の管理、文書の共有、サーバーの管理画面などが候補です。管理画面のように、開く回数は少なくても、開くときは急いでいるものをWebアプリにしておくと、いざというときに慌てずに済みます。

どの職種でも、まずはいちばんよく開くサービスを1つWebアプリにして、使い心地を確かめるところから始めるとよいでしょう。

Webアプリを長く使うための管理のコツ

Webアプリを作り始めると、気づけば数が増え、どれをどのブラウザで入れたのか分からなくなることがあります。長く使い続けるための管理のコツを挙げます。

1つ目は、名前で見分けをつけることです。SafariのWebアプリは名前を自由に変えられるので、「Slack A社」「カレンダー 個人」のように、サービス名と用途が分かる名前にしておきます。取引先ごとに同じサービスを分けて使う場合は、特に大切です。

2つ目は、どのブラウザで入れたかを決めておくことです。MDNの説明のとおり、Webアプリは入れたブラウザに結び付き、削除の方法もブラウザによって違います。「仕事のサービスはSafari、個人のサービスはChrome」のように、ブラウザの役割を決めておくと、後で迷いません。

3つ目は、ログイン項目を見直すことです。Macにログインしたときに自動で開くWebアプリが増えると、起動に時間がかかるようになります。毎日必ず使うものだけを自動で開くようにし、それ以外は必要なときに開く形にしておきましょう。

4つ目は、定期的に片付けることです。取引が終わった取引先のサービスのWebアプリは、ログアウトしてから削除し、ログインの情報が残らないようにします。数か月に1度、ホームフォルダの「アプリケーション」フォルダや chrome://apps の一覧を見直す習慣をつけると、使わないアプリがたまりません。

PWAとWebサイトのアプリ化ツールの違い

PWAの仕組みとは別に、Webサイトを独立したMacのアプリに変える専用の道具もあります。両者の違いを整理しておきます。

PWAは、ブラウザに標準で備わっている仕組みです。無料で使え、追加のアプリも要りません。一方で、できることはブラウザの機能の範囲に限られます。アプリごとに細かくリンクの開き方を決めたり、拡張機能をアプリごとに分けたりといった調整は、ブラウザによってはできません。

専用の道具は、こうした細かい調整を目的に作られています。アプリごとにブラウザのプロファイルを分ける、リンクをどこで開くか決める、メニューバーやサイドバーに置く、といった機能を持つものがあります。そのかわり、有料のものや、使える数に制限のあるものが多くなります。

まずはPWAで試し、不満が出てきたら専用の道具を検討する、という順番で考えると、無駄な出費を避けられます。

在宅ワークでPWAを使う場面

在宅で働く人にとって、PWAは作業の切り替えを速くする手軽な方法です。

たとえば、チャットツール、カレンダー、タスク管理、文書の作成のサービスを、それぞれWebアプリにしてDockに並べておきます。Command＋Tabで切り替えられるようになるので、ブラウザのタブを探す時間が減ります。通知の件数がDockに表示されるので、返事が必要な連絡にも気づきやすくなります。

取引先ごとに別のアカウントを使う人は、ブラウザごとにデータが分かれる性質を生かせます。取引先AのサービスはSafariのWebアプリ、取引先BのサービスはChromeのウェブアプリ、というように分ければ、ログインし直す手間がなくなります。

デザインや制作の仕事では、デザインツールや素材のサービスをWebアプリにしておくと、作業の画面がすっきりします。デザイナーの報酬の傾向はデザイナーの年収・単価相場で確かめられます。在宅で働く環境を整える費用には、事業者向けの支援制度が使える場合もあり、テレワークの支援策はテレワーク 助成金 2026で整理されています。

使うときに気をつけたいこと

PWAは便利ですが、仕事で使うときには注意したい点もあります。

1つ目は、偽物への注意です。Chromeのヘルプでも、アプリの名前がほかのアプリと紛らわしいものに変わるなど、悪意のある変更が疑われる場合はアンインストールするよう呼びかけられています。インストールするのは、公式のURLであることを確かめたサイトだけにしましょう。

2つ目は、権限の確認です。通知、位置情報、ファイルへのアクセスなど、Webアプリが求める許可は、本当に必要なものだけを許可します。許可した内容は、ブラウザやシステム設定から後で見直せます。

3つ目は、ログインの状態です。Webアプリごとにログインが保たれるので、Macを家族と共用している場合や、席を離れることが多い場合は、Macの画面のロックを必ず設定しておきましょう。

4つ目は、取引先の決まりです。会社によっては、業務で使ってよいブラウザやソフトを指定していることがあります。迷ったら取引先に確かめましょう。

ブラウザの機能で足りないときの選択肢

PWAやSafariのWebアプリで足りない場合、たとえば「Chromeの拡張機能をアプリごとに使い分けたい」「アカウントごとにアプリを分けたい」「Chromeの更新のたびにアプリの調子が悪くなるのを避けたい」といった要望がある場合は、Webサイトを独立したアプリに変える専用の道具が候補になります。その1つが「Kagemusha」です。

公式サイトによると、KagemushaはWebサイトを独立したmacOSのアプリに変える道具で、macOS 12以降に対応しています。Chrome、Microsoft Edge、Brave、Vivaldi、Operaなど7つのブラウザエンジンから選べ、Chromeのウェブストアの拡張機能がそのまま動きます。各アプリには独立したブラウザのプロファイルが自動で割り当てられ、Cookie、ログインの状態、履歴、キャッシュがアプリ間で分かれます。Chromeが数週間ごとに更新されても、ブラウザの更新を検知してアプリを自動で同期し直す仕組みを備えていると説明されています。300以上の人気サービスの設定が用意されており、選ぶだけでURL、公式のアイコン、アプリ名が自動で設定されます。

料金は、3つのアプリまで無料で、すべての機能を使えます。4つ以上のアプリを作る場合は、買い切りのProが3,980円（税込）です。

Kagemushaは、@SOHOを運営する株式会社ライフスケープが開発・提供しています。

運営者として見てきた、作業の環境を整える人

フリーランスと在宅ワークの市場を20年運営してきた立場から言えば、長く仕事が続く人は、作業の環境を自分で整える小さな工夫を積み重ねています。よく使うサービスをすぐに開けるようにしておく、取引先ごとにアカウントを分けて取り違えを防ぐ、通知を見逃さないようにする。どれも地味ですが、返事の速さや連絡の正確さにつながり、「この人に任せると安心」という評価を支えます。PWAは、そうした工夫を追加の費用なしで始められる手段です。

もう1つ見えているのは、作業の効率を上げるほど、手取りの構造が収入に響くということです。道具で作業の切り替えの時間を減らせても、1件ごとに仲介の手数料が差し引かれれば、受け手に残る金額は伸びません。依頼者と受け手が直接やり取りできる手数料0%の仕組みなら、効率が上がった分は、そのまま受け手の手取りと依頼者の予算の余裕になります。Webアプリや業務システムを作る仕事はアプリケーション開発のお仕事で、ITの活用を支援する仕事はAIコンサル・業務活用支援のお仕事で紹介されています。

よくある質問

Q. MacでPWAを使うのにお金はかかりますか？

Safari、Chrome、Edgeのいずれも、WebサイトをWebアプリとしてインストールする機能は無料で使えます。追加のアプリも必要ありません。SafariのDockに追加はmacOS Sonoma 14以降が必要です。WebサービスによってはWebアプリの中で有料の機能があるので、それはサービスごとに確認してください。

Q. SafariのWebアプリはどうやって削除しますか？

Appleのサポート情報によると、SafariのWebアプリはホームフォルダの中の「アプリケーション」フォルダに保存されています。Finderのメニューバーから「移動」、「ホーム」の順に選び、「アプリケーション」フォルダを開いて、Webアプリをゴミ箱にドラッグすると削除できます。

Q. ChromeとSafariで同じサイトをインストールするとどうなりますか？

MDNによると、ブラウザでインストールしたPWAはそのブラウザに結び付いたままになり、別のブラウザから同じPWAをインストールすると、2つのアプリは別々に動いてデータは共有されません。削除の方法もインストールしたブラウザによって変わるので、どのブラウザで入れたかを覚えておきましょう。

Q. FirefoxでもMacにPWAをインストールできますか？

MDNでは、FirefoxでPWAを使うには、PWAのための拡張機能が必要だと説明されています。Firefoxの標準の機能だけではインストールできないので、よく使うサービスだけSafariやChromeでWebアプリにし、普段の閲覧はFirefoxで行うといった使い分けが現実的です。