scott/crabfit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use vite-plugin-pwa for pwa setup

Browse source
This commit is contained in:
Ben Grant 2022-08-19 16:35:20 +10:00
parent 0dca1a5eda
commit 83a571c2ef
7 changed files with 41 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

25
crabfit-frontend/src/App.jsx
View file

@ -1,22 +1,18 @@
import { useState, useEffect, useCallback, Suspense } from 'react'
import { Route, Routes } from 'react-router-dom'
import { Workbox } from 'workbox-window'
import * as Pages from '/src/pages'
import { Settings, Loading, Egg, UpdateDialog, TranslateDialog } from '/src/components'
import { Settings, Loading, Egg, TranslateDialog } from '/src/components'
import { useSettingsStore, useTranslateStore } from '/src/stores'
const EGG_PATTERN = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']
const wb = new Workbox('sw.js')
const App = () => {
const [eggCount, setEggCount] = useState(0)
const [eggVisible, setEggVisible] = useState(false)
const [eggKey, setEggKey] = useState(0)
const [updateAvailable, setUpdateAvailable] = useState(false)
const languageSupported = useTranslateStore(state => state.navigatorSupported)
const translateDialogDismissed = useTranslateStore(state => state.translateDialogDismissed)
@ -30,19 +26,6 @@ const App = () => {
}
}, [eggCount, eggKey])
useEffect(() => {
// Register service worker
if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
wb.addEventListener('installed', event => {
if (event.isUpdate) {
setUpdateAvailable(true)
}
})
wb.register()
}
}, [])
useEffect(() => {
document.addEventListener('keyup', eggHandler, false)
return () => document.removeEventListener('keyup', eggHandler, false)
@ -71,12 +54,6 @@ const App = () => {
</Routes>
</Suspense>
{updateAvailable && (
<Suspense fallback={<Loading />}>
<UpdateDialog onClose={() => setUpdateAvailable(false)} />
</Suspense>
)}
{eggVisible && <Egg eggKey={eggKey} onClose={() => setEggVisible(false)} />}
</>
)

65
crabfit-frontend/src/sw.js
View file

@ -1,65 +0,0 @@
/* eslint-disable no-restricted-globals */
import { clientsClaim, skipWaiting } from 'workbox-core'
import { ExpirationPlugin } from 'workbox-expiration'
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies'
skipWaiting()
clientsClaim()
// Injection point
precacheAndRoute(self.__WB_MANIFEST)
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$')
registerRoute(
// Return false to exempt requests from being fulfilled by index.html.
({ request, url }) => {
// If this isn't a navigation, skip.
if (request.mode !== 'navigate') {
return false
} // If this is a URL that starts with /_, skip.
if (url.pathname.startsWith('/_')) {
return false
} // If this looks like a URL for a resource, because it contains // a file extension, skip.
if (url.pathname.match(fileExtensionRegexp)) {
return false
} // Return true to signal that we want to use the handler.
return true
},
createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
)
registerRoute(
// Add in any other file extensions or routing criteria as needed.
({ url }) => url.origin === self.location.origin && (
url.pathname.endsWith('.png')
|| url.pathname.endsWith('.svg')
|| url.pathname.endsWith('.jpg')
|| url.pathname.endsWith('.jpeg')
|| url.pathname.endsWith('.ico')
|| url.pathname.endsWith('.ttf')
|| url.pathname.endsWith('.woff')
|| url.pathname.endsWith('.woff2')
), // Customize this strategy as needed, e.g., by changing to CacheFirst.
new StaleWhileRevalidate({
cacheName: 'res',
plugins: [
// Ensure that once this runtime cache reaches a maximum size the
// least-recently used images are removed.
new ExpirationPlugin({ maxEntries: 50 }),
],
})
)
registerRoute(
// Add in any other file extensions or routing criteria as needed.
({ url }) => url.origin === self.location.origin && url.pathname.includes('i18n'),
new NetworkFirst({
cacheName: 'i18n',
})
)