[3.3] Progressive Web App (PWA)
- Cowboy of Bottrop
- Mitglied
- Beiträge: 320
- Registriert: 01.02.2017 21:11
- Wohnort: Bottrop anne Emscher
- Kontaktdaten:
[3.3] Progressive Web App (PWA)
Hallo zusammen,
ich bastel nun bereits seit ein paar Tagen daran herum, aus meinem Forum eine PWA zu generieren. Allerdings komme ich hier nicht wirklich weiter, so dass ich mich auf die Suche nach einer Extension gemacht habe. Allerdings werde ich nicht fündig. phpbb.com bietet mir exakt 0 (NULL) Fundstellen auf den eigenen Seiten, und im Web ist auch nicht wirklich was ergiebiges zu finden.
Daher meine Frage: Hat sich hier schon mal jemand mit diesem Thema befasst? Gibt es vielleicht bereits eine Ext, die das macht, was ich will?
Ich denke da an das Vorbild des WordPress-Plugin „Super Progressive Web App“, das nach der Installation im Backend die nötigen Einstellungen bietet und den Besuchern anschließend anbietet, Die Website als App auf den Smartphone oder Tablet zu installieren. Das funktioniert hervorragend, und ich würde mir sowas auch für phpBB wünschen.
Keep it Country,
Markus aka Cowboy
ich bastel nun bereits seit ein paar Tagen daran herum, aus meinem Forum eine PWA zu generieren. Allerdings komme ich hier nicht wirklich weiter, so dass ich mich auf die Suche nach einer Extension gemacht habe. Allerdings werde ich nicht fündig. phpbb.com bietet mir exakt 0 (NULL) Fundstellen auf den eigenen Seiten, und im Web ist auch nicht wirklich was ergiebiges zu finden.
Daher meine Frage: Hat sich hier schon mal jemand mit diesem Thema befasst? Gibt es vielleicht bereits eine Ext, die das macht, was ich will?
Ich denke da an das Vorbild des WordPress-Plugin „Super Progressive Web App“, das nach der Installation im Backend die nötigen Einstellungen bietet und den Besuchern anschließend anbietet, Die Website als App auf den Smartphone oder Tablet zu installieren. Das funktioniert hervorragend, und ich würde mir sowas auch für phpBB wünschen.
Keep it Country,
Markus aka Cowboy
- tas2580
- Ehemaliges Teammitglied
- Beiträge: 3029
- Registriert: 01.07.2004 05:42
- Wohnort: /home/tas2580
- Kontaktdaten:
Re: [3.3] Progressive Web App (PWA)
Hi,
das geht relativ einfach:
1. Zwischen <head> und </head> einfügen
2. Im Rootverzeichnis die Datei manifest.webmanifest anlegen
3. Im Rootverzeichnis die Datei service-worker.js anlegen
4. Eine offline.html erstellen. Das sollte eine eigenständige HTML Seite sein die ohne externes CSS und ohne Bilder auskommt. Die Seite wird angezeigt wenn der Benutzer offline ist.
5. Im Footer deiner Seite einfügen:
6.Browser Cache löschen und die Seite aufrufen.
Gruß Tobi
das geht relativ einfach:
1. Zwischen <head> und </head> einfügen
Code: Alles auswählen
<link rel="manifest" href="./manifest.webmanifest">
Code: Alles auswählen
{
"name": "Meine tolle Webseite",
"short_name": "tolle Webseite",
"description": "Das ist meine tolle Webseite",
"start_url": "https://example.com/",
"display": "standalone",
"background_color" : "#fff" ,
"theme_color": "#10161F",
"icons": [
{
"src": "/images/logo-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/logo-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
Code: Alles auswählen
'use strict';
const version = new URL(location).searchParams.get('version');
let CURRENT_CACHES = {
offline: 'www-v' + version,
precache: [
''
]
};
const OFFLINE_URL = '/offline.html';
function createCacheBustedRequest(url) {
let request = new Request(url, {cache: 'reload'});
if ('cache' in request) {
return request;
}
let bustedUrl = new URL(url, self.location.href);
bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now();
return new Request(bustedUrl);
}
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CURRENT_CACHES.offline)
.then(cache => cache.addAll(CURRENT_CACHES.precache))
.then(self.skipWaiting())
);
});
self.addEventListener('install', event => {
event.waitUntil(
fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(response) {
return caches.open(CURRENT_CACHES.offline).then(function(cache) {
return cache.put(OFFLINE_URL, response);
});
})
);
});
self.addEventListener('activate', event => {
let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
return CURRENT_CACHES[key];
});
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (expectedCacheNames.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch', event => {
if (event.request.mode === 'navigate' ||
(event.request.method === 'GET' &&
event.request.headers.get('accept').includes('text/html'))) {
event.respondWith(
fetch(event.request).catch(error => {
return caches.match(OFFLINE_URL);
})
);
}
});
5. Im Footer deiner Seite einfügen:
Code: Alles auswählen
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js');
}
</script>
Gruß Tobi
Heute ist ein guter Tag um dein Forum zu testen.
Ehemaliger Benutzername: [BTK] Tobi
Ehemaliger Benutzername: [BTK] Tobi
- Cowboy of Bottrop
- Mitglied
- Beiträge: 320
- Registriert: 01.02.2017 21:11
- Wohnort: Bottrop anne Emscher
- Kontaktdaten:
Re: [3.3] Progressive Web App (PWA)
So in etwa hab ich es bisher versucht, nur die Dateinamen sind anders. Die
Auch die Javascript-Datei existiert mit einem anderem Namen, wobei die Namen ja eigentlich egal sein sollten, sofern sie korrekt referenziert werden. Anyway, ich habe die Datei neu erstellt mit den von dir genannten Namen und das Script im Footer angepasst. Ich bekomme nun in der Adress-Leiste des Samsung-Browsers ein Icon zum Installieren der WebApp, allerding funktioniert die Installation nicht. Am Ende steht in der Statusleiste des Phones nur „Web-App konnte nicht installiert werden“, ohne weitere Details…
Immerhin bin ich jetzt ein Stückchen weiter als zuvor, dafür schon mal Danke!
Keep it Country,
Markus aka Cowboy
manifest.webmanifest
heißt bei mir manifest.json
, wird aber auch als solche referenziert. Der Inhalt deckt sich meinem.Auch die Javascript-Datei existiert mit einem anderem Namen, wobei die Namen ja eigentlich egal sein sollten, sofern sie korrekt referenziert werden. Anyway, ich habe die Datei neu erstellt mit den von dir genannten Namen und das Script im Footer angepasst. Ich bekomme nun in der Adress-Leiste des Samsung-Browsers ein Icon zum Installieren der WebApp, allerding funktioniert die Installation nicht. Am Ende steht in der Statusleiste des Phones nur „Web-App konnte nicht installiert werden“, ohne weitere Details…
Immerhin bin ich jetzt ein Stückchen weiter als zuvor, dafür schon mal Danke!
Keep it Country,
Markus aka Cowboy
- tas2580
- Ehemaliges Teammitglied
- Beiträge: 3029
- Registriert: 01.07.2004 05:42
- Wohnort: /home/tas2580
- Kontaktdaten:
Re: [3.3] Progressive Web App (PWA)
Falls du Google Chrome benutzt, drück mal F12 und such den Tab "Audits". Wenn du das auf deiner Seite laufen lässt wird dir angezeigt was alles zur PWA fehlt. Vielleicht hilft dir das ja weiter.
Gruß Tobi
Gruß Tobi
Heute ist ein guter Tag um dein Forum zu testen.
Ehemaliger Benutzername: [BTK] Tobi
Ehemaliger Benutzername: [BTK] Tobi
- Cowboy of Bottrop
- Mitglied
- Beiträge: 320
- Registriert: 01.02.2017 21:11
- Wohnort: Bottrop anne Emscher
- Kontaktdaten:
Re: [3.3] Progressive Web App (PWA)
Danke, werde ich heute Abend nach Feierabend mal versuchen.
Keep it Country,
Markus aka Cowboy
Keep it Country,
Markus aka Cowboy
- Cowboy of Bottrop
- Mitglied
- Beiträge: 320
- Registriert: 01.02.2017 21:11
- Wohnort: Bottrop anne Emscher
- Kontaktdaten:
Re: [3.3] Progressive Web App (PWA)
Ist jetzt beinahe untergegangen, es funktioniert. Also nochmal danke für die Anleitung!
Keep it County,
Markus aka Cowboy
Keep it County,
Markus aka Cowboy
Re: [3.3] Progressive Web App (PWA)
Entschuldigt die Frage, aber was MACHT diese "App"?
- Cowboy of Bottrop
- Mitglied
- Beiträge: 320
- Registriert: 01.02.2017 21:11
- Wohnort: Bottrop anne Emscher
- Kontaktdaten:
Re: [3.3] Progressive Web App (PWA)
Sie lässt das Board als App auf dem Smartphone oder Tablet laufen, mit der Möglichkeit von Benachrichtigungen bei Antworten etc...
Keep it County,
Markus aka Cowboy
Markus aka Cowboy
Re: [3.3] Progressive Web App (PWA)
Nice! Danke!
Re: [3.3] Progressive Web App (PWA)
Hallo zusammen,
ich habe jetzt einmal versucht diese "App" auf meinem Testboard zu installieren.
Leider passiert nichts!
Daten des Boards:
phpbb 3.3.0
PHP 7.3.18
Kein SSL
Ich habe in der overall_header.html diesen Code eingefügt:
Die Datei manifest.webmanifest wurde erstellt und ins Rootverzeichnis kopiert, die beiden PNG-Images wurden erstellt und in den Ordner images im Rootverzeichnis kopiert :
Die Datei service-worker.js wurde erstellt (von hier kopiert) und ins Rootverzeichnis kopiert.
Eine offline.html wurde erstellt und ins Rootverzeichnis kopiert. Zum Testen hat die Datei nur folgenden Inhalt:
Folgenden Code habe ich in die overall_footer.html kopiert:
Danach habe ich noch den cache vom Forum und Browser gelöscht.
Wie gesagt, es passiert nichts, das Forum wird ganz "normal" (als Browserversion) gestartet.
Was habe ich falsch gemacht?
LG Rolf (eumelchen)
ich habe jetzt einmal versucht diese "App" auf meinem Testboard zu installieren.
Leider passiert nichts!
Daten des Boards:
phpbb 3.3.0
PHP 7.3.18
Kein SSL
Ich habe in der overall_header.html diesen Code eingefügt:
Code: Alles auswählen
<head>
<link rel="manifest" href="./manifest.webmanifest">
<meta charset="utf-8" />
Code: Alles auswählen
{
"name": "Testforum",
"short_name": "Test",
"description": "Nur ein Test",
"start_url": "http://testforum.de/",
"display": "standalone",
"background_color" : "#fff" ,
"theme_color": "#10161F",
"icons": [
{
"src": "/images/logo-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/logo-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
Eine offline.html wurde erstellt und ins Rootverzeichnis kopiert. Zum Testen hat die Datei nur folgenden Inhalt:
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de-de">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Test</title>
</head>
<body>
<div style="text-align: center;"><big style="font-weight: bold; font-family: Arial;"><big>Das ist nur ein Test</big></big><br style="font-family: Arial;">
</div>
</body>
</html>
Code: Alles auswählen
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js');
}
</script>
<!-- EVENT overall_footer_content_after -->
</div>
<!-- EVENT overall_footer_page_body_after -->
Wie gesagt, es passiert nichts, das Forum wird ganz "normal" (als Browserversion) gestartet.
Was habe ich falsch gemacht?
LG Rolf (eumelchen)