Een PWA / TWA maken

Uiteraard is, anno 2022, je website uitsluitend beschikbaar over een beveiligde https verbindinding en is de site geoptimaliseerd voor gebruik op mobiele apparaten. De volgende stap om gebruikers op een telefoon tegemoet te komen is het maken van een Progressive Web App.

Een Progressive Web App of PWA is een voor mobiel gebruik geoptimaliseerde website. Als je site aan bepaalde technische eisen voldoet, kun je het een PWA noemen. Een PWA kun je installeren als App op een, android, smartphone en op je desktop. Een PWA ziet er vrijwel hetzelfde uit als een gewone native App. De PWA-App heeft dan zijn eigen icoon, draait full screen en zonder de adres-balk die je in de gewone browser hebt.

Onder water blijft het een website in de (chrome)browser. Instellingen en informatie vind je dan ook niet terug in onder de apps van je telefoon maar bij Site instellingen in het chrome menu.

Een PWA wordt dus ook gewoon geïndexeerd door zoekmachines, het is namelijk een gewone website. Bovendien is de PWA door iedereen met een webbrowser te gebruiken, installatie kán maar hoeft niet.

Een PWA of TWA hoef je eigenlijk niet te updaten. Alle aanpassingen maak je immers aan je website zelf. Inhoud toevoegen of verwijderen, iconen veranderen, de complete look en feel aanpassen of zelfs de onderliggende techniek aanpassen. Het is allemaal mogelijk zonder een update.

Nadeel van een PWA is dat deze altijd op de voorgrond draait, dus een relatief hoog batterij verbruik hebben.

Voor de installatie van je website als PWA is het niet nodig deze via de play-store aan te bieden. Een PWA kan geïnstalleerd worden vanuit de browser.

En AMP dan? AMP oftewel Accelerated Mobile Pages  zijn een ontwikkeling van google om webpagina’s beter en sneller te maken voor mobiel gebruik. Nu er steeds meer websites komen die zelf mobiel al prima werken zijn AMP-pagina’s steeds minder nodig en lijkt het concept op zijn retour. Het feit dat je AMP steeds minder in de zoekresultaten van google terugziet zegt eigenlijk al genoeg. AMP is nooit echt populair geweest. Er was verre van triviaal om een AMP-site te maken en je liep tegen veel beperkingen aan.

Verschil PWA en TWA.

Zoals beschreven is een PWA niets anders dan een (geoptimaliseerde) mobile website die je vanuit de browser kunt installeren als App.

Je site in de google play store

Een TWA oftewel Trusted Web Activity is niets meer dan een pakket om een PWA die het mogelijk maakt deze aan te bieden via de google play store. De eenmaal geïnstalleerde app is hetzelfde als de vanuit de browser geïnstalleerde versie.

Verschil PWA en Native app.

Een Native App is een platform, android, iOS,  afhankelijk programma. Deze download je via een app store. Een native app heeft dus niets met je website te maken. Waar je een PWA kunt opbouwen vanuit een bestaande website is een native app een complete nieuw product. Een PWA maken is doorgaans véél goedkoper.

Native apps kunnen wel zaken die een PWA niet kunnen zoals NFC, bluetooth en in de achtergrond draaien.

Groot nadeel van een native app is dat elke vernieuwing om een nieuwe versie vraagt. Inhoud, denk bijvoorbeeld aan een catalogus met producten kun je uiteraard wel bijwerken in een native app zonder een update via de play store.

Ander voordeel van een PWA is dat je voor betalingen niet afhankelijk bent van de betalingsoplossing (en afdracht van commissie) van de store.

Van website naar PWA

Om van je website een PWA te maken heb je een aantal extra’s nodig: iconen, een manifest en een service worker. Je website moet draaien over een beveiligde https verbinding.

Een, mogelijke, eigenschap van een PWA is ondersteuning van offline gebruik. Een PWA maakt hiervoor gebruik van een service-worker. Dat is een stuk javascript-code dat op de achtergrond het ophalen en cachen van gegevens regelt. Een service worker kan meer taken hebben zoals het ontvangen van push berichten. Naast een service worker heeft een PWA ook een manifest. Dat is een bestand dat een korte omschrijving geeft, waar de startpagina is en welke iconen gebruikt moeten worden.

In sommige beschrijvingen staat dat een PWA moet zijn opgebouwd een moderne website moet zijn, een one-pages die gebruikt maakt van een javascript Framework. Dat is niet het geval. Van elke, mobiel vriendelijke, website kan een PWA gemaakt worden.

Een mogelijkheid van een Javascript Framework is dat deze een website in stukjes kan ophalen. In plaats van de hele pagina elke keer in zijn geheel op te halen worden op basis van de gebruikers acties delen vervangen door kleinere blokken html of json. Minder data betekend dat de site soepeler draait als de verbinding slechter is. Bovendien is de site dan eenvoudiger en efficiënter geschikt te maken voor offline gebruik.

Het manifest

Een eerste voorwaarde voor het maken van een PWA of TWA is een website manifest. Dit is een tekstbestand dat de basis van je site samenvat. Het bepaalt de weergaven van je app.

Op een site als realfavicongenerator.net kun je de meeste icoontjes en website manifest generen.

Bovenstaande generator maakt echter geen maskable icoon aan. Dit is een icoon zonder doorzichtige achtergrond. Android maakt hier dan een icoon met afronden zijdes van. Heb je iconen met een doorzichtige achtergrond dan moet je hiervan varianten maken met een opvulkleur en deze toevoegen aan je manifest met “purpose”: “maskable”, anders kun je een bestaande icoon gebruiken met “purpose”: “any maskable”. Zie onderstaande voorbeelden.

In het voorbeeld zie je ook dat iconen in zowel png als webp formaat worden aangeboden en om het compleet te maken zit er ook een monochrome icoon bij. Die laatste is voor een PWA niet nodig voor een TWA wel.

De start_url bepaalt welke pagina gebruikers van de app als eerste te zien krijgen. Wil je een indruk krijgen van het gebruik van je site als PWA dan kun je hier tracking parameters aan toe voegen. In onderstaand voorbeeld is dat gedaan voor matomo. Een soortgelijke URL voor goolge-analycs zou ?utm_source=pwa kunnen zijn.

Ga je een TWA maken dan kun je de start_url aanpassen, bijvoorbeeld ?utm_source=twa, zodat je onderscheid kun maken in de herkomst.

Om het manifest zichtbaar te maken moet deze aan de <head> van je site toegevoegd worden. In de <head> kun je ook informatie over je iconen kwijt.

Voorbeeld <head>

<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/files/apple-touch-icon.png">

Hoe dit moet is afhankelijk van je CMS. Voor de populaire CMS’en als joomla, wordpress en drupal zijn hiervoor plugins beschikbaar. Afhankelijk van de opbouw van je site kun je het ook rechtstreeks in je template files plaatsen. Of een maatwerk plugin (laten) maken.

Voorbeeld webmanifest

{
  "name": "Kraanwatertappunten",
  "short_name": "Watertaps",
  "icons": [
          {
    "src": "/files/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
          {
    "src": "/files/android-chrome-192x192.webp",
    "sizes": "192x192",
    "type": "image/webp"
  },
  {
    "src": "/files/grayscale.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "monochrome"
  },
  {
    "src": "/files/grayscale.webp",
    "sizes": "512x512",
    "type": "image/webp",
    "purpose": "monochrome"
  },
  {
    "src": "/files/android-chrome-256x256.png",
    "sizes": "256x256",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "/files/maskable-512x512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any maskable"
  },
  {
    "src": "/files/android-chrome-512x512.webp",
    "sizes": "512x512",
    "type": "image/webp",
    "purpose": "any maskable"
  }
  ],
  "theme_color": "#3666ae",
  "background_color": "#3666ae",
  "display": "standalone",
  "start_url": "/?mtm_campaign=pwa&mtm_kwd=nl"
}

De service worker.

Voor een PWA is ook een service worker noodzakelijk. Een service worker draait op de achtergrond van je site en kán daar taken als caching, push-berichten ontvangen en meer uitvoeren. Maar een service-worker mag ook niks doen, voorwaarde om een website een PWA te noemen is alleen dat er een service worker is.

Een service worker bestaat uit een javascript bestand, bijvoorbeeld service-worker.js en een paar regels javascript in je webpagina zelf. Deze mag ergens onderaan elke pagina vlak voor de </body>. Hoe je deze code het beste toevoegt is afhankelijk van de CMS. Zie ook de opmerkingen bij het toevoegen van het manifest

Naam en locatie van het bestand kun je zelf kiezen. Maar het mag niet CROSS-origin zijn. Dus de site https://brambring.nl/ mag de service worker alleen ophalen vanaf https://brambring.nl/ zelf en niet van bijvoorbeeld https://cdn.brambring.nl/

Voorbeeld registratie service worker

<script>
if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
  }).catch(function(err) {
          console.log('fout bij registratie service worker');
  });
}
</script>

Voorbeeld dummy service worker

//service-worker.js

self.addEventListener('activate', evt =>
    self.clients.claim() //web in productie. Alleen relevant bij eerste bezoek
);



self.addEventListener('install', function(event) {

});

self.addEventListener('fetch', function(event) {

}
);

Voorbeeld service worker met google workbox en caching

Gebruikt op fietsen.app

/*jshint esversion: 8 */
importScripts(
	'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

workbox.routing.registerRoute(
	({
		url
	}) => url.pathname.startsWith('/wp-admin/'),
	new workbox.strategies.NetworkOnly()
);

workbox.routing.setDefaultHandler(
	new workbox.strategies.NetworkOnly()
);

const cacheDocument = 'document-01';
const stratDocument = new workbox.strategies.NetworkFirst({
	cacheName: cacheDocument
});

workbox.routing.registerRoute(
	({
		request
	}) =>
	request.mode === 'navigate' ||
	request.destination === 'document',
	stratDocument
);

const cacheStatic = 'static-01';
const stratStatic = new workbox.strategies.CacheFirst({
	cacheName: cacheStatic,
	plugins: [
		new workbox.expiration.ExpirationPlugin({
			maxEntries: 60,
			maxAgeSeconds: 365 * 24 * 60 * 60, // 365 Days
		})
	]
});

workbox.routing.registerRoute(
	({
		request
	}) =>
	request.destination === 'font' ||
	request.destination === 'style' ||
	request.destination === 'script' ||
	request.destination === 'image' ||
	request.destination === 'worker',
	stratStatic
);

const files = ['/files/offline.html'];
self.addEventListener('install', event => {
	event.waitUntil(self.caches.open(cacheStatic).then(cache => cache.addAll(
		files)));
});
const handler = async(options) => {
	const dest = options.request.destination;
	if (dest === 'document') {
		const cache = await self.caches.open(cacheStatic);

		return (await cache.match('/files/offline.html')) || Response.error();
	}


	return Response.error();
};

workbox.routing.setCatchHandler(handler);

PWA installeren

Heb je eenmaal het manifest en de service worker succesvol toegevoegd aan je site dan kun je de APP op je telefoon of computer installeren. Dit werkt in ieder geval in op chromium gebaseerde browsers zoals chrome en edge. Voordeel van het gebruik als APP is dat je er snel toegang hebt tot hebt vanuit het startscherm van je telefoon.

Heb je eenmaal het manifest en de service worker succesvol toegevoegd aan je site dan kun je de APP op je telefoon of computer installeren. Bij desktop browsers staat er een icoontje in de adresbalk. Dit werkt in onder andere chrome en edge.

Installeer icon in de chrome browser
Website als PWA installeren
Installeren via het menu van de chrome mobiele browser. Je krijgt mogelijk ook een melding om de site als app te installeren.

Van PWA naar TWA.

Om van je PWA een TWA te maken moet je deze inpakken als app bundle.

Een extra voorwaarde is dat je PWA een acceptable performance score heeft, iets van 80% of hoger.

Lighthouse score  performance en PWA

Ervoor zorgen dat je site een goede performance-score heeft, is vaak het meest uitdagende aan het maken van een TWA.

Met google lighthouse test je of je PWA voldoet aan de eisen voor een TWA. Lighthouse is het eenvoudigste gebruiken vanuit de Ontwikkelaars omgeving van chrome.

Er zijn websites, zoals pwabuilder.com die een PWA inpakken voor je. Met enige technische kennis kun je ook zelf gaan bouwen bijvoorbeeld met BubbleWrap.

Uiteindelijk heb je dan een .apk of .abb bestand dat je kunt installeren op je telefoon. En je kunt de app aanbieden via de google-play store. Hiervoor is een ontwikkelaars-account nodig.

Voor het publiceren van je TWA heb je nog het een ander nodig aan logo’s en schermafbeeldingen.

Eenmaal aangemaakt is de laatste stap het plaatsen van het aangeleverde assetlinks.json bestand in de .well-known map op je server. Dit bestaand zorgt voor de verificatie dat de site bij de TWA hoort.

Stappenplan PWA en TWA

PWA

  • website mobiel vriendelijk maken
  • https
  • iconen maken
  • website manifest maken en toevoege
  • service worker toevoegen

TWA

  • prestaties website controlleren en verbeteren
  • PWA inpakken als TWA
  • Screenshots maken
  • TWA aanbieden in google play store

En verder

  • Offline strategie bepalen en implementeren

Plaats een reactie