heroku 修复“引用错误:未定义导航器”

hec6srdp  于 2022-11-13  发布在  其他
关注(0)|答案(1)|浏览(184)

我现在正在学习如何制作PWA,现在卡在了维修工,日志说导航器没有定义,怎么定义导航器呢?
我读到过导航器是browser?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 }`))

有什么帮助吗?请简单解释一下。谢谢!

mzaanser

mzaanser1#

React服务器端呈现(& S)

如果您正在进行服务器端渲染,则需要在客户端运行的函数中调用navigator。
例如,我想通过React.js运行一个JS函数,该函数确定设备是否为移动的设备,这样我就可以执行如下一次性内联样式:

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

现在这个函数使用了navigator,所以我不能只调用fontSize: isMob() ?...,而是在生命周期方法ComponentDidMount()中调用它,因为它在客户端运行,将它设置为state,然后使用this.state.isMob
这里需要注意的是,页面加载后会出现闪烁,因为它需要重新呈现。所以如果它对任何“折叠以上”的组件产生影响,那么你会很伤心。
也许不是一个很好的例子(使用CSS代替),但仍然是一个例子。

相关问题