Setup a Raspberry Pi to run a Web Browser in Kiosk Mode

先是参考这里,但是最后不成功:https://blog.csdn.net/sinat_36939362/article/details/95391676?utm_medium=distribute.wap_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.wap_blog_relevant_pic&depth_1-utm_source=distribute.wap_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.wap_blog_relevant_pic

然后按这里来,成功了:https://die-antwort.eu/techblog/2017-12-setup-raspberry-pi-for-kiosk-mode/

关键步骤:

A 安装X Server及窗口管理软件:

sudo apt-get install --no-install-recommends xserver-xorg x11-xserver-utils xinit openbox

B 安装浏览器:

sudo apt-get install --no-install-recommends chromium-browser

C 配置Openbox, 位置 /etc/xdg/openbox/autostart


# Disable any form of screen saver / screen blanking / power management
xset s off
xset s noblank
xset -dpms
# Allow quitting the X server with CTRL-ATL-Backspace
setxkbmap -option terminate:ctrl_alt_bksp
# 如果安装的输入法不能正确在浏览器里使用, 加上这一行,  libpinyin可以替换成你习惯的
# 先要安装 sudo apt-get install fcitx fcitx-libpinyin https://forums.raspberrypi.com/viewtopic.php?t=222801
# fcitx -r libpinyin & 
# Start Chromium in kiosk mode
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/'Local State'
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/; s/"exit_type":"[^"]\+"/"exit_type":"Normal"/' ~/.config/chromium/Default/Preferences
chromium-browser --disable-infobars --kiosk 'http://your-url-here'

C 测试(若需要鼠标等操作, 去掉nocursor):

startx -- -nocursor

D 设置开机启动浏览器 修改~/.bash_profile文件增加一行(同样,若需要鼠标等操作, 去掉nocursor)

[[ -z $DISPLAY && $XDG_VTNR -eq 1 ]] && startx -- -nocursor

E 最后, 用raspi-config命令调出配置界面,设置好树莓派开机自动以pi用户登录

最后的最后, 若想实现Web界面调用树莓派本机的一些功能, 可以用Python脚本启动一个微型web服务,比如内置的wsgiref模块,开机自动启动(https://www.laonan.net/blog/66aXdIXhEemphPI8kVRt8A/)此web server脚本,以http://localhost:port/xxx的方式把shell脚本的功能通过web api暴露出来让Web界面调用

Alt + F4, 退出浏览器, 回到openbox, 点右键可执行其它操作.

----------------------------------------------------

修改启动图片: raspi-config: System Options -> Splash Screen. 若出现 the splash screen is not installed so cannot be activate, 安装apt install rpd-plym-splash, 把splash.png拷贝到 /usr/share/plymouth/themes/pix/, 或者修改/usr/share/plymouth/themes/pix/pix.script 里的图片路径, 参考: https://upods.net/how-to-fix-raspi-config-the-splash-screen-is-not-installed-so-cannot-be-activated/

 

如果没有即时替换掉默认启动图片, 试试: sudo plymouth-set-default-theme --rebuild-initrd pix

 

------------- Pi 5 出现 Cannot run in framebuffer mode -----------------

参考 https://forums.raspberrypi.com/viewtopic.php?t=358853 & https://forums.raspberrypi.com/viewtopic.php?t=360211

 

Try add below configuration to a file named 99-vc4.conf and save to /etc/X11/xorg.conf.d/ directory.
 

Section "OutputClass"
  Identifier "vc4"
  MatchDriver "vc4"
  Driver "modesetting"
  Option "PrimaryGPU" "true"
EndSection

Usage tips

  • If Chromium (or the X server) crashes, press Ctrl-Alt-Backspace to kill the X server and restart it with startx -- -nocursor
  • If you need a terminal session, you can switch to one of the other consoles by pressing Ctrl-Alt-F2 (or any other function key). Pressing Ctrl-Alt-F1 brings you back to the first console where Chromium is running.
  • press Ctrl-Blank to change input method.
老楠 :
若浏览器中文为乱码, 1. raspi-config设置中文为默认语言. 2. sudo apt-get install ttf-wqy-zenhei
老楠 :
若需要输入中文: sudo apt-get install fcitx fcitx-googlepinyin fcitx-module-cloudpinyin fcitx-sunpinyin
老楠 :
清除缓存 rm -rf /home/pi/.cache/chromium, https://unix.stackexchange.com/questions/463807/how-to-clear-chromium-browser-cache
老楠 :
若出现error: XDG_RUNTIME_DIR not set in the environment 可能是你用了sudo starx, 直接在当前用户下执行即可 starx
老楠 :
在PI 5B 上可能会出现 Cannot run in framebuffer mode 报错, 参考: https://forums.raspberrypi.com/viewtopic.php?t=358853 加入以下内容: Try add below configuration to a file named 99-vc4.conf and save to /etc/X11/xorg.conf.d/ directory. Code: Select all Section "OutputClass" Identifier "vc4" MatchDriver "vc4" Driver "modesetting" Option "PrimaryGPU" "true" EndSection
Laonan :
from ChatGPT 完全可以,而且你这个思路正好契合 PWA 的优势——让设备开机就直接进入应用,无需额外操作,也能避免“白屏闪烁”。我给你梳理一下实现方式和注意事项: --- ## 1️⃣ 树莓派启动浏览器访问 PWA 的常规做法 你以前做的是: ``` 树莓派开机 → 自动启动 Chromium/Firefox → 打开某个 URL ``` * 这是最简单方式,但启动浏览器时可能先看到**白屏**(浏览器窗口启动、加载页面前)。 * 原因:浏览器启动过程、窗口渲染时间、网络延迟等。 --- ## 2️⃣ 让树莓派开机直接进入 PWA ### 核心思路 * PWA 本身在浏览器中是**可以全屏运行**(Standalone Mode),就像原生应用。 * Chromium / Firefox 都支持命令行参数启动 **全屏 / kiosk 模式**。 * 结合 PWA 的 `manifest.json` 的 `"display": "standalone"`,可以做到**开机即应用、无浏览器 UI、无白屏**。 --- ### 🌟 实现步骤 1. **确保 PWA manifest.json 设置**: ```json { "name": "My PWA App", "short_name": "MyApp", "start_url": "/", "display": "standalone", "background_color": "#000000", "theme_color": "#000000", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" } ] } ``` * `display: "standalone"`:浏览器 UI 隐藏,像原生 App。 * `background_color`:PWA 启动时背景色,用来避免白屏。 --- 2. **在树莓派上用 Chromium 启动 PWA(kiosk 模式)**: ```bash chromium-browser --kiosk --app=https://your-pwa-url.com ``` * `--kiosk`:全屏模式,无窗口边框。 * `--app=<URL>`:直接以应用模式打开 URL,避免浏览器默认 UI。 ⚡ 注意:`--app` 会触发 PWA manifest 的 `"display": "standalone"`,显示全屏、去掉地址栏。 --- 3. **开机自动启动**(systemd / autostart) * 使用 `~/.config/lxsession/LXDE-pi/autostart` 或 `systemd` 服务: ```bash @chromium-browser --kiosk --app=https://your-pwa-url.com ``` * 这样树莓派开机后,直接启动 PWA,无需用户操作。 --- 4. **减少白屏和闪烁** * 设置 `background_color` 为深色或和主界面一致的颜色。 * PWA Service Worker 可以**提前缓存页面和资源**,保证开机快速显示。 * 可以在 PWA 里加一个 **splash screen**(启动画面),PWA manifest 支持: ```json "splash_pages": [ "/splash.html" ] ``` * splash 页面可以在页面加载完成前显示,彻底避免白屏。 --- ### ✅ 总结 * **树莓派开机直接启动 PWA**是可行的。 * 最关键的两点: 1. Chromium 的 `--kiosk --app=<URL>` 参数; 2. PWA manifest 的 `display: standalone` + `background_color` + 可选 splash screen。 * 配合 Service Worker 预缓存,可以做到开机秒开、无白屏、像原生应用一样。 --- 如果你愿意,我可以帮你写一份**完整 Raspberry Pi 开机直接启动 PWA 的 systemd 或 autostart 配置示例**,包括 splash + 缓存优化,让启动体验像原生 App。 你想让我直接写这个吗?
Laonan :
上面核心是这一句? @chromium-browser --kiosk --app=https://your-pwa-url.com --app
For example, "name@something.com". If someone replies to you it will be via email.
For example, "http://someaddress.com"