mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Sam PoderandGitHub
6065bf6fcf
This PR adds E2E test for the new service worker syntax introduced in https://github.com/vercel/next.js/pull/94923. The tests do the following: `service-worker-multiple` tests that you can not have multiple service workers with the same scope. this is because their file names would clash; additionally, this is generally a bad practise. `service-worker-scopes` tests that you register multiple service workers with different scopes and they will be different files `service-worker` tests that service workers work when registered using the new syntax.
44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
'use client'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export default function Page() {
|
|
const [rootScope, setRootScope] = useState('default')
|
|
const [offlineScope, setOfflineScope] = useState('default')
|
|
const [offlineScript, setOfflineScript] = useState('default')
|
|
|
|
useEffect(() => {
|
|
async function run() {
|
|
// Two different workers at two different scopes — both are allowed and are
|
|
// served at distinct, scope-derived file names.
|
|
const root = await navigator.serviceWorker.register(
|
|
new URL('../lib/pwa-root', import.meta.url)
|
|
)
|
|
setRootScope(new URL(root.scope).pathname)
|
|
|
|
const offline = await navigator.serviceWorker.register(
|
|
new URL('../lib/pwa-offline', import.meta.url),
|
|
{ scope: '/offline/mode' }
|
|
)
|
|
setOfflineScope(new URL(offline.scope).pathname)
|
|
const offlineWorker =
|
|
offline.installing || offline.waiting || offline.active
|
|
if (offlineWorker) {
|
|
setOfflineScript(new URL(offlineWorker.scriptURL).pathname)
|
|
}
|
|
}
|
|
|
|
run().catch((err) => {
|
|
setRootScope('error: ' + err.message)
|
|
setOfflineScope('error: ' + err.message)
|
|
})
|
|
}, [])
|
|
|
|
return (
|
|
<div>
|
|
<p id="root-scope">{rootScope}</p>
|
|
<p id="offline-scope">{offlineScope}</p>
|
|
<p id="offline-script">{offlineScript}</p>
|
|
</div>
|
|
)
|
|
}
|