Offline Mode di Svelte Kit dengan Workbox

[mzaini30]

Install:

pnpm i -D workbox-cli

Buat file workbox-config.cjs yang isinya:

module.exports = {
	globDirectory: 'build/',
	globPatterns: [
		'**/*.{css,js,html}'
	],
	ignoreURLParametersMatching: [
		/^utm_/,
		/^fbclid$/
	],
	swDest: 'build/sw.js'
};

Buat file static/registerSW.js yang isinya:

if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js', { scope: '/' })})}

Tambahkan di src/app.html:

<script src="/registerSW.js"></script>

Edit di package.json:

{
  "name": "~TODO~",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
+    "build": "svelte-kit build && workbox generateSW workbox-config.cjs",
    "preview": "svelte-kit preview"
  },
  "devDependencies": {
    "@sveltejs/adapter-static": "^1.0.0-next.9",
    "@sveltejs/kit": "next",
    "axios": "^0.21.1",
    "qs": "^6.10.1",
    "replace": "^1.2.1",
    "svelte": "^3.34.0",
    "workbox-cli": "^6.1.5"
  },
  "type": "module"
}