當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/3 编程问答 27 豆豆

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

gwt格式

漸進或不漸進…

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

PWA的基本原理：

PWA是具有常規Web應用程序以及用于不同移動平臺的捆綁應用程序的替代方法。維護和升級所有這些程序可能會花費很大，尤其是在應用程序頻繁更改的情況下。使用PWA，只有一個適用于所有平臺的應用程序，可以通過瀏覽器中的鏈接進行訪問。 PWA旨在使用“移動優先”方法進行設計。可以安裝它們，但它們也可以作為常規網站正常工作。 Google為PWA創建了一個專用網站，并介紹了通過將應用程序/網站轉換為PWA而受益的公司的不同案例。

PWA的特征：

Google的開發倡導者Rob Dodson在他的演講中強調了Web應用程序的不同特征：
–React靈敏：適應設備
–快速加載：優化以快速繪制或渲染 –脫機工作：使用服務人員來緩存內容，以允許脫機使用或慢速網絡連接的應用程序 –可安裝：可以在主屏幕中安裝應用程序（例如本機應用程序） –參與度：通過推送通知使用戶了解情況

既然我們知道了漸進式Web應用程序的外觀，我們就可以開始研究可以幫助我們使GWT應用程序漸進式的各種工具。

用于PWA的GWT食譜：

- ＃1響應式：

為了使您的GWT應用程序具有響應能力，GWT用戶有幾個選項。如果您具有設計技能，則可以使用自定義代碼和CSS使應用程序具有響應能力。否則，您可以依賴其他框架。 GWT的Bootstrap（ https://github.com/gwtbootstrap3/gwtbootstrap3 ）是我想到的第一件事。它提供了著名的Twitter框架的所有組件。另一種選擇是GWTMaterialDesign（ https://github.com/GwtMaterialDesign/gwt-material ）。它提供了具有響應性的材料設計，可以隨時為您的應用程序使用元素。最后， gwt-polymer-element是GWT的Polymer包裝材料，它還提供了隨時可用的響應式Web組件，并且可以在設計構建響應式應用程序時派上用場。我們在之前的一篇文章中提供了Polymer的新手指南。

- ＃2快速加載：

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

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

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

盡管這種做法沒有錯，但是由于.js模塊文件將包含更多指令，因此它可能會延長應用程序的加載時間，因此執行起來將花費更多時間。作為解決方法，我們可以嘗試識別視圖中的所有靜態元素并將其放入.html中，然后可以從入口點加載單個視圖：

<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);

為了說明的目的，這當然是簡化的示例。到目前為止，我們已經看到了代碼拆分和應用程序外殼如何減少呈現應用程序的時間。還有HTML5的async腳本屬性，該屬性并非真正專用于GWT。例如：

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

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

另一種選擇是將應用程序腳本放入正文中。

- ＃3離線工作：

這主要可以使用服務人員來完成。沒有官方的GWT庫與服務人員進行交互。甚至gwt-polymer-elements都不包裝Platinum Elements，Platinum Elements是用于與瀏覽器的服務人員交互的Polymer元素。 GWT用戶將不得不手動編寫一些Javascript來實現應用程序資產的緩存機制。 JSNI或Jsinterop可用于與瀏覽器進行交互并調用服務工作者服務。定義緩存事件的服務工作者腳本需要在單獨的腳本上，因此，目前，將服務工作者代碼和GWT應用程序模塊代碼混合在同一.js文件中有點復雜。 GWT唯一可以完成的任務是注冊服務工作者。我們將在下一節的后面進行演示。另請注意，并非所有瀏覽器都支持服務工作者，您可以在Mozilla的API文檔頁面中找到有關此服務的更多詳細信息。

有關如何使用Service Worker緩存應用程序數據和資產的更多詳細信息，Google提供了一些有用的指南。

- ＃4無法安裝：

此收據也不特定于GWT。要使Web應用程序可安裝，您需要添加一個名為app manifest的json文件，并將其鏈接到.html入口點：

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

- ＃5參與：

再次沒有正式的GWT推送通知庫。這可能是呼吁GWT社區填補這一空白。在此之前，GWT用戶可以使用JSNI或Jsinterop與瀏覽器進行交互并訂閱推送通知。

演示應用

為了說明上述特征，我們使用gwt-polymer-elements和gwty-leaflet構建了一個地圖應用程序。該應用程序顯示用戶的收藏夾地圖。

來源： https : //github.com/gwidgets/gwt-pwa-demo
直播： https : //gwt-pwa-demo.herokuapp.com/pwademo.html/

使用Polymer，我們的應用程序默認情況下是響應式的，因此此步驟已完成。

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

我們使用聚合物元素與dom元素進行交互。例如：

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

我們還使應用腳本異步加載：

并且我們引入了一些代碼拆分方法，因為每個部分只有一個地圖，因此我們只需要在加載頁面時在顯示的部分上加載地圖。

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;} });

我們還添加了一個應用程序清單，以允許手動安裝該應用程序

{"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類來注冊服務工作者。

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");}

我們創建了一個名為sw.js的服務工作者腳本，并將其添加到應用程序的資源中。

該腳本將安裝并激活服務工作者。它還允許服務工作者預訂獲取事件，該事件在每次請求資源時觸發。然后，服務工作者根據其當前狀態決定是使用本地緩存還是從網絡中獲取資源。

加載應用程序后，我們可以在Google chrome的緩存存儲中找到我們的資產：

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

如果我們在Google Chrome瀏覽器上禁用了網絡并嘗試運行該應用程序，則會得到類似的信息（由于未緩存地圖，因此未渲染）：

該應用程序即使沒有網絡也可以提供服務。如果我們看一下Chrome開發工具中的網絡請求，就會注意到服務工作者正在提供應用程序資源：

由于這是一個演示應用程序，因此我們沒有添加任何推送通知，因為它需要設置推送服務器。

我們已從Android手機將應用程序安裝到主屏幕，并且得到了類似以下內容：

結論

在Web開發領域，PWA仍然是新事物。一些人預測他們將在未來幾年接管本地應用程序。我們知道，GWT開發人員一直在使用Phonegap將其Web應用程序轉換為移動本機應用程序，也許有了PWA，他們將不再需要這樣做。我們已經在本教程中看到了如何使用諸如Polymer之類的庫將GWT用于構建PWA。到目前為止，還沒有GWT庫可以與瀏覽器服務工作者進行交互，因此GWT社區需要填補這一空白。

有趣的鏈接

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

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

來自Web開發在線代理商https://skilled.co/的PWA用例摘要圖表：

由Skilled.co提出

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