修复“ReferenceError：未定义导航器”

Question

我目前正在学习如何制作 PWA。现在我被困在服务人员中。日志说导航器没有定义。如何定义导航器？

我读过导航器是.. 浏览器中的一个功能？厘米。然后我不应该在我的应用程序上安装任何东西。我尝试将代码移动到我的登录页面（home.ejs），到我的入口点（index.js），但没有一个工作。我还在根文件夹中创建了 sw.js 文件。我还阅读了来自 Google 的教程，但我无法理解它。

这是日志

5:03:23 AM web.1 |  > sakamichi-akb-chords@1.0.0 start /home/emil/Documents/Chord PWA
5:03:23 AM web.1 |  > node index.js
5:03:23 AM web.1 |  /home/emil/Documents/Chord PWA/index.js:5
5:03:23 AM web.1 |  if ('serviceWorker' in navigator) {
5:03:23 AM web.1 |                         ^
5:03:23 AM web.1 |  ReferenceError: navigator is not defined
5:03:23 AM web.1 |      at Object.<anonymous> (/home/emil/Documents/Chord PWA/index.js:5:24)
5:03:23 AM web.1 |      at Module._compile (module.js:652:30)
5:03:23 AM web.1 |      at Object.Module._extensions..js (module.js:663:10)
5:03:23 AM web.1 |      at Module.load (module.js:565:32)
5:03:23 AM web.1 |      at tryModuleLoad (module.js:505:12)
5:03:23 AM web.1 |      at Function.Module._load (module.js:497:3)
5:03:23 AM web.1 |      at Function.Module.runMain (module.js:693:10)
5:03:23 AM web.1 |      at startup (bootstrap_node.js:188:16)
5:03:23 AM web.1 |      at bootstrap_node.js:609:3
5:03:23 AM web.1 |  npm
5:03:23 AM web.1 |   ERR!
5:03:23 AM web.1 |   Linux 4.15.0-50-generic
5:03:23 AM web.1 |  npm ERR! 
5:03:23 AM web.1 |  argv "/usr/bin/node" "/usr/bin/npm" "start"
5:03:23 AM web.1 |  npm ERR! node v8.10.0
5:03:23 AM web.1 |  npm ERR! npm  v3.5.2
5:03:23 AM web.1 |  npm ERR! code ELIFECYCLE
5:03:23 AM web.1 |  npm ERR! sakamichi-akb-chords@1.0.0 start: `node index.js`
5:03:23 AM web.1 |  npm ERR! Exit status 1
5:03:23 AM web.1 |  npm ERR! 
5:03:23 AM web.1 |  npm ERR! Failed at the sakamichi-akb-chords@1.0.0 start script 'node index.js'.
5:03:23 AM web.1 |  npm ERR! Make sure you have the latest version of node.js and npm installed.
5:03:23 AM web.1 |  npm ERR! If you do, this is most likely a problem with the sakamichi-akb-chords package,
5:03:23 AM web.1 |  npm ERR! not with npm itself.
5:03:23 AM web.1 |  npm ERR!
5:03:23 AM web.1 |   Tell the author that this fails on your system:
5:03:23 AM web.1 |  npm ERR!     node index.js
5:03:23 AM web.1 |  npm ERR!
5:03:23 AM web.1 |   You can get information on how to open an issue for this project with:
5:03:23 AM web.1 |  npm ERR!     npm bugs sakamichi-akb-chords
5:03:23 AM web.1 |  npm ERR! Or if that isn't available, you can get their info via:
5:03:23 AM web.1 |  npm 
5:03:23 AM web.1 |  ERR!     npm owner ls sakamichi-akb-chords
5:03:23 AM web.1 |  npm ERR! There is likely additional logging output above.
5:03:23 AM web.1 |  npm
5:03:23 AM web.1 |   ERR! Please include the following file with any support request:
5:03:23 AM web.1 |  npm ERR!     /home/emil/Documents/Chord PWA/npm-debug.log
[DONE] Killing all processes with signal  SIGINT
5:03:23 AM web.1 Exited with exit code null

这是我的 index.js

const path = require ('path')
const PORT = process.env.PORT || 5000
const express = require('express')

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

express()
    .use(express.static(path.join(__dirname, 'public')))
    .set('views', path.join(__dirname, 'views'))
    .set('view engine', 'ejs')
    .get('/', (req, res) => res.render('pages/home'))
    .listen(PORT, () => console.log(`Listening on ${ PORT }`))

有什么帮助吗？一个简短的解释将不胜感激。非常感谢！

Answer 1

React 和服务器端渲染

如果您正在执行服务器端渲染，那么您需要在客户端运行的函数中调用 navigator。

例如，对于 React.js，我想运行一个 JS 函数来确定设备是否是移动的，这样我就可以像这样做一个一次性的内联样式：

<h2 style={{
    fontSize: this.state.isMob ? '2rem' : '4.5vw',
}}>

现在该函数使用导航器，所以我不能只调用fontSize: isMob() ?...。相反，我在生命周期方法 ComponentDidMount() 中调用它，因为它在客户端运行，将其设置为状态，然后使用 this.state.isMob。

这里需要注意的是，页面加载后会出现闪烁，因为它需要重新渲染。因此，如果它对“首屏”的任何组件产生影响，那么您会感到难过。

也许不是一个很好的例子（改用 CSS），但仍然是一个例子。