質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

1回答

1650閲覧

Vue.js + Vue Router を使ったWEBアプリをiPhoneのSafariで開いて正しくホーム画面に追加する方法を教えてください

hasigyokuginkan

総合スコア28

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2019/04/06 11:32

前提・実現したいこと

Vue Router を使ったWEBアプリのをサブディレクトリの形でサーバーにデプロイしています。
そのWEBアプリを開いて iPhoneX で「ホーム画面に追加」したいです。

トップではないページにダイレクトにアクセスできるように Apache の設定は次のようにしています。
https://router.vuejs.org/ja/guide/essentials/history-mode.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B

WEBアプリのルートは仮に http://example.com/myapp とします。

発生している問題・エラーメッセージ

iPhoneX の Safari で http://example.com/myapp にアクセスし「ホーム画面に追加」すると、登録されたURL が http://example.com/ になってしまいます。 /myapp の部分が消えてしまいます。
※「ブックマークに追加」したときは、正しく http://example.com/myapp が登録されています。

試したこと

「ホーム画面に追加」するときは og:url を見るのではないかと考えて、次のタグを入れてみましたが、関係ありませんでした。

html

1<meta property="og:url" content="http://www.google.co.jp/">

補足情報

端末: iPhoneX (iOS 12.2)
ブラウザ: Safari
vue "^2.5.16"
vue-router "^3.0.1"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

manifest.json を用意して start_url を設定してください。
これがホーム画面に追加したときの URL になります。

json

1manifest.json 2{ 3 "lang": "ja", 4 "name": "My App", 5 "short_name": "My App", 6 "icons": [{ 7 "src": "/icon.png", 8 "sizes": "144x144", 9 "type": "image/png" 10 }], 11 "start_url": "http://example.com/myapp", 12 "display": "standalone" 13}

その後、HTML側で作った manifest.json を読み込む指定を入れます。

html

1<link rel="manifest" href="/manifest.json" />

投稿2019/04/06 19:47

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hasigyokuginkan

2019/04/07 02:28

教えていただいた方法で調べたところ、vue-cli で自動生成されていた public/manifest.json が自動的に読まれており、そのなかで start_url が明示されていたため、ホームに追加したときのURLが意図せず、固定されていました。とりあえずは、Safariのブックマークと同じようにホーム画面に登録できればよかったので いったん manifest.json を消すことで意図した通りの挙動になりました。原因の切り分けが難しかったのでたいへん助かりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問