gwt格式_GWT的渐进式Web应用程序配方
gwt格式
漸進或不漸進…
如果您已經(jīng)設(shè)計或開發(fā)Web應(yīng)用程序已有一段時間，那么您可能會遇到無數(shù)次“漸進式Web應(yīng)用程序”一詞，并且可能會在未來幾年內(nèi)使用。 您可能想知道PWA的確切定義是什么，如何識別PWA，以及如何構(gòu)建PWA。 根據(jù)字典，漸進一詞是指可以改善或變得更好的東西，但是這與Web應(yīng)用程序有什么關(guān)系呢？ 我們真的不知道。 PWA似乎是Google引起人們興趣的流行語，與PWA的真正含義并沒有真正的關(guān)系。 Alex Russel將PWA定義為“攝取正確維生素的網(wǎng)站”。 為簡單起見，讓我們首先說說PWA是經(jīng)過優(yōu)化以適合其環(huán)境的Web應(yīng)用程序：在移動設(shè)備或平板電腦上，它們可以扮演移動本機應(yīng)用程序的角色，而在PC上，它們可以扮演普通Web應(yīng)用程序的角色。
PWA的基本原理：
PWA是具有常規(guī)Web應(yīng)用程序以及用于不同移動平臺的捆綁應(yīng)用程序的替代方法。 維護和升級所有這些程序可能會花費很大，尤其是在應(yīng)用程序頻繁更改的情況下。 使用PWA，只有一個適用于所有平臺的應(yīng)用程序，可以通過瀏覽器中的鏈接進行訪問。 PWA旨在使用“移動優(yōu)先”方法進行設(shè)計。 可以安裝它們，但它們也可以作為常規(guī)網(wǎng)站正常工作。 Google為PWA創(chuàng)建了一個專用網(wǎng)站 ，并介紹了通過將應(yīng)用程序/網(wǎng)站轉(zhuǎn)換為PWA而受益的公司的不同案例。
PWA的特征：
Google的開發(fā)倡導(dǎo)者Rob Dodson在他的演講中強調(diào)了Web應(yīng)用程序的不同特征：
–React靈敏：適應(yīng)設(shè)備
–快速加載：優(yōu)化以快速繪制或渲染 –脫機工作：使用服務(wù)人員來緩存內(nèi)容，以允許脫機使用或慢速網(wǎng)絡(luò)連接的應(yīng)用程序 –可安裝：可以在主屏幕中安裝應(yīng)用程序（例如本機應(yīng)用程序） –參與度：通過推送通知使用戶了解情況
既然我們知道了漸進式Web應(yīng)用程序的外觀，我們就可以開始研究可以幫助我們使GWT應(yīng)用程序漸進式的各種工具。
用于PWA的GWT食譜：
- ＃1響應(yīng)式：
為了使您的GWT應(yīng)用程序具有響應(yīng)能力，GWT用戶有幾個選項。 如果您具有設(shè)計技能，則可以使用自定義代碼和CSS使應(yīng)用程序具有響應(yīng)能力。 否則，您可以依賴其他框架。 GWT的Bootstrap（ https://github.com/gwtbootstrap3/gwtbootstrap3 ）是我想到的第一件事。 它提供了著名的Twitter框架的所有組件。 另一種選擇是GWTMaterialDesign（ https://github.com/GwtMaterialDesign/gwt-material ）。 它提供了具有響應(yīng)性的材料設(shè)計，可以隨時為您的應(yīng)用程序使用元素。 最后， gwt-polymer-element是GWT的Polymer包裝材料，它還提供了隨時可用的響應(yīng)式Web組件，并且可以在設(shè)計構(gòu)建響應(yīng)式應(yīng)用程序時派上用場。 我們在之前的一篇文章中提供了Polymer的新手指南。
- ＃2快速加載：
為了減少第一次噴涂的時間，可以做很多事情。 首先，可以使用代碼拆分來減少gwt模塊文件的大小。 它基本上將模塊分成多個片段，從而使GWT模塊在啟動時僅下載所需的片段。 其次，可以將PWA 準(zhǔn)則指定的應(yīng)用程序外殼方法應(yīng)用于GWT應(yīng)用程序。 這可以通過從應(yīng)用程序Java代碼中提取靜態(tài)元素和數(shù)據(jù)并將其直接放入.html入口點來完成。 例如：
GWT用戶的常見做法是將.html的正文留空，并以編程方式從應(yīng)用程序添加其視圖：
<body> ? ? </body>//....AppMainView view = AppMainView();RootPanel.get().add(view);盡管這種做法沒有錯，但是由于.js模塊文件將包含更多指令，因此它可能會延長應(yīng)用程序的加載時間，因此執(zhí)行起來將花費更多時間。 作為解決方法，我們可以嘗試識別視圖中的所有靜態(tài)元素并將其放入.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);為了說明的目的，這當(dāng)然是簡化的示例。 到目前為止，我們已經(jīng)看到了代碼拆分和應(yīng)用程序外殼如何減少呈現(xiàn)應(yīng)用程序的時間。 還有HTML5的async腳本屬性，該屬性并非真正專用于GWT。 例如：
<!-- Inside HEAD --!> <script src="polymerstarter/polymerstarter.nocache.js" async="" type="text/javascript">這將指示瀏覽器不要阻止解析，并在可用時盡快加載我們的應(yīng)用腳本。
另一種選擇是將應(yīng)用程序腳本放入正文中。
- ＃3離線工作：
這主要可以使用服務(wù)人員來完成。 沒有官方的GWT庫與服務(wù)人員進行交互。 甚至gwt-polymer-elements都不包裝Platinum Elements，Platinum Elements是用于與瀏覽器的服務(wù)人員交互的Polymer元素。 GWT用戶將不得不手動編寫一些Javascript來實現(xiàn)應(yīng)用程序資產(chǎn)的緩存機制。 JSNI或Jsinterop可用于與瀏覽器進行交互并調(diào)用服務(wù)工作者服務(wù)。 定義緩存事件的服務(wù)工作者腳本需要在單獨的腳本上，因此，目前，將服務(wù)工作者代碼和GWT應(yīng)用程序模塊代碼混合在同一.js文件中有點復(fù)雜。 GWT唯一可以完成的任務(wù)是注冊服務(wù)工作者。 我們將在下一節(jié)的后面進行演示。 另請注意，并非所有瀏覽器都支持服務(wù)工作者，您可以在Mozilla的API文檔頁面中找到有關(guān)此服務(wù)的更多詳細信息。
有關(guān)如何使用Service Worker緩存應(yīng)用程序數(shù)據(jù)和資產(chǎn)的更多詳細信息，Google提供了一些有用的指南。
- ＃4無法安裝：
此收據(jù)也不特定于GWT。 要使Web應(yīng)用程序可安裝，您需要添加一個名為app manifest的json文件，并將其鏈接到.html入口點：
<link rel="manifest" href="manifest.json">有關(guān)如何編寫清單文件的指南，請參考W3C的指南： https : //www.w3.org/TR/appmanifest/ 。 您也可以使用此在線工具： http : //brucelawson.github.io/manifest/ ，該工具可以為您生成清單，但是您的應(yīng)用程序必須已經(jīng)在線。 您可以使用標(biāo)語要求用戶安裝該應(yīng)用程序，也可以讓他從瀏覽器的選項中手動進行操作。
- ＃5參與：
再次沒有正式的GWT推送通知庫。 這可能是呼吁GWT社區(qū)填補這一空白。 在此之前，GWT用戶可以使用JSNI或Jsinterop與瀏覽器進行交互并訂閱推送通知。
演示應(yīng)用
為了說明上述特征，我們使用gwt-polymer-elements和gwty-leaflet構(gòu)建了一個地圖應(yīng)用程序。 該應(yīng)用程序顯示用戶的收藏夾地圖。
來源： https : //github.com/gwidgets/gwt-pwa-demo
直播： https : //gwt-pwa-demo.herokuapp.com/pwademo.html/
使用Polymer，我們的應(yīng)用程序默認情況下是響應(yīng)式的，因此此步驟已完成。
為了使應(yīng)用程序快速加載，我們首先移除所有靜態(tài)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");我們還使應(yīng)用腳本異步加載：
<script type="text/javascript" language="javascript" src="pwademo/pwademo.nocache.js" async></script>并且我們引入了一些代碼拆分方法，因為每個部分只有一個地圖，因此我們只需要在加載頁面時在顯示的部分上加載地圖。
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;} });我們還添加了一個應(yī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類來注冊服務(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)建了一個名為sw.js的服務(wù)工作者腳本，并將其添加到應(yīng)用程序的資源中。
var cacheName = 'GWT-PWA'; var filesToCache = [ '/gwt-pwa/pwademo.html', '/gwt-pwa/pwademo.css', '/gwt-pwa/styles/app-theme.html', '/gwt-pwa/styles/shared-styles.html', '/gwt-pwa/leaflet/leaflet.js', '/gwt-pwa/leaflet/leaflet.css','/gwt-pwa/image/mapicon.png','/gwt-pwa/pwademo/pwademo.nocache.js'];self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); });self.addEventListener('activate', function(e) { console.log('[ServiceWorker] Activate'); e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { console.log('[ServiceWorker] Removing old cache', key); if (key !== cacheName) { return caches.delete(key); } })); }) ); });self.addEventListener('fetch', function(e) { console.log('[ServiceWorker] Fetch', e.request.url); e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); });該腳本將安裝并激活服務(wù)工作者。 它還允許服務(wù)工作者預(yù)訂獲取事件，該事件在每次請求資源時觸發(fā)。 然后，服務(wù)工作者根據(jù)其當(dāng)前狀態(tài)決定是使用本地緩存還是從網(wǎng)絡(luò)中獲取資源。
加載應(yīng)用程序后，我們可以在Google chrome的緩存存儲中找到我們的資產(chǎn)：
http://www.g-widgets.com/wp-content/uploads/2016/08/cacheChrome.png
如果我們在Google Chrome瀏覽器上禁用了網(wǎng)絡(luò)并嘗試運行該應(yīng)用程序，則會得到類似的信息（由于未緩存地圖，因此未渲染）：
該應(yīng)用程序即使沒有網(wǎng)絡(luò)也可以提供服務(wù)。 如果我們看一下Chrome開發(fā)工具中的網(wǎng)絡(luò)請求，就會注意到服務(wù)工作者正在提供應(yīng)用程序資源：
由于這是一個演示應(yīng)用程序，因此我們沒有添加任何推送通知，因為它需要設(shè)置推送服務(wù)器。
我們已從Android手機將應(yīng)用程序安裝到主屏幕，并且得到了類似以下內(nèi)容：
結(jié)論
在Web開發(fā)領(lǐng)域，PWA仍然是新事物。 一些人預(yù)測他們將在未來幾年接管本地應(yīng)用程序。 我們知道，GWT開發(fā)人員一直在使用Phonegap將其Web應(yīng)用程序轉(zhuǎn)換為移動本機應(yīng)用程序，也許有了PWA，他們將不再需要這樣做。 我們已經(jīng)在本教程中看到了如何使用諸如Polymer之類的庫將GWT用于構(gòu)建PWA。 到目前為止，還沒有GWT庫可以與瀏覽器服務(wù)工作者進行交互，因此GWT社區(qū)需要填補這一空白。
有趣的鏈接
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
來自Web開發(fā)在線代理商https://skilled.co/的PWA用例摘要圖表：
由Skilled.co提出
翻譯自: https://www.javacodegeeks.com/2017/07/progressive-web-apps-recipes-gwt.html
gwt格式
總結(jié)
以上是生活随笔為你收集整理的gwt格式_GWT的渐进式Web应用程序配方的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实现wps文档页面横纵向混排(在WPS文
- 下一篇： 琥珀ai_琥珀项目：Java的未来暴露