GWT引导程序3 Openlayers离线

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

对于离线应用程序，我遵循了boosrap3 V1.0.2中的说明。然而，我只看到了一个空白屏幕。

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

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

从谷歌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>Sirene</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:
*

最后所有这些都是我汇编的。资源似乎包含在战争文件中。。不用说，有了互联网连接，只有在启动的前1-2秒，一切都很好。。

根据您包含的Google Chrome警告，App Cache是一个不推荐使用的标准，正在被删除。它已从非安全上下文中删除。

您应该使用Service Worker缓存资源以供脱机使用。您可能需要编写自己的链接器，或者可以使用gwt-serviceworker链接器。

多亏了ELEVATE，我成功地从AppCache转移到了ServiceWorker。然而，Openlayers无法通过这种方式修复。以下是解决问题的方法：

ServiceWorker

我仍在使用Java 8
我升级到GWT2.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的谷歌固有调试器。在"控制台"选项卡中，您可以找到消息-红色表示错误-解决它！

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

elemental2-core
elemental2-dom
elemental2-promise
base

现在开放层的问题。。。不用说，可能还有一种更优雅的方式，更进一步，你需要一张离线地图，我已经自己绘制好了，可以使用(德国为150GB！(。

在HTML文件中

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

<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是否真的有帮助。

相关内容

最新更新

热门标签：