forked from theninthsky/client-side-rendering
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
service-worker-registration.js
72 lines (52 loc) · 2.01 KB
/
service-worker-registration.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* eslint-disable no-console */
import pagesManifest from 'pages-manifest.json'
const ACTIVE_REVALIDATION_INTERVAL = 1 * 60 * 60
const PERIODIC_REVALIDATION_INTERVAL = 12 * 60 * 60
const register = () => {
window.addEventListener('load', async () => {
try {
const registration = await navigator.serviceWorker.register('/service-worker.js')
console.log('Service worker registered!')
setInterval(() => registration.update(), ACTIVE_REVALIDATION_INTERVAL * 1000)
const { state } = await navigator.permissions.query({ name: 'periodic-background-sync' })
if (state === 'granted') {
await registration?.periodicSync.register('revalidate-assets', {
minInterval: PERIODIC_REVALIDATION_INTERVAL * 1000
})
}
} catch (err) {
console.error(err)
}
})
}
const unregister = async () => {
try {
const registration = await navigator.serviceWorker.ready
await registration.unregister()
console.log('Service worker unregistered!')
} catch (err) {
console.error(err)
}
}
if ('serviceWorker' in navigator) {
if (process.env.NODE_ENV === 'development') unregister()
else register()
}
const events = ['mousedown', 'keydown']
let userInteracted = false
events.forEach(event => addEventListener(event, () => (userInteracted = true), { once: true }))
const reloadIfPossible = () => {
if (userInteracted || document.visibilityState === 'visible') return
let { pathname } = window.location
if (pathname !== '/') pathname = pathname.replace(/\/$/, '')
const reloadAllowed = !!pagesManifest.find(
({ path, preventReload }) => !preventReload && window.isStructureEqual(pathname, path)
)
if (reloadAllowed) window.location.reload()
}
navigator.serviceWorker.addEventListener('message', ({ data }) => {
if (data.type === 'update-available') {
reloadIfPossible()
window.addEventListener('visibilitychange', reloadIfPossible)
} else if (data.type === 'periodic-sync-update-occured') localStorage.setItem('syncTime', data.syncTime)
})