當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

gwt格式_GWT的渐进式Web应用程序配方

發(fā)布時(shí)間：2023/12/3 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 gwt格式_GWT的渐进式Web应用程序配方小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

gwt格式

漸進(jìn)或不漸進(jìn)…

如果您已經(jīng)設(shè)計(jì)或開(kāi)發(fā)Web應(yīng)用程序已有一段時(shí)間，那么您可能會(huì)遇到無(wú)數(shù)次“漸進(jìn)式Web應(yīng)用程序”一詞，并且可能會(huì)在未來(lái)幾年內(nèi)使用。您可能想知道PWA的確切定義是什么，如何識(shí)別PWA，以及如何構(gòu)建PWA。根據(jù)字典，漸進(jìn)一詞是指可以改善或變得更好的東西，但是這與Web應(yīng)用程序有什么關(guān)系呢？我們真的不知道。 PWA似乎是Google引起人們興趣的流行語(yǔ)，與PWA的真正含義并沒(méi)有真正的關(guān)系。 Alex Russel將PWA定義為“攝取正確維生素的網(wǎng)站”。為簡(jiǎn)單起見(jiàn)，讓我們首先說(shuō)說(shuō)PWA是經(jīng)過(guò)優(yōu)化以適合其環(huán)境的Web應(yīng)用程序：在移動(dòng)設(shè)備或平板電腦上，它們可以扮演移動(dòng)本機(jī)應(yīng)用程序的角色，而在PC上，它們可以扮演普通Web應(yīng)用程序的角色。

PWA的基本原理：

PWA是具有常規(guī)Web應(yīng)用程序以及用于不同移動(dòng)平臺(tái)的捆綁應(yīng)用程序的替代方法。維護(hù)和升級(jí)所有這些程序可能會(huì)花費(fèi)很大，尤其是在應(yīng)用程序頻繁更改的情況下。使用PWA，只有一個(gè)適用于所有平臺(tái)的應(yīng)用程序，可以通過(guò)瀏覽器中的鏈接進(jìn)行訪問(wèn)。 PWA旨在使用“移動(dòng)優(yōu)先”方法進(jìn)行設(shè)計(jì)。可以安裝它們，但它們也可以作為常規(guī)網(wǎng)站正常工作。 Google為PWA創(chuàng)建了一個(gè)專(zhuān)用網(wǎng)站，并介紹了通過(guò)將應(yīng)用程序/網(wǎng)站轉(zhuǎn)換為PWA而受益的公司的不同案例。

PWA的特征：

Google的開(kāi)發(fā)倡導(dǎo)者Rob Dodson在他的演講中強(qiáng)調(diào)了Web應(yīng)用程序的不同特征：
–React靈敏：適應(yīng)設(shè)備
–快速加載：優(yōu)化以快速繪制或渲染 –脫機(jī)工作：使用服務(wù)人員來(lái)緩存內(nèi)容，以允許脫機(jī)使用或慢速網(wǎng)絡(luò)連接的應(yīng)用程序 –可安裝：可以在主屏幕中安裝應(yīng)用程序（例如本機(jī)應(yīng)用程序） –參與度：通過(guò)推送通知使用戶了解情況

既然我們知道了漸進(jìn)式Web應(yīng)用程序的外觀，我們就可以開(kāi)始研究可以幫助我們使GWT應(yīng)用程序漸進(jìn)式的各種工具。

用于PWA的GWT食譜：

- ＃1響應(yīng)式：

為了使您的GWT應(yīng)用程序具有響應(yīng)能力，GWT用戶有幾個(gè)選項(xiàng)。如果您具有設(shè)計(jì)技能，則可以使用自定義代碼和CSS使應(yīng)用程序具有響應(yīng)能力。否則，您可以依賴(lài)其他框架。 GWT的Bootstrap（ https://github.com/gwtbootstrap3/gwtbootstrap3 ）是我想到的第一件事。它提供了著名的Twitter框架的所有組件。另一種選擇是GWTMaterialDesign（ https://github.com/GwtMaterialDesign/gwt-material ）。它提供了具有響應(yīng)性的材料設(shè)計(jì)，可以隨時(shí)為您的應(yīng)用程序使用元素。最后， gwt-polymer-element是GWT的Polymer包裝材料，它還提供了隨時(shí)可用的響應(yīng)式Web組件，并且可以在設(shè)計(jì)構(gòu)建響應(yīng)式應(yīng)用程序時(shí)派上用場(chǎng)。我們?cè)谥暗囊黄恼轮刑峁┝薖olymer的新手指南。

- ＃2快速加載：

為了減少第一次噴涂的時(shí)間，可以做很多事情。首先，可以使用代碼拆分來(lái)減少gwt模塊文件的大小。它基本上將模塊分成多個(gè)片段，從而使GWT模塊在啟動(dòng)時(shí)僅下載所需的片段。其次，可以將PWA 準(zhǔn)則指定的應(yīng)用程序外殼方法應(yīng)用于GWT應(yīng)用程序。這可以通過(guò)從應(yīng)用程序Java代碼中提取靜態(tài)元素和數(shù)據(jù)并將其直接放入.html入口點(diǎn)來(lái)完成。例如：

GWT用戶的常見(jiàn)做法是將.html的正文留空，并以編程方式從應(yīng)用程序添加其視圖：

<body> ? ? </body>//....AppMainView view = AppMainView();RootPanel.get().add(view);

盡管這種做法沒(méi)有錯(cuò)，但是由于.js模塊文件將包含更多指令，因此它可能會(huì)延長(zhǎng)應(yīng)用程序的加載時(shí)間，因此執(zhí)行起來(lái)將花費(fèi)更多時(shí)間。作為解決方法，我們可以嘗試識(shí)別視圖中的所有靜態(tài)元素并將其放入.html中，然后可以從入口點(diǎn)加載單個(gè)視圖：

<div id="appShell"><img src="logo.png" alt="" /> <div id="menu"></div> <div id="mainContent"></div>//... MenuView menu = new MenuMeview(); ContentView content = new ContentView();RootPanel.get("menu").add(menu); RootPanel.get("mainContent").add(content);

為了說(shuō)明的目的，這當(dāng)然是簡(jiǎn)化的示例。到目前為止，我們已經(jīng)看到了代碼拆分和應(yīng)用程序外殼如何減少呈現(xiàn)應(yīng)用程序的時(shí)間。還有HTML5的async腳本屬性，該屬性并非真正專(zhuān)用于GWT。例如：

<!-- Inside HEAD --!> <script src="polymerstarter/polymerstarter.nocache.js" async="" type="text/javascript">

這將指示瀏覽器不要阻止解析，并在可用時(shí)盡快加載我們的應(yīng)用腳本。

另一種選擇是將應(yīng)用程序腳本放入正文中。

- ＃3離線工作：

這主要可以使用服務(wù)人員來(lái)完成。沒(méi)有官方的GWT庫(kù)與服務(wù)人員進(jìn)行交互。甚至gwt-polymer-elements都不包裝Platinum Elements，Platinum Elements是用于與瀏覽器的服務(wù)人員交互的Polymer元素。 GWT用戶將不得不手動(dòng)編寫(xiě)一些Javascript來(lái)實(shí)現(xiàn)應(yīng)用程序資產(chǎn)的緩存機(jī)制。 JSNI或Jsinterop可用于與瀏覽器進(jìn)行交互并調(diào)用服務(wù)工作者服務(wù)。定義緩存事件的服務(wù)工作者腳本需要在單獨(dú)的腳本上，因此，目前，將服務(wù)工作者代碼和GWT應(yīng)用程序模塊代碼混合在同一.js文件中有點(diǎn)復(fù)雜。 GWT唯一可以完成的任務(wù)是注冊(cè)服務(wù)工作者。我們將在下一節(jié)的后面進(jìn)行演示。另請(qǐng)注意，并非所有瀏覽器都支持服務(wù)工作者，您可以在Mozilla的API文檔頁(yè)面中找到有關(guān)此服務(wù)的更多詳細(xì)信息。

有關(guān)如何使用Service Worker緩存應(yīng)用程序數(shù)據(jù)和資產(chǎn)的更多詳細(xì)信息，Google提供了一些有用的指南。

- ＃4無(wú)法安裝：

此收據(jù)也不特定于GWT。要使Web應(yīng)用程序可安裝，您需要添加一個(gè)名為app manifest的json文件，并將其鏈接到.html入口點(diǎn)：

有關(guān)如何編寫(xiě)清單文件的指南，請(qǐng)參考W3C的指南： https : //www.w3.org/TR/appmanifest/ 。您也可以使用此在線工具： http : //brucelawson.github.io/manifest/ ，該工具可以為您生成清單，但是您的應(yīng)用程序必須已經(jīng)在線。您可以使用標(biāo)語(yǔ)要求用戶安裝該應(yīng)用程序，也可以讓他從瀏覽器的選項(xiàng)中手動(dòng)進(jìn)行操作。

- ＃5參與：

再次沒(méi)有正式的GWT推送通知庫(kù)。這可能是呼吁GWT社區(qū)填補(bǔ)這一空白。在此之前，GWT用戶可以使用JSNI或Jsinterop與瀏覽器進(jìn)行交互并訂閱推送通知。

演示應(yīng)用

為了說(shuō)明上述特征，我們使用gwt-polymer-elements和gwty-leaflet構(gòu)建了一個(gè)地圖應(yīng)用程序。該應(yīng)用程序顯示用戶的收藏夾地圖。

來(lái)源： https : //github.com/gwidgets/gwt-pwa-demo
直播： https : //gwt-pwa-demo.herokuapp.com/pwademo.html/

使用Polymer，我們的應(yīng)用程序默認(rèn)情況下是響應(yīng)式的，因此此步驟已完成。

為了使應(yīng)用程序快速加載，我們首先移除所有靜態(tài)html，然后將其放入.html入口點(diǎn)文件： https : //github.com/gwidgets/gwt-pwa-demo/blob/master/src/main /webapp/pwademo.html

我們使用聚合物元素與dom元素進(jìn)行交互。例如：

PaperMenuLEement paperMenu = (PaperMenuElement) Polymer.getDocument().getElementById("paperMenu");paperMenu.select("paris");

我們還使應(yīng)用腳本異步加載：

并且我們引入了一些代碼拆分方法，因?yàn)槊總€(gè)部分只有一個(gè)地圖，因此我們只需要在加載頁(yè)面時(shí)在顯示的部分上加載地圖。

loadStartupMap();//Maps are not loaded on start up, but only when iron selector selects a new map ironPages.addEventListener("iron-select", e -> {if(ironPages.getSelected().equals("london") && !londonMapInitialized){//Some code splitting to reduce initial module sizeGWT.runAsync(new RunAsyncCallback(){@Overridepublic void onFailure(Throwable reason) {Document.get().getElementById("londonMap").setInnerHTML("Could not load this map, please try again later");}@Overridepublic void onSuccess() {Maps.initializeLondonMap(); }});londonMapInitialized = true;} });

我們還添加了一個(gè)應(yīng)用程序清單，以允許手動(dòng)安裝該應(yīng)用程序

{"name": "Favorite Maps PWA","short_name": "Favorite Maps PWA","icons": [{"src": "image/mapicon.png","sizes": "144x144","type": "image/png"}],"start_url": "/pwademo.html","display": "standalone","background_color": "#3E4EB8","theme_color": "#2E3AA1" }

最后，我們添加了JsInterop類(lèi)來(lái)注冊(cè)服務(wù)工作者。

if (Navigator.serviceWorker != null) {Navigator.serviceWorker.register("sw.js").then(new Function<JavaScriptObject, JavaScriptObject>() {@Overridepublic JavaScriptObject call(JavaScriptObject arg) {GWT.log("registred service worker successfully");return null;}});} else {GWT.log("service worker unavailable in this browser");}

我們創(chuàng)建了一個(gè)名為sw.js的服務(wù)工作者腳本，并將其添加到應(yīng)用程序的資源中。

該腳本將安裝并激活服務(wù)工作者。它還允許服務(wù)工作者預(yù)訂獲取事件，該事件在每次請(qǐng)求資源時(shí)觸發(fā)。然后，服務(wù)工作者根據(jù)其當(dāng)前狀態(tài)決定是使用本地緩存還是從網(wǎng)絡(luò)中獲取資源。

加載應(yīng)用程序后，我們可以在Google chrome的緩存存儲(chǔ)中找到我們的資產(chǎn)：

http://www.g-widgets.com/wp-content/uploads/2016/08/cacheChrome.png

如果我們?cè)贕oogle Chrome瀏覽器上禁用了網(wǎng)絡(luò)并嘗試運(yùn)行該應(yīng)用程序，則會(huì)得到類(lèi)似的信息（由于未緩存地圖，因此未渲染）：

該應(yīng)用程序即使沒(méi)有網(wǎng)絡(luò)也可以提供服務(wù)。如果我們看一下Chrome開(kāi)發(fā)工具中的網(wǎng)絡(luò)請(qǐng)求，就會(huì)注意到服務(wù)工作者正在提供應(yīng)用程序資源：

由于這是一個(gè)演示應(yīng)用程序，因此我們沒(méi)有添加任何推送通知，因?yàn)樗枰O(shè)置推送服務(wù)器。

我們已從Android手機(jī)將應(yīng)用程序安裝到主屏幕，并且得到了類(lèi)似以下內(nèi)容：

結(jié)論

在Web開(kāi)發(fā)領(lǐng)域，PWA仍然是新事物。一些人預(yù)測(cè)他們將在未來(lái)幾年接管本地應(yīng)用程序。我們知道，GWT開(kāi)發(fā)人員一直在使用Phonegap將其Web應(yīng)用程序轉(zhuǎn)換為移動(dòng)本機(jī)應(yīng)用程序，也許有了PWA，他們將不再需要這樣做。我們已經(jīng)在本教程中看到了如何使用諸如Polymer之類(lèi)的庫(kù)將GWT用于構(gòu)建PWA。到目前為止，還沒(méi)有GWT庫(kù)可以與瀏覽器服務(wù)工作者進(jìn)行交互，因此GWT社區(qū)需要填補(bǔ)這一空白。

有趣的鏈接

Addy Osmani初學(xué)者指南： https ： //addyosmani.com/blog/getting-started-with-progressive-web-apps/

2016年SpringIO關(guān)于PWA和Spring Boot的討論： https : //www.youtube.com/watch?v= zAZQeQ0CRpQ

來(lái)自Web開(kāi)發(fā)在線代理商https://skilled.co/的PWA用例摘要圖表：

由Skilled.co提出

翻譯自: https://www.javacodegeeks.com/2017/07/progressive-web-apps-recipes-gwt.html

gwt格式

總結(jié)

以上是生活随笔為你收集整理的gwt格式_GWT的渐进式Web应用程序配方的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：实现wps文档页面横纵向混排(在WPS文
下一篇： spock_在扩展Spock时输出给定值