我要建立自己的网站,创建站点的基本步骤,做课件可赚钱的网站,公众号怎么推广产品渐进或不渐进… 如果您一段时间以来一直在设计或开发Web应用程序#xff0c;那么您可能会遇到无数次“渐进式Web应用程序”一词#xff0c;并且在未来几年内可能会这样做。 您可能想知道PWA的确切定义是什么#xff0c;如何识别PWA#xff0c;以及如何构建PWA。 根据字典那么您可能会遇到无数次“渐进式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应用程序的不同特征 –反应灵敏适应设备 –快速加载优化以快速绘制或渲染 –脱机工作使用服务人员来缓存内容以允许脱机使用或慢速网络连接的应用程序 –可安装可以在主屏幕中安装应用程序例如本机应用程序 –参与度通过推送通知使用户了解情况 现在我们知道了渐进式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 idappShellimg srclogo.png alt /
div idmenu/div
div idmainContent/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 srcpolymerstarter/polymerstarter.nocache.js async typetext/javascript 这将指示浏览器不要阻止解析并在可用时尽快加载我们的应用脚本。 另一种选择是将应用程序脚本放入正文中。 3离线工作 这主要可以使用服务工作者来完成。 没有官方的GWT库可以与服务人员进行交互。 甚至gwt-polymer-elements都没有包装Platinum ElementsPlatinum Elements是与浏览器的服务人员进行交互的Polymer元素。 GWT用户将不得不手动编写一些Javascript来实现应用程序资产的缓存机制。 JSNI或Jsinterop可用于与浏览器进行交互并调用服务工作者服务。 定义缓存事件的服务工作者脚本需要在单独的脚本上因此到目前为止将服务工作者代码和GWT应用程序模块代码混合在同一.js文件中有点复杂。 GWT唯一可以完成的任务是注册服务工作者。 我们将在下一节的后面进行演示。 另请注意并非所有浏览器都支持服务工作者您可以在Mozilla的API文档页面中找到有关此服务的更多详细信息。 有关如何使用Service Worker缓存应用程序数据和资产的更多详细信息Google提供了一些有用的指南。 4无法安装 此收据也不特定于GWT。 要使Web应用程序可安装您需要添加一个名为app manifest的json文件并将其链接到.html入口点 link relmanifest hrefmanifest.json 有关如何编写清单文件的指南您可以参考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); 我们还使应用脚本异步加载 script typetext/javascript languagejavascript srcpwademo/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;}
}); 我们还添加了一个应用程序清单以允许手动安装该应用程序 {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 FunctionJavaScriptObject, 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的服务工作者脚本并将其添加到应用程序的资源中。 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); }) ); }); 该脚本将安装并激活服务工作者。 它还允许服务工作者预订在每次请求资源时触发的获取事件。 然后服务工作者根据其当前状态决定是使用本地缓存还是从网络中获取资源。 加载应用程序后我们可以在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
