So installieren Sie PWA auf einem mobilen Gerät ⇐ Android

[Anonymous]

Erstens Projektinformationen und Systeminformationen < /p>

Simple-Pwa an MRE. Abschlussjahr projiziert den tatsächlichen Projektcode. Der gesamte Code ist für einfache PWA. Alle Probleme in Simple-Pwa gilt auch für [Abschlussjahres-project ]. /> < /ul>
Jetzt das Problem, mit dem ich ausgesetzt bin. Ich kann keine PWA auf einem mobilen Gerät installieren. Ich habe hier gelesen, dass es spezifische Anforderungen und Ausnahmen darüber gibt, welche Geräte eine PWA installieren können. Vor diesem Hintergrund habe ich mich entschlossen, auf Chrome und Tapferkeit zu testen. Der Beitrag erhält auch auch keine richtige Auflösung. Als solches habe ich das getan. Ich habe so manuell Zertifikate erstellt: < /p>

Code: Select all

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

wobei ip der Wert ist, der generiert wird, wenn Sie NPM Run Dev - - -host zum Enthüllen der Web -App ausführen. Dann habe ich ein Manifest.json mit mehreren Symbolen und Beschreibungen und anderen relevanten Feldern erstellt. Dies ist das Manifest.json für den Mre.

Code: Select all

{
"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>
Um es offline verfügbar zu machen, habe ich beschlossen, einen Servicemitarbeiter in diesen Inhalt aufzunehmen: < /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());
});

Wenn ich jetzt zur Webseite auf der URL gehe, serviert ich mit NPM Run Dev. Ich kann das Terminal abtöten, in dem der NPM-Auslauf-Dev--Host -Commelangelements und der einfache PWA immer noch zugegriffen und zwischengespeichert werden können. Also habe ich auf die drei Punkte unten rechts geklickt (für Brave) und dann auf den Startbildschirm hinzufügen. Ich habe das Terminal getötet und dann, als ich die Seite erfrischte, verschwunden. Ich erhalte einen Fehler. Zum Beispiel: < /p>

Microsofts PWA -Handbuch zeigt, wie ein PWA installierbar ist, aber nur für Desktop. Es hat jedoch gut funktioniert und über eine Eingabeaufforderung auf meinem Android -Gerät über mutig installierbar. Ich dachte also, dass das Problem ein Mangel an Aufforderung war, daher konnte ich diesen Leitfaden von Google gefunden, aber ich habe mich verloren, da die Anweisungen nicht spezifisch genug waren.>