client: update pwa config

This commit is contained in:
fantasticit 2022-05-26 14:01:42 +08:00
parent b90a1065ee
commit 5c4019c102
3 changed files with 148 additions and 1 deletions

View File

@ -3,6 +3,7 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const withPWA = require('next-pwa'); const withPWA = require('next-pwa');
const { getConfig } = require('@think/config'); const { getConfig } = require('@think/config');
const config = getConfig(); const config = getConfig();
const pwaRuntimeCaching = require('./pwa-cache');
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = semi({ const nextConfig = semi({
@ -34,6 +35,7 @@ const nextConfig = semi({
disable: process.env.NODE_ENV !== 'production', disable: process.env.NODE_ENV !== 'production',
dest: '.next', dest: '.next',
sw: 'service-worker.js', sw: 'service-worker.js',
runtimeCaching: pwaRuntimeCaching,
}, },
}); });

View File

@ -0,0 +1,143 @@
module.exports = [
{
urlPattern: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts-webfonts',
expiration: {
maxEntries: 4,
maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
},
},
},
{
urlPattern: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'google-fonts-stylesheets',
expiration: {
maxEntries: 4,
maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
},
},
},
{
urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'static-font-assets',
expiration: {
maxEntries: 4,
maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
},
},
},
{
urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'static-image-assets',
expiration: {
maxEntries: 64,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\/_next\/image\?url=.+$/i,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'next-image',
expiration: {
maxEntries: 64,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\.(?:mp3|wav|ogg)$/i,
handler: 'CacheFirst',
options: {
rangeRequests: true,
cacheName: 'static-audio-assets',
expiration: {
maxEntries: 32,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\.(?:mp4)$/i,
handler: 'CacheFirst',
options: {
rangeRequests: true,
cacheName: 'static-video-assets',
expiration: {
maxEntries: 32,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\.(?:js)$/i,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'static-js-assets',
expiration: {
maxEntries: 32,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\.(?:css|less)$/i,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'static-style-assets',
expiration: {
maxEntries: 32,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\/_next\/data\/.+\/.+\.json$/i,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'next-data',
expiration: {
maxEntries: 32,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\.(?:json|xml|csv)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-data-assets',
expiration: {
maxEntries: 32,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: ({ url }) => {
const isSameOrigin = self.origin === url.origin;
if (!isSameOrigin) return false;
const pathname = url.pathname;
if (pathname.startsWith('/api/')) return false;
return true;
},
handler: 'NetworkFirst',
options: {
cacheName: 'others',
expiration: {
maxEntries: 32,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
networkTimeoutSeconds: 10,
},
},
];

View File

@ -51,7 +51,9 @@ export const DocumentCollaboration: React.FC<IProps> = ({ wikiId, documentId, di
const toastedUsersRef = useRef<Array<IUser['id']>>([]); const toastedUsersRef = useRef<Array<IUser['id']>>([]);
const { user: currentUser } = useUser(); const { user: currentUser } = useUser();
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
const { users, loading, error, addUser, updateUser, deleteUser } = useDoumentMembers(documentId); const { users, loading, error, addUser, updateUser, deleteUser } = useDoumentMembers(documentId, {
enabled: visible,
});
const [inviteUser, setInviteUser] = useState(''); const [inviteUser, setInviteUser] = useState('');
const [collaborationUsers, setCollaborationUsers] = useState([]); const [collaborationUsers, setCollaborationUsers] = useState([]);