svelte - 如何在 Svelte/Sapper 中使用 SSR 进行设备检测?
问题描述
我需要检测用户设备(浏览器、操作系统等)并根据设备类型(移动设备或桌面设备)显示不同的导航。它应该在 Sapper/Svelte 的 SSR 期间工作。
非常感谢任何帮助!
解决方案
对于 Sapper server.js:
polka() // You can also use Express
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware({
// let make device detection possibility, e.g. in <Nav> component
session: (req, res) => ({
'user-agent': req.headers['user-agent']
})
})
)
.listen(PORT, err => {
if (err) console.log('error', err);
});
对于 Sapper Nav.svelte 组件
<script>
export let segment;
import { stores } from '@sapper/app';
import UAParser from 'ua-parser-js';
// session is passed in server.js
const { preloading, page, session } = stores();
var parser = new UAParser();
parser.setUA($session['user-agent']);
let mobile = parser.getResult().device['type'] == 'mobile';
</script>
{#if mobile}
<p>Mobile menu here</p>
{:else}
<p>Desktop menu here</p>
{/if}
另外,不要忘记先让 npm install ua-parser-js --save!
推荐阅读
- c# - 如何在 VR 中实现抗锯齿(Oculus Rift S 和 Quest)
- python - sqlalchemy 同时从 2 个表中计数
- javascript - 将 React 组件作为 prop 传递给另一个组件
- android - node-gcm cordova android 自定义声音推送
- sql - SCN 保留的最大天数,用于查询归档数据
- vue.js - Vee Validate 从 2.2 迁移到 3.X 的问题
- javascript - nodejs 或流星是否会在夏季和冬季时移?
- angular - 比较 Angular 7 中数字类型的 null
- amazon-web-services - 在 AWS 上的 docker 容器上,多部分文件上传有时会失败
- hyperledger-fabric - Hyperledger 结构的可扩展性以支持批量数据处理