pwa js

by Nino Mihovilić

由NinoMihovilić

如何在互联网信息亭中实现PWA和Barba.js (How to Implement a PWA and Barba.js into internet kiosks)

The project we’ll describe here is an interactive internet kiosk that’s used as an extension for the LikeUs mobile application. LikeUs is a mobile app that makes it easy for users to choose a place to go out, have coffee or listen to a concert. Because Zagreb’s Tkalčićeva street is a place where quite a lot of young people hang out, we decided it was the right place for our offline promotion of the LikeUs app.

我们将在此处描述的项目是一个交互式Internet信息亭，该信息亭被用作LikeUs移动应用程序的扩展。 LikeUs是一款移动应用，可让用户轻松选择外出，喝咖啡或听音乐会的地方。 因为萨格勒布的Tkalčićeva街是很多年轻人闲逛的地方，所以我们认为这是我们离线推广LikeUs应用程序的合适地点。

实施信息亭模式 (Implementing the Kiosk Mode)

One of the first challenges we faced was the implementation of the kiosk browser mode on our device. It was an Android Box and we used Chrome as a web browser that will run the app. Kiosk browser mode is a mode in which you run the application in fullscreen and without any browser user interface or, in our case, without any Android user interface.

我们面临的第一个挑战之一是在设备上实现信息亭浏览器模式。 这是一个Android Box，我们使用Chrome作为运行该应用程序的网络浏览器。 信息亭浏览器模式是一种模式，您可以在该模式下以全屏模式运行该应用程序，而无需使用任何浏览器用户界面，对于我们而言，则无需使用任何Android用户界面。

The intent is to prevent users from running anything other than the browser-based content. As there are hundreds of kiosk mode apps, we decided to use one of the available applications instead of building one from the ground up.

目的是防止用户运行除基于浏览器的内容以外的任何内容。 由于有数百个信息亭模式的应用程序，我们决定使用一种可用的应用程序，而不是从头开始构建一种。

After some research, we decided to use the Kiosk Browser Lockdown app. It has all of the features we were looking for:

经过研究，我们决定使用Kiosk浏览器锁定应用程序。 它具有我们一直在寻找的所有功能：

• Locking the device to a single URL
  将设备锁定到单个URL
• Hiding toolbar options
  隐藏工具栏选项
• Hiding the notifications screen
  隐藏通知屏幕
• Hiding the Android user interface
  隐藏Android用户界面

The next step was to test the PWA in the Android environment and in the Kiosk Browser app. That’s when we discovered that things wouldn’t go as smooth as we planned!

下一步是在Android环境和Kiosk Browser应用程序中测试PWA。 到那时我们才发现事情不会像我们计划的那样顺利！

The first problem we encountered was on the frontend side — the final website seemed like an upscaled version of the initial design, and this was due to some screen limitations and a different rendering environment. As the deadline was approaching, we didn’t have enough time to tweak every single item in CSS to fit the initial design outlines, so we decided to downscale the entire document.

我们遇到的第一个问题是在前端侧–最终网站似乎是初始设计的升级版本，这是由于某些屏幕限制和不同的渲染环境所致。 随着截止日期的临近，我们没有足够的时间来调整CSS中的每个项目以适应最初的设计轮廓，因此我们决定缩减整个文档的规模。

It was a reasonable approach considering all the inputs we had. Having to test everything once more was a big downside, but we had to be sure that everything will work in this context.

考虑到我们的所有投入，这是一种合理的方法。 必须再次测试所有内容是一个很大的缺点，但是我们必须确保所有内容都可以在这种情况下运行。

The second problem was that external scripts like Google Maps weren’t loading in the Kiosk Browser app with the PWA, so we did a little tweak. We started the Kiosk Browser app, which removed the Android user interface, and then exited the Kiosk Browser app and started the PWA outside of the Kiosk Browser app. This way we managed to remove the Android interface with all external scripts loading as they were supposed to.

第二个问题是Google地图等外部脚本未通过PWA加载到Kiosk Browser应用程序中，因此我们做了一些调整。 我们启动了Kiosk Browser应用程序，该应用程序删除了Android用户界面，然后退出Kiosk Browser应用程序，并在Kiosk Browser应用程序外部启动了PWA。 这样，我们设法删除了所有应加载外部脚本的Android界面。

开发渐进式Web应用程序 (Developing a Progressive Web App)

After going through the project brief and specifications, the first thing that came to our mind was… we should do a PWA (Progressive Web App). A Progressive Web App is an application that provides similar capabilities and functionalities as native mobile apps:

在完成了项目简介和规范之后，我们想到的第一件事是……我们应该做一个PWA(渐进式Web应用程序)。 渐进式Web应用程序是一种提供与本地移动应用程序相似的功能的应用程序：

• Service workers allow apps to show content nearly instantly and reliably because they cache every request
  服务工作者允许应用程序几乎立即且可靠地显示内容，因为他们缓存了每个请求
• There is an ability to add the app to the home screen like a normal native app
  可以像正常的本机应用程序一样将应用程序添加到主屏幕
• Push notifications can be implemented for multipurpose usages
  推送通知可以实现多种用途
• The app is fast and smooth
  该应用程序快速流畅
• It uses HTTPS and is easy to implement.
  它使用HTTPS，易于实现。

After evaluating client’s requests, all features of the PWA were meeting our requests.

在评估了客户的请求之后，PWA的所有功能都满足了我们的请求。

Our requests were:

我们的要求是：

• To build an app that could be used on an interactive screen
  生成可在交互式屏幕上使用的应用程序
• The app should use an existing API we built for our LikeUs mobile app
  该应用程序应使用我们为LikeUs移动应用程序构建的现有API
• The device used will be an Android Box
  使用的设备将是Android Box
• Internet access would be restricted because the app would be connected to a public network (this would change later)
  互联网访问将受到限制，因为该应用程序将连接到公共网络(稍后会更改)
• The app should have an additional section for banners and a banner management system
  该应用程序应有一个用于横幅和横幅管理系统的附加部分

We could build a web app with our existing API without having to implement additional functionalities, and we could also build a simple CMS (content management system) for banner management and push notifications for content reloading. As internet access would be restricted and unstable, we could use the PWA feature to cache pages and serve them even when the app is offline.

我们可以使用现有的API构建一个Web应用程序，而无需实现其他功能，我们还可以构建一个简单的CMS(内容管理系统)，用于横幅广告管理和推送通知以重新加载内容。 由于互联网访问受到限制且不稳定，因此即使应用程序处于离线状态，我们也可以使用PWA功能来缓存页面并为其提供服务。

Be sure to check out this in-depth tutorial and explanation for Service Workers.

请务必查看此深入的教程和服务工作者说明。

调整横幅管理系统 (Tweaking the Banner Management System)

The app is divided into two sections. The top section is the banner section, and the bottom part is the main section divided into tabs.

该应用程序分为两个部分。 顶部是横幅部分，底部是主要部分，分为标签。

We have two types of banners — Youtube videos and images. Since banners can be changed, we needed to develop a CMS. We developed a simple CMS in which the client can enter Youtube videos and images into a slider.

我们有两种横幅广告-YouTube视频和图像。 由于横幅可以更改，因此我们需要开发CMS。 我们开发了一个简单的CMS，客户端可以在其中将Youtube视频和图像输入到滑块中。

The problem we encountered here was refreshing the app to reload new banner content. You see, because the app was using Barba.js, it was never refreshing. To make it work, we used a cool feature of our PWA — push notifications. Push notifications are a feature that uses the Notifications API and the Push API to send messages from the server to the client.

我们在这里遇到的问题是刷新应用程序以重新加载新的横幅内容。 您会看到，因为该应用程序使用的是Barba.js，所以它从未刷新过。 为了使其正常工作，我们使用了PWA的一个很酷的功能-推送通知。 推送通知是一项使用Notifications API和Push API将消息从服​​务器发送到客户端的功能。

How did push notifications help solve our content reloading problem? The solution is pretty simple and straightforward. When the user changes banner content in the CMS, we send a push to the PWA and then the PWA refreshes two times. The PWA needs to be refreshed two times to delete the cache and to reload new content.

推送通知如何帮助解决我们的内容重新加载问题？ 解决方案非常简单明了。 当用户在CMS中更改横幅内容时，我们将推送发送到PWA，然后PWA刷新两次。 PWA需要刷新两次以删除缓存并重新加载新内容。

处理外部障碍 (Dealing with External Obstacles)

Internet kiosks are often placed in outdoor environments where internet connection is sometimes unstable and slow. When the internet connection is public and in a pretty crowded street, you face a lot of problems when using real-time communication and external APIs.

Internet信息亭通常放置在室外连接有时不稳定且缓慢的室外环境中。 当互联网连接是公共的并且在一条拥挤的街道上时，使用实时通信和外部API会遇到很多问题。

A common “hacky” approach is to extend the delay time and hope that everything works well. Even though this is not the preferred way, it can serve as a backup if everything else fails.

常见的“ hacky”方法是延长延迟时间，并希望一切正常。 即使这不是首选方法，但如果其他所有方法失败，也可以用作备份。

Google Maps was one of the external APIs that gave us a lot of headaches. We had to reload and add new pins, but on a slow connection, this was sometimes impossible.

Google Maps是使我们感到头疼的外部API之一。 我们必须重新加载并添加新的引脚，但是在连接缓慢的情况下，有时这是不可能的。

固定内容与动态内容之间的平衡 (Balancing Between Fixed and Dynamic Content)

Optimization is not only applied in the realm of advanced caching techniques and content delivery networks. Smart layout placement and understanding elements that can be “pushed out” of the page reloading flow can reduce the number of requests and speed up the entire navigation flow.

优化不仅应用于高级缓存技术和内容交付网络领域。 可以在页面重新加载流程中“弹出”的智能布局放置和理解元素可以减少请求数量并加快整个导航流程。

The advertising content in the kiosk was hosted on Youtube — it was a video slider that was repeating through all pages. Below that, we had the main content with inline navigation. When selecting different navigation items, the default browser behaviour was to reload the entire page, including that fixed advertising area. It’s a performance nightmare, especially when having external scripts such as Youtube API.

信息亭中的广告内容托管在Youtube上-这是一个视频滑块，可在所有页面中重复播放。 在此之下，我们有了内联导航的主要内容。 选择不同的导航项目时，默认的浏览器行为是重新加载整个页面，包括该固定的广告区域。 这是一场性能梦night，尤其是在拥有外部脚本(例如Youtube API)时。

The question here is — how to reload only one specific part of the page? Well, there will be no browser reloading and the only thing that can be done is changing content in the background without leaving the page.

这里的问题是–如何仅重新加载页面的一个特定部分？ 好吧，将不会重新加载浏览器，唯一可以做的就是在不离开页面的情况下更改后台内容。

Because of the implemented analytics, we had to update the URL accordingly. We did this by using the PJAX (Push State Ajax) technology. This technology allows content prefetching and swapping target DOM nodes in the background.

由于实施了分析，因此我们必须相应地更新URL。 我们通过使用PJAX(推送状态Ajax)技术来做到这一点。 该技术允许在后台进行内容预取和交换目标DOM节点。

To avoid content flashing, create a simple fade transition that fires when content changes. As it’s time-consuming to manually manage all states of content swapping, we used an external library called Barba.js. This library allows advanced transition management and is compatible with all animation frameworks.

为避免内容闪烁，请创建一个简单的淡入淡出过渡，在内容更改时触发。 由于手动管理内容交换的所有状态非常耗时，因此我们使用了一个名为Barba.js的外部库。 该库允许进行高级过渡管理，并且与所有动画框架兼容。

Barba.js has internal state caching that can be used to leverage browser caching and optimize loading time. Barba cache is a global Javascript object where every value is a Promise that has to be resolved.

Barba.js具有内部状态缓存，可用于利用浏览器缓存并优化加载时间。 Barba缓存是一个全局Javascript对象，其中的每个值都是必须解决的Promise。

实施分析和虚拟综合浏览量 (Implementing Analytics and Virtual Pageviews)

We wanted to measure user interaction and page views. Because we are using Barba.js, this is basically a one-page app without page reloads, so the trick to measure page views in this type of app is to use Virtual Pageviews. They are page hits sent to Google Analytics, without actually reloading the page.

我们想衡量用户互动和页面浏览量。 因为我们使用的是Barba.js，所以这基本上是一个单页面的应用程序，而无需重新加载页面，因此在此类应用程序中衡量页面浏览量的技巧是使用虚拟页面浏览量。 它们是发送到Google Analytics(分析)的页面匹配，而没有实际重新加载页面。

The first step is to include the Google Tag manager code, and then to actually send Virtual Pageviews to the data layer. We can do it with the next snippet:

第一步是包括Google跟踪代码管理器代码，然后将虚拟综合浏览量实际发送到数据层。 我们可以使用下一个代码片段来做到这一点：

dataLayer.push({ 'event': 'VirtualPageview', 'virtualPageURL': currentUrl, 'virtualPageTitle': title });

This snippet needs to be called on each new page. On each user interaction that opens a new “page”, we call this snippet that sends the page URL and the page title to Google Analytics. This way we can track pageviews in single page apps that use Barba.js or any other PJAX technology.

需要在每个新页面上调用此代码段。 在每次打开新“页面”的用户互动中，我们都将该代码段称为页面URL和页面标题发送给Google Analytics(分析)。 这样，我们可以在使用Barba.js或任何其他PJAX技术的单页应用程序中跟踪浏览量。

结论 (To Conclude)

When working in a specific environment, sometimes the “by the book” solution is not your only solution. There is usually an opportunity to innovate and use some common tools and libraries in a not so standard environment with a specific set of challenges.

当在特定环境中工作时，有时“按书”解决方案并不是您唯一的解决方案。 通常，有机会在不太标准的环境中创新和使用一些通用工具和库，但要面对一系列特定的挑战。

Originally published at www.bornfight.com.

最初在www.bornfight.com上发布。

翻译自: https://www.freecodecamp.org/news/how-to-implement-a-pwa-and-barba-js-into-internet-kiosks-854d4895fd04/

pwa js