Welkom bij mijn project van Progressive Web Apps. Bij dit project van de Minor 'Webdesign and development' is het de bedoeling dat we een single page app gaan maken. Dit is met behulp van de OBA API.
De website is hier te zien.
- User Story
- Rendering
- Installatie
- API
- Activity Diagram
- Service Worker
- Optimalisaties
- To do
- Licence
- Credits
As an art lover, I want to be able to search and view art from the Rijksmuseum at home, so that I can still enjoy art during a lockdown
Bij client side rendering wordt alle content gerendered in de browser van de gebruiker. Hierdoor wordt alles naar 1 HTML file geladen en wordt de content pas laten zien als alles geladen is. Dit is alleen voordelig bij gebruikers met snelle internet connecties. De browser rendert namelijk alle content in de browser van de gebruiker.
Bij server side rendering wordt de content op de server gerendered. Hierbij wordt alle content van een pagina, inclusief de data, gerendered op de server van de website. Hierdoor ziet de gebruiker geen half geladen websites als de connectie niet goed is. Het renderen wordt op de server gedaan, waardoor de connectie van de gebruiker niet uit maakt.
Om de app lokaal te laten draaien moet het project eerst lokaal worden gecloned. Als dit stukje code gerunt wordt in de terminal wordt de repository lokaal gecloned:
gh repo clone tomvandenberg11/progressive-web-apps-2122.git
Ga eerst naar de folder waarin je wilt dat het project gecloned wordt. Je kan in de terminal navigeren met cd met daar achter de map waar je heen wilt.
Daarna is het nodig om node en npm geinstalleerd te hebben op je lokale computer. Als je deze stappen gevolgd hebt, worden met npm install de benodigde packages gedownload.
Als je de bovenstaande stappen gevolgd hebt kan de app opgestart worden door:
npm run server
te runnen in de terminal. Je ziet dan een bericht in de terminal staan op welke link de app te zien is.
De website kan ook geinstalleerd worden als native app. Dit komt omdat in de manifest.json de iconen en instellingen staan om de app te installeren als native app.
De service worker zorgt ervoor dat bepaalde bestanden gecached worden in het geval er geen internet connectie meer is. De bestanden die ik cache zijn:
const CORE_ASSETS = [
"/offline",
"/style/style.css",
"/script/script.js",
"/images/logo.png",
"/images/icon-512.jpg",
"manifest.json",
]Hierdoor zijn deze bestanden ook beschikbaar als er geen internet connecie is. De bestanden worden opgeslagen in de browser.
Voordat ik optimalisatie aanpassingen had gedaan, kwamen er een aantal problemen naar voren. Bijvoorbeeld dat er geen apple-touch-icon is toegevoegd en dat de pagina niet scalable is. Het laatste probleem heb ik opgelost door user-scalable=no te verwijderen uit de head, zodat de gebruiker de pagina wel kan scalen.
Een ander probleem is dat mijn images als background-image in CSS werden getoond, in plaats van een <img/> tag. Dit heb ik toen verandert, zodat ik gebruik kan maken van srcset.
Ook heb ik compression en cache control toegevoegd aan de applicatie. Compression kan toegevoegd worden door de npm compression package te installeren. Cache control kan in express toegevoegd worden door het volgende stukje code:
app.use(/.*-[0-9a-f]{10}\..*/, (req, res, next) => {
res.setHeader("Cache-Control", "max-age=365000000, immutable")
next()
})De font van de website heb ik ingeladen via de head van de website. Ik heb mijn font namelijk van Google Fonts. In de link is het mogelijk om display=swap aan te zetten, zodat eerst een fall-back font geladen wordt als het echte font nog niet gedownload is.
Ook heb ik de images via srcset ingeladen. Hierdoor bepaalt de browser welke image ingeladen wordt, zodat dit de beste performance voor de website is.
data.map((art) => {
const img1000 = art.webImage.url.slice(0, -3) + "=s1000"
const img750 = art.webImage.url.slice(0, -3) + "=s750"
const img500 = art.webImage.url.slice(0, -3) + "=s500"
%>
<a href="art/<%= art.objectNumber %>">
<article>
<img srcset="<%= img500 %> 500w,
<%= img750 %> 750w,
<%= img1000 %> 1000w"
sizes="(max-width: 600px) 500px, (max-width: 1000px) 750px, 1000px"
src="<%= img750 %>"
alt="<%= art.title %>">
<div>
<h3><%= art.title %></h3>
<p><%= art.principalOrFirstMaker %></p>
</div>
</article>
</a>
<% })}Voordat ik deze optimalisatie aanpassingen gedaan had, was dit mijn score in Chrome Lighthouse:
Nadat ik de optimalisatie aanpassingen heb geimplementeerd, is dit mijn score in Chrome Lighthouse:
Als suggestie in Lighthouse staat nog dat ik de foto's in een modernere bestandstype moet opslaan. Dit kan ik helaas niet doen omdat de foto's uit de API komen, dus daar heb ik geen invloed op.
Voor dit project heb ik de API van het Rijksmuseum gebruikt. De API is vrij te gebruiken en bevat zo goed als alle schilderijen in het Rijksmuseum. Meer informatie over deze API vind je hier.
Er is wel een key nodig om de API te gebruiken. Deze kan verkregen worden door een account aan te maken bij Rijksmuseum Studio. Daarna is de key te vinden in instellingen.
| To do | Done? |
|---|---|
| Empty results after search | ✅ |
| Error states | ✅ |
| Implement search | ✅ |
| Implement detail page | ✅ |
| Implement detail page after search | ✅ |
| Fix error after too less search results | ✅ |
| Increasing performance | ✅ |
| Deploying on Heroku | ✅ |
Dit project is voorzien van een MIT licence. Zie de pagina LICENCE voor meer informatie.
Ik wil graag als eerste de docenten bedanken voor al hun inzet, uitleg en lesstof. Ten tweede wil ik mijn supportgroepje bedanken voor de mentale en functionele support. Ten derde wil ik Stackoverflow bedanken voor al hun antwoorden op mijn vragen.