🔖

VueアプリケーションをPWAに対応させる

桑原荘馬

2025/05/09に公開

PWA

tech

こんにちは、RUN.EDGE株式会社の桑原です。
今回は、前回の内容を踏まえて、SPAで作成したアプリケーションをPWA対応させる際に必要な設定を紹介したいと思います。
なお、PWAに対応させるためには、事前にService Workerの導入が必要です。Service Workerの導入は前回の記事の後半で紹介しているので、まだ導入していないよという方は参考にしていただければ幸いです。

https://zenn.dev/run_edge/articles/2883090cec2e67#service-workerの導入（workboxの導入）


PWAとして起動したアプリケーション。起動用のアイコンをデスクトップやスタートメニューに配置でき、ブラウザからは独立したアプリケーションとして利用できるようになる

 Manifestファイルの作成まず、manifest.json ファイルを作成し、index.htmlと同じディレクトリに配置されるようにします。(Vueの場合はpublicディレクトリの直下に作成すればよいでしょう)

また、アイコン等を設定する場合はアイコンのassetも合わせて配置するようにします。
以下は設定例です。
manifest.json
{
  "name": "Sample App",
  "short_name": "Sample App",
  "start_url": "index.html",
  "display": "standalone",
  "orientation": "landscape",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "pwa_assets/logo_512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

name:アプリケーションのフルネームを指定します。ユーザーがアプリケーションをインストールした際に表示される名前です。

short_name:アプリケーションの短縮名を指定します。スペースが限られている場合に表示される名前です。例えば、ホーム画面のアイコンの下に表示されます。

start_url:アプリケーションが起動する際のURLを指定します。ユーザーがアプリケーションを起動したときに最初に表示されるページです。基本的にはindex.htmlを指定すれば良いと思いますが、PUBLIC_PATHを指定している場合などはそのパスも含んだ値を指定する必要があります。

scope:アプリケーションのスコープを指定します。スコープは、アプリケーションが制御するURLの範囲を定義します。この例では、"/"が指定されており、アプリケーションがルートディレクトリ全体を制御することを意味します。このスコープを外れたURLはService Workerの制御範囲外になったり、リンクを開いた際にPWAではなく通常のブラウザで開かれるようになったりします。

display: アプリケーションの表示モードを指定します。"standalone"は、アプリケーションがネイティブアプリのように表示され、ブラウザのUI要素（アドレスバーなど）が表示されないことを意味します。他には、"fullscreen"、"minimal-ui"、"browser"などがあります。

orientation:アプリケーションのデフォルトの画面の向きを指定します。この例では、"landscape"が指定されており、特にモバイルデバイスを使ってアプリケーションを表示したときには横向きで表示されることを意味します。ただし、iOSではこの値は無視される場合も多いようです。

background_color:アプリケーションの背景色を指定します。アプリケーションがロードされる際に表示される背景色です。

theme_color:アプリケーションのテーマカラーを指定します。ブラウザのUI要素（ツールバーなど）の色に影響を与えます。

icons:アプリケーションのアイコンを指定します。アイコンは、アプリケーションがインストールされた際にホーム画面やアプリランチャーに表示されます。
最後にこのmanifest.jsonをindex.htmlファイルで読み込むようにすれば完了です。
index.html
  <head>
    ...
    <link rel="manifest" href="<%= BASE_URL %>manifest.json" />
    ...
  </head>

 PWAのリンクの取り扱いについてPWAでアプリ実行時にリンクを開いたときの挙動がOS / ブラウザによって違うので注意が必要です。


OS
ブラウザ
リンクの種類
挙動


Win / Mac
Chrome
内部リンク(<a>タグ)
PWAアプリ内で開く

Win / Mac
Chrome
外部リンク(<a>タグ)
Chromeで開く

Win / Mac
Chrome
内部リンク（window.open）
Chromeで開く

Win / Mac
Chrome
外部リンク（window.open）
Chromeで開く

iOS
Safari
内部リンク(<a>タグ)
PWAアプリ内で開く

iOS
Safari
外部リンク(<a>タグ)
PWA内で別途内部ブラウザが起動して開く

iOS
Safari
内部リンク（window.open）
PWAアプリ内で開く

iOS
Safari
外部リンク（window.open）
PWA内で別途内部ブラウザが起動して開く

PCの場合は
内部リンク[1]の場合はPWAアプリ内で開く
内部リンクの場合でもwindow.open()を使った場合は外部ブラウザで開く
外部リンクの場合は常に外部ブラウザで開く
というような挙動になるのですが、iOSの場合は
内部リンクの場合はPWAアプリ内で開く

window.open()を使っても同様に内部リンクで開く
外部リンクの場合はPWA内で内部ブラウザが立ち上がり、そこで表示される
というような挙動になります。

PCの場合は特に問題ないのですが、iOSの場合は、内部リンクの場合常にPWA内で開いてしまいます。standaloneモードで起動している場合は戻るボタンなどが表示されないので、例えば「戻るボタンのない印刷用のプレビュー画面を表示したい」場合に、scope範囲内のURLでプレビューページを作ってしまうと、プレビュー画面がPWA内で表示されてしまい、ユーザーが操作できなくなってしまうなどの問題が発生する可能性があります。
PWAを利用したアプリケーションを作成する場合は、scopeに含めるべきページと含めない方が良いページをきちんと切り分けて、戻るボタンやURLバーが無いPWA内で開きたくないページはscopeの範囲外にするなど、PWAでの挙動も加味したルーティング設計を行うことが重要になります。

 まとめ今回はPWAの導入方法と注意点を簡単に紹介しました。記事の通り、Service Workerさえ導入できていればPWA化することは非常に簡単に行うことができます。また、PWAをiOSやAndroid、WindowsのアプリケーションとしてラップしてStoreに公開することができるPWABuilderというものもあるようなので、Webサービスをアプリ化する際の選択肢の一つとして検討してみるのも良いかもしれません。
https://www.pwabuilder.com/

脚注
ここでいう「内部リンク」というのは、manifest.jsonのscopeに設定した範囲内のURLであることを指します。 ↩︎

OS	ブラウザ	リンクの種類	挙動
Win / Mac	Chrome	内部リンク(<a>タグ)	PWAアプリ内で開く
Win / Mac	Chrome	外部リンク(<a>タグ)	Chromeで開く
Win / Mac	Chrome	内部リンク（window.open）	Chromeで開く
Win / Mac	Chrome	外部リンク（window.open）	Chromeで開く
iOS	Safari	内部リンク(<a>タグ)	PWAアプリ内で開く
iOS	Safari	外部リンク(<a>タグ)	PWA内で別途内部ブラウザが起動して開く
iOS	Safari	内部リンク（window.open）	PWAアプリ内で開く
iOS	Safari	外部リンク（window.open）	PWA内で別途内部ブラウザが起動して開く

RUN.EDGE株式会社Publication

スポーツ・教育・エンタープライズ向け映像分析プラットフォームを開発するスタートアップ・RUN.EDGE株式会社の公式テックブログです。 HP:run-edge.com/

Manifestファイルの作成

PWAのリンクの取り扱いについて

まとめ

Discussion