如何在 Svelte/Sapper 中使用 SSR 进行设备检测？答案

【问题标题】：How to make device detection with SSR in Svelte/Sapper?如何在 Svelte/Sapper 中使用 SSR 进行设备检测？
【发布时间】：2019-10-18 11:06:14
【问题描述】：

我需要检测用户设备（浏览器、操作系统等）并根据设备类型（移动设备或桌面设备）显示不同的导航。它应该在 Sapper/Svelte 的 SSR 期间工作。

非常感谢任何帮助！

【问题讨论】：

首先，我从 Rich Harris 那里找到了这个：github.com/sveltejs/sapper/issues/552
还有这个：github.com/sveltejs/sapper/issues/554
请使用 edit 链接更新您的帖子。所有相关信息都应该在帖子本身中，潜在的帮助者不必通读 cmets。
感谢您的建议。我会做的。

标签： svelte sapper

【解决方案1】：

对于 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！

【讨论】：

【解决方案2】：

看看tailwind css，它非常适合svelte的类用法：https://tailwindcss.com/docs/responsive-design/

还有一些使用 rollup 与 sapper 集成的示例： https://github.com/langbamit/sapper-postcss-tailwind-rollup

【讨论】：