Как установить PWA на мобильное устройство ⇐ Android

[Anonymous]

Во-первых, информация о проекте и системе < /p>

[*] Simple-Pwa An Mre. Последний год-проект Фактический код проекта. Весь код предназначен для Simple-PWA. Все проблемы, с которыми сталкиваются в Simple-PWA , также применяются к [последнему года-процессу ].
Проект выполняется с помощью TypeScript, Svelte, Sveltekit и Vite. /> < /ul>
Теперь проблема, с которой я сталкиваюсь. Я не могу установить PWA на мобильное устройство. Я читал здесь, что существуют конкретные требования и исключения относительно того, какие устройства могут установить PWA, с учетом этого я решил проверить на Chrome и Brave. Пост также не получает надлежащего разрешения. Как таковой, я это сделал. Я создал сертификаты вручную, как это: < /p>

Код: Выделить всё

brew install mkcert
mkcert -install
brew install nss
mkcert  localhost 127.0.0.1 ::1

где ip -это значение, сгенерированное при запуске NPM, запустите dev - - -host для обнаружения веб -приложения. Затем я создал Manifest.json с несколькими значками и описаниями и другими соответствующими областями. Это manifest.json для mre.

Код: Выделить всё

{
"id": "/",
"name": "simple-pwa",
"icons": [
{
"src": "icons/icon.jpg",
"type": "image/jpg",
"sizes": "512x512"
},
{
"src": "icons/icon-144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "icons/icon-192.jpg",
"type": "image/jpg",
"sizes": "192x192"
}
],
"description": "Test",
"display": "standalone",
"start_url": "/",
"screenshots": [
{
"src": "icons/icon.jpg",
"type": "image/jpg",
"sizes": "512x512",
"form_factor": "wide"
},
{
"src": "icons/icon.jpg",
"type": "image/jpg",
"sizes": "512x512",
"form_factor": "narrow"
}
]
}
< /code>
Чтобы сделать его доступным в автономном режиме, я решил включить обслуживающего работника с этим контентом: < /p>
/// 
/// 
/// 
/// 

const sw = /** @type {ServiceWorkerGlobalScope} */ (
/** @type {unknown} */ (self)
);
import { build, files, version, prerendered } from "$service-worker";

// Create a unique cache name for this deployment
const CACHE = `cache-${version}`;
console.log(`Current version: ${CACHE}`);

const ASSETS = [
...build, // the app itself
...files, // everything in `static`
...prerendered,
];

sw.addEventListener("install", (event) => {
event.waitUntil(async () => {
console.log("Cashing assets.");
const cache = await caches.open(CACHE);
await cache.addAll(ASSETS);
});
});

// TODO: This is from gemini, will need to vet through it.
// https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers
sw.addEventListener("activate", (event) => {
event.waitUntil(
caches.keys().then(async (keys) => {
// delete old caches
for (const key of keys) {
if (key !== CACHE) await caches.delete(key);
}
}),
);
});

sw.addEventListener("fetch", (event) => {
async function respond() {
const url = new URL(event.request.url);
const cache = await caches.open(CACHE);

// `build`/`files` can always be served from the cache
if (ASSETS.includes(url.pathname)) {
const response = await cache.match(url.pathname);

if (response) {
return response;
}
}

// for everything else, try the network first, but
// fall back to the cache if we're offline
try {
const response = await fetch(event.request);

// if we're offline, fetch can return a value that is not a Response
// instead of throwing - and we can't pass this non-Response to respondWith
if (!(response instanceof Response)) {
throw new Error("invalid response from fetch");
}

if (response.status === 200) {
cache.put(event.request, response.clone());
}

return response;
} catch (err) {
const response = await cache.match(event.request);

if (response) {
return response;
}

// if there's no cache, then just error out
// as there is nothing we can do to respond to this request
throw err;
}
}

event.respondWith(respond());
});

Теперь, когда я захожу на веб-страницу на URL-адресу, который обслуживается с помощью NPM Run Dev--host , я действительно вижу кнопку установки, и я могу искать «Simple-PWA» через Spotlight Search. Я могу убить терминал, который имеет команду NPM запустить dev---host , а Simple-PWA все еще доступен и кэширован. Итак, я нажал три точки в правом нижнем углу (для смелых), а затем нажал «Добавить» на главный экран. Я убил терминал, а потом, когда я обновил страницу, ушел. Я получаю ошибку. < /P>
У меня есть много видео и статей, которые не помогают мне с моей конкретной проблемой. Например: < /p>

Руководство Microsoft PWA показывает, как сделать PWA, установленную, но только для рабочего стола. Тем не менее, он работал просто отлично и можно установить с помощью подсказки на моем устройстве Android через Brave. Итак, я подумал, что проблема заключалась в отсутствии подсказки, поэтому мне удалось найти это руководство Google, но я потерялся, так как направления не были достаточно конкретными. dev - -host Я могу подключиться к веб -странице с моего телефона Android, а затем иметь возможность нажать три точки и нажать «Добавить на домашний экран», который устанавливает PWA. PWA откроется в автономном окне, я также могу убить терминал, который запускает команду NPM Run Dev--host , и когда я уволяю и возвращаю PWA, он все еще работает, как и ожидалось. Вместо этого нажатие на значок PWA открывает приложение в браузере. Убийство терминала означает, что PWA просто не работает, говоря «недоступно», но повторное обновление команды NPM Run Dev--host и освежающий браузер заставляет PWA работать просто хорошо. Я тоже хочу автономный характер.


Подробнее здесь: https://stackoverflow.com/questions/797 ... ile-device