{"id":6381,"date":"2020-06-18T17:59:27","date_gmt":"2020-06-18T17:59:27","guid":{"rendered":"http:\/\/www.glajumedia.com\/en\/?p=6381"},"modified":"2022-03-22T22:12:37","modified_gmt":"2022-03-22T22:12:37","slug":"progressive-web-app","status":"publish","type":"post","link":"https:\/\/www.gmedia.la\/en\/progressive-web-app\/","title":{"rendered":"Progressive web app"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Did you ever notice an \u201cAdd to Home Screen\u201d banner while browsing a website? In the past few years, it has been a lot of buzz around Progressive Web App with claims such as it be the future of web development. PWA is an easy web application that uses trendy web techniques to bring a native app-like experience to users.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Should this really mean that a web app to be progressive? Let\u2019s take a look at what progressive web app\u2019s history, why it\u2019s beneficial for your business, some top successful stories, and it.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6384\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/06\/Progressive-Web-Apps-y-el-declive-del-desarrollo-de-aplicaciones-mo\u0301viles-nativas.png\" alt=\"\" width=\"455\" height=\"331\" srcset=\"https:\/\/www.gmedia.la\/en\/wp-content\/uploads\/2020\/06\/Progressive-Web-Apps-y-el-declive-del-desarrollo-de-aplicaciones-mo\u0301viles-nativas.png 1021w, https:\/\/www.gmedia.la\/en\/wp-content\/uploads\/2020\/06\/Progressive-Web-Apps-y-el-declive-del-desarrollo-de-aplicaciones-mo\u0301viles-nativas-300x218.png 300w, https:\/\/www.gmedia.la\/en\/wp-content\/uploads\/2020\/06\/Progressive-Web-Apps-y-el-declive-del-desarrollo-de-aplicaciones-mo\u0301viles-nativas-768x559.png 768w, https:\/\/www.gmedia.la\/en\/wp-content\/uploads\/2020\/06\/Progressive-Web-Apps-y-el-declive-del-desarrollo-de-aplicaciones-mo\u0301viles-nativas-980x713.png 980w, https:\/\/www.gmedia.la\/en\/wp-content\/uploads\/2020\/06\/Progressive-Web-Apps-y-el-declive-del-desarrollo-de-aplicaciones-mo\u0301viles-nativas-480x349.png 480w\" sizes=\"(max-width: 455px) 100vw, 455px\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">HISTORY<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Google officially came out with the term Progressive Web App like a new standard in web development over Google\u2019s IO conference, but this concept was introduced first by Steve Jobs. In 2007, he predicted that developers can assemble incredible web experiences by using Web 2.0 and Ajax.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The idea of progressive web app went into the back of the closet for a few years until 2 Google engineers, Alex Russel and Frances Berriman, view a new class of websites that were delivering a much better UX than common web sites. Indeed, Alex Russel calls progressive web app \u201c responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engageable, installable, linkable web-experiences.\u201d<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">BENEFITS&nbsp;&nbsp;&nbsp;&nbsp;<\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The loading time for a PWA is a lot lesser when many elements of a web page are cached the first time you open it. This means that interactive elements will react as soon as you click and other gestures.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">PWAs offers \u201cService Worker\u201d are lines of JavaScript code that have instant access to cached resources which allows your browsing experience to continue even when the network is slow.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">PWAs delivers a similar experience than a native app with the same functionality but with lesser resources. By combining this with speed and a good UX with slower connections.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">PWAs can be found via a search engine or a social share as any other website. In fact, it allows PWAs easier to integrate with connect and social strategies.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">PWA\u2019s updates are much easier with rolls outs without disturbing the user.&nbsp;<\/span><span style=\"font-weight: 400;\"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6382\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/06\/progressive-web-app-pwa.jpg\" alt=\"\" width=\"504\" height=\"264\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/06\/progressive-web-app-pwa.jpg 504w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/06\/progressive-web-app-pwa-480x251.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 504px, 100vw\" \/><\/p>\n<h2>TOP PWA STORIES<\/h2>\n<p><span style=\"font-weight: 400;\">&nbsp;There are many companies getting into PWA to gain more user engagement such as:<\/span><\/p>\n<p><a href=\"https:\/\/twitter.com\/search-home?lang=en\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Twitter<\/span><\/a><span style=\"font-weight: 400;\">: In 2017, twitter switched to a progressive web app because help them connect with mobile users while consuming fewer data.&nbsp;<\/span><\/p>\n<p><a href=\"https:\/\/tinder.com\/?lang=en\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Tinder<\/span><\/a><span style=\"font-weight: 400;\">: It is the most popular dating app, which also switched to PWA because they found a higher user interaction over a native app.&nbsp;<\/span><\/p>\n<p><a href=\"https:\/\/www.lillypulitzer.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Lilt Pulitzer<\/span><\/a><span style=\"font-weight: 400;\">: This brand has invested in an eCommerce PWA and in a year, saw an 80% boost in its traffic and a 33% increase in conversion.&nbsp;<\/span><\/p>\n<p><a href=\"https:\/\/www.thinkwithgoogle.com\/intl\/en-gb\/consumer-insights\/trivago-embrace-progressive-web-apps-as-the-future-of-mobile\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Trivago<\/span><\/a><span style=\"font-weight: 400;\">: A hotel search engine, it has a powerful progressive web app available in 33 languages, and across 55 countries. In fact, user engagement has grown by more than 150%.&nbsp;<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">HOW PWAs WORK?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Progressive web apps consist of 4 main pillars, which provide the native app-like experience.&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Service Workers<\/strong> run content in the background which makes the site loads much faster. They are JavaScript script that admits events such as fetch and install.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>App Manifesto<\/strong> is a JSON that provides meta-information about the web app. It contains information such as the icon of the app, background color, app\u2019s name, and etc.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>HTTPS<\/strong> is one of the prerequisites for service workers because the web app must be over a secure network. Also, it is crucial to demonstrate with SSL certificates such as Cloudfare and LetsEncrypt. They offer you security and establish you as a truest site for your users.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Icon<\/strong> is the display end of PWA that users are able to see when they install it in their application browser.&nbsp;<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Get into the next level of mobile development! <a href=\"http:\/\/www.glajumedia.com\/en\/\" target=\"_blank\" rel=\"noopener\">Glajumedia<\/a> has the experience and expertise to get your business to the next level.&nbsp;<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you ever notice an \u201cAdd to Home Screen\u201d banner while browsing a website? In the past few years, it has been a lot of buzz around Progressive Web App with&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[41],"tags":[187,189,188],"class_list":["post-6381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-category-mobile-application","tag-progressive-web-app","tag-pwa","tag-web-app"],"_links":{"self":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/comments?post=6381"}],"version-history":[{"count":0,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6381\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media\/6386"}],"wp:attachment":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media?parent=6381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/categories?post=6381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/tags?post=6381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}