开发Kiosk Web应用程序的10个技巧

我以为我会从我开发Kiosk Web应用程序的经验中记下一些技巧。 快速浏览一下以确保您的下一个信息亭网络应用程序没有被忽略可能会很有用。 他们来了。

1.禁用文本选择

一些信息亭的行为方式使得您在拖动手指时仍可以选择文本，这还取决于您用来显示该应用程序的浏览器/软件。

/* disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;

2.模拟触摸设备。

在开发过程中，使用chrome开发工具替代工具可以模拟您的点击事件和触摸/滑动。

3.强制刷新浏览器缓存

Kiosk Web应用程序可能正在运行缓存的媒体，并强制它们运行最新的代码，您可能需要在静态媒体上附加一个变量，以强制浏览器刷新JS / CSS。 您可以将动态变量单独添加到静态媒体上，或者如果使用PHP（例如index.php），则可以执行以下操作：

 < ?php
    //currently changes daily at middnight
    $forceNum = '5'; //increment this number to force browser to refresh static media cache(js/css).
    $cacheKey = '?'.strtotime(date('Y-m-d')).$forceNum;
?>
  href="css/styles.css<?php%20echo%20%24cacheKey;%20?/>" rel="stylesheet"/> 
 

4.在信息亭模式下使用Google Chrome

Chrome可以开箱即用的Kiosk模式启动。 非常适合测试。 请按照以下说明查找操作方法-> Chrome信息亭模式设置 。

5.具有触摸支持的引导程序

如果您从头开始，请不要重新发明轮子！ 看看Gumby 2引导程序，它具有开箱即用的触摸支持和可自定义的引导程序UI，可轻松使Web应用程序看起来像您想要的样子。 Backbone.js提供了即时视图切换以及视图之间的模板和数据管理。

6.防止重复的滑动脚本调用

当用户滑动屏幕时，它可能会触发多个事件，并且只能触发一次。 因此，为了使您的应用程序平稳运行，请使用防抖动脚本 。

7.预加载您的Web应用程序图像

这是有关如何设置Web应用程序图像预加载的教程。 这样可以极大地加快应用程序的使用速度，并防止较大图像的缩放加载。

查看代码/功能后，我将进行更多更新。 –与往常一样，随时分享您的提示，我将添加它们。

From: https://www.sitepoint.com/tips-developing-kiosk-web-applications/