vite: pwa 提升用户体验
用 pwa 插件提升打开速度
安装
# vite 自带的插件
yarn add vite-plugin-pwa
# 提示更新组件
yarn add @jswork/vite-pwa-promotion配置
其实这个配置就够用了;
VitePWA()用其默认配置。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import htmlBanner from '@jswork/vite-plugin-html-banner';
import { VitePWA } from 'vite-plugin-pwa';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
htmlBanner(),
VitePWA({
// injectRegister: 'inline',
// registerType: 'prompt'
})
]
});App.tsx
- 添加
<VitePwaPromotion mute/>组件，mute其实是将interval的log给禁掉，debug的时候可以打开这个选项
import VitePwaPromotion from '@jswork/vite-pwa-promotion';
import '@jswork/vite-pwa-promotion/dist/style.css';
function App(){
return <div>
<VitePwaPromotion mute/>
</div>
}
最佳实践之 pwa + fallback.js
主体页面 index.html，重点在于 fallback.js 这个不能缓存，得每次加载。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="referrer" content="never" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ViteApp</title>
</head>
<body>
<div id="root"></div>
<script>
if (global === undefined) var global = window;
</script>
<script type="module" src="/src/main.tsx"></script>
<script src="https://unpkg.com/@jswork/loading-screen@1.0.4/dist/lskit.js"></script>
<script>
window.lskit({ locale: 'en-US' });
</script>
<script>
window.onload = function () {
var head = document.getElementsByTagName('head')[0];
var fbScript = document.createElement('script');
fbScript.type = 'text/javascript';
fbScript.async = true;
// this url MUST NOT BE mgt by sw.js
fbScript.src = '/fallback.js?v=' + Date.now();
fbScript.onload = function () {
if (navigator && navigator.serviceWorker && window.__SW_DISABLED__) {
navigator.serviceWorker.getRegistration('/').then(function (reg) {
reg && reg.unregister();
});
}
};
head.appendChild(fbScript);
};
</script>
</body>
</html>fallback.js
一般们于 public/fallback.js 这个位置。
window.__SW_DISABLED__ = false;