[3.3] Progressive Web App (PWA)

Cowboy of Bottrop · Beitrag von **Cowboy of Bottrop** » 27.05.2020 23:50

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

Beitrag von **tas2580** » 29.05.2020 02:39

Hi,

das geht relativ einfach:

1. Zwischen <head> und </head> einfügen

Code: Alles auswählen

<link rel="manifest" href="./manifest.webmanifest">

2. Im Rootverzeichnis die Datei manifest.webmanifest anlegen

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"
	}
	]
}

3. Im Rootverzeichnis die Datei service-worker.js anlegen

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);
      })
    );
  }
});

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:

Code: Alles auswählen

<script>
 if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js');
    }
</script>

6.Browser Cache löschen und die Seite aufrufen.

Gruß Tobi

Cowboy of Bottrop · Beitrag von **Cowboy of Bottrop** » 29.05.2020 03:19

So in etwa hab ich es bisher versucht, nur die Dateinamen sind anders. Die 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

Beitrag von **tas2580** » 29.05.2020 14:00

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

Cowboy of Bottrop · Beitrag von **Cowboy of Bottrop** » 29.05.2020 15:05

Danke, werde ich heute Abend nach Feierabend mal versuchen.

Keep it Country,
Markus aka Cowboy

Cowboy of Bottrop · Beitrag von **Cowboy of Bottrop** » 06.06.2020 09:59

Ist jetzt beinahe untergegangen, es funktioniert. Also nochmal danke für die Anleitung!

Keep it County,
Markus aka Cowboy

Holger · Beitrag von **Holger** » 18.08.2020 15:14

Entschuldigt die Frage, aber was MACHT diese "App"?

Cowboy of Bottrop · Beitrag von **Cowboy of Bottrop** » 18.08.2020 15:27

Sie lässt das Board als App auf dem Smartphone oder Tablet laufen, mit der Möglichkeit von Benachrichtigungen bei Antworten etc...

Holger · Beitrag von **Holger** » 18.08.2020 16:03

Nice! Danke!

eumelchen · Beitrag von **eumelchen** » 19.08.2020 17:42

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:

Code: Alles auswählen

<head>
<link rel="manifest" href="./manifest.webmanifest">
<meta charset="utf-8" />

Die Datei manifest.webmanifest wurde erstellt und ins Rootverzeichnis kopiert, die beiden PNG-Images wurden erstellt und in den Ordner images im Rootverzeichnis kopiert :

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"
	}
	]
}

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:

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>

Folgenden Code habe ich in die overall_footer.html kopiert:

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 -->

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)

phpBB.de

[3.3] Progressive Web App (PWA)

[3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)

Re: [3.3] Progressive Web App (PWA)