反应和服务器端渲染

Question

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

我已经读过导航器是..浏览器中的功能吗？ cmiiw。然后，我不应该在我的应用程序上安装任何东西。我尝试将代码移到我的登录页面（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.js，我想运行一个JS函数，该函数确定设备是否可移动，因此我可以像这样进行一次性内联样式：

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

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

这里的提示是，页面加载后会闪烁，因为它需要重新渲染。因此，如果它对“折痕上方”的任何部件都具有影响，那么您会感到难过。

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

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

1 个答案:

反应和服务器端渲染