# PWA :flag-be:

## Installation

Vink de PWA optie aan in de configuratie bij het opzetten van een nieuw project:

Installeer PWA bij een bestaand project: ```vue add pwa```

## Setup

Daarnaast zijn er een paar essentiële onderdelen:

- Alle nodige favicons. Die kan je generenen via https://realfavicongenerator.net
    - Download de favicon package
    - Plaats deze package in de ``public/icons`` folder
- We bepalen onze manifestOptions & bepalen waar de service-worker komt te staan in de vue.config.js

// Inside vue.config.js
module.exports = {
// ...other vue-cli plugin options...
pwa: {
manifestOptions: {
name: 'Savic-PWA',
start_url: "/",
themeColor: '#0000FF',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
},

// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
//swSrc is required in InjectManifest mode.
swSrc: './src/service-worker.js',
}
}
}

## Configuring the service-worker

**Wat is een Service worker?**

![](https://i.imgur.com/wnFWHsj.png)


**Welke caching strategie gebruiken we best?**

Dit valt allemaal te zien welke use case, maar meestal maken wij gebruik van API calls dus is "Network first" de beste optie:

![](https://i.imgur.com/qJubMLx.png)

Network first service worker: Behoort onder ```src``` map in bestand ```service-worker.js```

// the cache version gets updated every time there is a new deployment
const CACHE_VERSION = 10;
const CURRENT_CACHE = `main-${CACHE_VERSION}`;

// these are the routes we are going to cache for offline support
const cacheFiles = ['/', '/about-me/', '/projects/', '/offline/'];

// on activation we clean up the previously registered service workers
self.addEventListener('activate', evt =>
evt.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== CURRENT_CACHE) {
return caches.delete(cacheName);
}
})
);
})
)
);

// on install we download the routes we want to cache for offline
self.addEventListener('install', evt =>
evt.waitUntil(
caches.open(CURRENT_CACHE).then(cache => {
return cache.addAll(cacheFiles);
})
)
);

// fetch the resource from the network
const fromNetwork = (request, timeout) =>
new Promise((fulfill, reject) => {
const timeoutId = setTimeout(reject, timeout);
fetch(request).then(response => {
clearTimeout(timeoutId);
fulfill(response);
update(request);
}, reject);
});

// fetch the resource from the browser cache
const fromCache = request =>
caches
.open(CURRENT_CACHE)
.then(cache =>
cache
.match(request)
.then(matching => matching || cache.match('/offline/'))
);

// cache the current page to make it available for offline
const update = request =>
caches
.open(CURRENT_CACHE)
.then(cache =>
fetch(request).then(response => cache.put(request, response))
);

// general strategy when making a request (eg if online try to fetch it
// from the network with a timeout, if something fails serve from cache)
self.addEventListener('fetch', evt => {
evt.respondWith(
fromNetwork(evt.request, 10000).catch(() => fromCache(evt.request))
);
evt.waitUntil(update(evt.request));
});

## Running the PWA

⚠️ Enorm belangrijk ⚠️ : De PWA-functionaliteit zal pas werken bij een build!

Run deze commands:

- ```npm run build```
- ```serve -s dist```

Klik op de PWA knop rechts bovenaan de url-bar

![](https://i.imgur.com/Ezbnjox.png)
 

## Handige tools

**Lighthouse tool**

Lighthouse is een open-source, automated tool voor het verbeteren van de  performance, kwaliteit en correctheid van uw web apps. 

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=nl

![](https://i.imgur.com/0bejjsQ.png)