Автономный дисплей PWA не работает
Я новичок в PWA (прогрессивные веб-приложения) и наткнулся на следующее: я не могу использовать свойство display файла manifest.json.
При добавлении приложения на домашний экран на моем iPhone приложение отображается в браузере Safari с отображением URL, а не как отдельное приложение.
Когда (например) я захожу на pokedex.org и добавляю это на мой домашний экран, приложение отображается как отдельное приложение (без URL-панели).
Я попытался использовать ngrok.io для размещения своего приложения, используя https:// вне моего локального хоста, и это тоже не работает.
Я попробовал инструменты для разработчиков на Safari, чтобы сбросить кэш на моем iPhone, так что это определенно не вызвано проблемами с кешем.
На вкладке приложения в Google Chrome указано, что это должно быть автономное приложение, и отображаются правильные логотипы / значки.
Приложение, которое я тестирую для этого, построено с использованием create-реагировать на приложение.
manifest.json
{
"short_name": "[hidden]",
"name": "[hidden]",
"description": "[hidden]",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "favicon/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "favicon/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "favicon/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "favicon/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "favicon/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "favicon/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
],
"start_url": "./index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="mobile-wep-app-capable" content="yes">
<meta name="apple-mobile-wep-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="%PUBLIC_URL%/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#000000">
<link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>[Hidden]</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
3 ответа
Проблема, казалось, заключалась в использовании:
<meta name="mobile-wep-app-capable" content="yes">
<meta name="apple-mobile-wep-app-capable" content="yes">
В веб-приложении была опечатка: wep-app.
Я передаю ту же проблему. Я обнаружил, что мне нужно добавить метатеги apple, а затем файл manifest.json после них.
Я предполагаю, что вы используете ionic с angular для своего PWA — вот как решить вашу проблему.
Внутри модуля маршрутизации вашего приложения установите для useHash значение true:
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })
],
exports: [RouterModule]
})
Затем просто убедитесь, что вы используете # в своем start_url внутри манифеста.
https://your-domain/#/your/path
Позвольте мне объяснить, почему это работает и почему вы можете столкнуться с этой проблемой.
Ваш начальный URL-адрес является точкой отсчета для браузера, и, изменяя его, браузер думает, что вы открываете ссылки внутри приложения. Используя хэш, вы, по сути, гарантируете, что URL-адрес будет выглядеть одинаково для браузера. Однако, чтобы запустить его в автономном или полноэкранном режиме, вам необходимо изменить точку отсчета на точку с хешем «/#» внутри вашего файла манифеста.json.