実現したいこと
ngrok公開環境でインストールのアイコンボタンを表示されてない？何故か？
発生している問題
ロカール環境で起動し、問題なく、インストールアイコンを表示されて、インストールできたが
ngrok公開環境ではできなかった
ソースコード
■フォルダ構成
pwa_flask_app/
├── app.py
├── static/
│ ├── icon.png
│ ├── manifest.json # Web App Manifestファイル
│ └── service-worker.js # Service Workerファイル
├── templates/
└── index.html # メインのHTMLファイル
■app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
■manifest.json
{
"name": "Test App",
"short_name": "Test",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/static/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
■service-worker.js
const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
'/',
'/static/icon.png',
'/static/manifest.json',
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
■index
<!DOCTYPE >
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="manifest"
href="{{ url_for('static', filename='manifest.json') }}"
/>
<title>Your PWA</title>
<link rel="icon" href="{{ url_for('static', filename='icon.png') }}" />
</head>
<body>
<h1>Hello, PWA!</h1>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker
.register("/static/service-worker.js")
.then((registration) => {
console.log(
"ServiceWorker registration successful:",
registration
);
})
.catch((error) => {
console.error("ServiceWorker registration failed:", error);
});
});
}
</script>
</body>
</html>
補足情報
ngrok http 127.0.0.1:5000
起動
回答 2件
回答するにはログインが必要です
ご質問ありがとうございます。
同じコードで、ngrokを使用して試してみましたが、インストールアイコンは表示されて、問題ないような気がします。
https://gyazo.com/08aed5713db86dd31ffd624148cd6f95
もう一度ご確認をお願いします。
1
ご確認いただきありがとうございます。
私の端末でgoogle ブラウザで何回も確認していた、表示されてないですね。
なんでしょうね。
今のところ、以下現象がございます。
①ngrok起動
ngrok http 127.0.0.1:5000
②google ブラウザ
https://aabb-xxx-13-191-128.ngrok-free.app
→上記起動し、インストールアイコンは表示されてない
③manifest.json確認
上記②後、【https://aabb-xxx-13-191-128.ngrok-free.app/static/manifest.json】
→上記開いて問題なく、json内容を表示された
④上記③後、ブラウザで【/static/manifest.json】の部分を消し、enterすると、
→インストールアイコンは表示された。
何か原因がご存知でしょうか？
よろしくお願い致します。