Vue PWA 关闭应用后黑屏
Vue PWA blank screen after closing the app
我已经创建了一个 PWA 应用程序,它运行良好。
Problem is:
用户在桌面上安装 PWA,它工作正常,但在关闭并重新打开后显示空白页。
同样在移动设备上,将网站添加到主页后显示空白页面。
var deferredPrompt;
LINK
问题出在 manifest.json
start_url
。
{
"name": "front-end",
"short_name": "front-end",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#4DBA87"
}
安装浏览器后,用户 index.html
作为起始 URL 并且不会呈现该应用程序。您应该将 start_url
更改为 /
或让 /index.html
呈现应用程序。
将“/index.html”的路由添加到您的默认路由器中。使用与 '/'
相同的 view/component
...
routes: [
{ path: '/', name: 'home', component: HomeView },
{ path: '/index.html', component: HomeView }, // Fix for PWA at /index.html
...
注意:不要对“/index.html”使用重定向,它不能解决移动浏览器上的问题:(
我已经创建了一个 PWA 应用程序,它运行良好。
Problem is:
用户在桌面上安装 PWA,它工作正常,但在关闭并重新打开后显示空白页。
同样在移动设备上,将网站添加到主页后显示空白页面。
var deferredPrompt;
LINK
问题出在 manifest.json
start_url
。
{
"name": "front-end",
"short_name": "front-end",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#4DBA87"
}
安装浏览器后,用户 index.html
作为起始 URL 并且不会呈现该应用程序。您应该将 start_url
更改为 /
或让 /index.html
呈现应用程序。
将“/index.html”的路由添加到您的默认路由器中。使用与 '/'
相同的 view/component...
routes: [
{ path: '/', name: 'home', component: HomeView },
{ path: '/index.html', component: HomeView }, // Fix for PWA at /index.html
...
注意:不要对“/index.html”使用重定向,它不能解决移动浏览器上的问题:(