GWT Bootstrap3 Openlayers离线

问题描述

我在Bootstrap3和Openlayers Map中使用GWT。我已经实现了自己的OSM Map服务器。没有互联网连接，我的应用程序无法启动。我需要指导。

我遵循boostrap3 V1.0.2中针对脱机应用程序的说明。但是我只有一个黑屏。

从Firefox调试器开始，我在控制台中收到以下消息：

Uncaught ReferenceError: OpenLayers is not defined
    <anonymous> http://www.openstreetmap.org/openlayers/OpenStreetMap.js:7

从Google Chrome浏览器开始，我收到以下警告

[Deprecation] Application Cache API manifest selection is deprecated and will be removed in M85,around August 2020. See https://www.chromestatus.com/features/6192449487634432 for more details.

之后

GET http://www.openlayers.org/apI/OpenLayers.js net::ERR_INTERNET_disCONNECTED

和

localhost/:1 Application Cache Error event: Invalid or missing manifest origin trial token: http://localhost:8090/simaso/simasoweb/appcache.manifest

这是我的基本设置

SiMaSoWeb.gwt.xml：

...
  <inherits name='com.google.gwt.json.JSON'/>  
  <inherits name="com.google.web.bindery.autobean.AutoBean"/>  
  <inherits name="org.gwtbootstrap3.extras.cachemanifest.Offline"/>  
...
  <add-linker name="offline" />

SiMaSoWeb.html：

<!doctype html>

<html manifest="simasoweb/appcache.manifest">
  <head>
    <title>@R_613_5404@e</title>

    <script type="text/javascript" language="javascript" src="simasoweb/simasoweb.nocache.js"></script>
    <script src="http://www.openlayers.org/apI/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>    
    <link type="text/css" rel="stylesheet" href="SiMaSoWeb.css">
....
</html>

在... \ simasoweb \ appcache.manifest中，我发现：

CACHE MANIFEST
# Version: 1599380329409.0.6297069797290025

CACHE:
AF4477772D0DB53A10ABCF74A5AE0C4D.cache.js
fonts/fontawesome-webfont.woff
clear.cache.gif
fonts/FontAwesome.otf
css/bootstrap-notify-custom.min.cache.css
7192594CA2F468C2F793523022719FA0.cache.js
...
css/font-awesome-4.7.0.min.cache.css

NETWORK:
*

最后我把所有这些都整理好。资源似乎包含在war文件中。不用说，有了Internet连接，只有在开始的前1-2秒内，一切运行良好..

解决方法

根据您所包含的Google Chrome warning，App Cache是已弃用的标准，将被删除。它已从非安全上下文中删除。

您应该使用Service Workers来缓存资源以供脱机使用。您可能必须编写自己的链接程序，或者可以使用gwt-serviceworker-linker。

感谢ELEVATE，我设法从AppCache迁移到ServiceWorker。但是，Openlayers无法通过这种方式修复。所以这是解决问题的方法：

ServiceWorker

我仍在使用Java 8
我已升级到GWT 2.9

我已添加到.gwt.xml

<inherits name="org.realityforge.gwt.serviceworker.Linker"/>
<inherits name="elemental2.dom.Dom"/>
<inherits name="elemental2.promise.Promise"/>
<inherits name="jsinterop.base.Base"/>

... 和

  <add-linker name="serviceworker"/>    
  <extend-configuration-property name="serviceworker_static_files" value="./"/>
  <extend-configuration-property name="serviceworker_static_files" value="../SiMaSoWeb.html"/>

在我添加的onModuleLod开头的条目JAVA例程中

import static elemental2.dom.DomGlobal.*;
import elemental2.dom.DomGlobal;

public void onModuleLoad() {
 ...
    initStatic();
 ...

然后在该模块中

public void initStatic() {
if ( null != navigator.serviceWorker )
{
  navigator.serviceWorker.register("simasoweb/"+ GWT.getModuleName() + "-sw.js" ).then( registration -> {
      console.log( "ServiceWorker registration successful with scope: " + registration.getScope() );

      // Every minute attempt to update the serviceWorker. If it does update
      // then the "controllerchange" event will fire.
      DomGlobal.setInterval( v -> registration.update(),60000 );

      return null;
    },error -> {
      console.log( "ServiceWorker registration failed: ",error );
      return null;
    } );

  navigator.serviceWorker.addEventListener( "controllerchange",e -> {
    // This fires when the service worker controlling this page
    // changes,eg a new worker has skipped waiting and become
    // the new active worker.
    console.log( "ServiceWorker updated ",e );
  } );
}       
}
}

我在访问gwt-war目录中的正确文件时遇到问题。因此，我更新了navigator.serviceWorker.register ...命令。使用CTRL + SHIFT + I的Google固有调试器非常有用。在“控制台”选项卡中，您找到消息-红色表示不好-解决它！

作为外部jar库，我必须包含

elemental2-core
elemental2-dom
elemental2-promise
base

现在，openlayers问题...不用说，可能会有一种更加优雅的方法，而且，您需要一个脱机地图，该地图已由我自己绘制并可用（德国为150GB！）。

在HTML文件中

请注意，我在浏览器中打开了openlayers和openstreetmap .js文件，并将它们复制到文件中，并将它们复制到子目录src中的war目录中。再次，浏览器调试器可以帮助查找目录问题。

     <script type="text/javascript" language="javascript" src="simasoweb/simasoweb.nocache.js"></script>
     <script src="src/OpenLayers.js"></script>
     <script src="src/OpenStreetMap.js"></script>

硬拷贝我下载了gwt-openlayers演示项目GWT-OpenLayers-master.zip 并将GWT-OpenLayers-master \ gwt-openlayers-showcase \ src \ main \ resources \ org \ gwtopenmaps \ demo \ openlayers \ public \ openlayers中的所有文件复制到我的... war \ src \目录中，其中是我的openlayers.js文件说谎。

最后，我不确定服务人员的1-3点是否真的有帮助。