{"id":132281,"date":"2018-08-22T00:07:44","date_gmt":"2018-08-22T00:07:44","guid":{"rendered":"http:\/\/inchoo.net\/?p=31681"},"modified":"2018-08-22T00:07:44","modified_gmt":"2018-08-22T00:07:44","slug":"progressive-web-apps-the-future-default","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/magento-2\/progressive-web-apps-the-future-default\/","title":{"rendered":"Progressive web apps \u2013 the future default"},"content":{"rendered":"<p>Progressive Web Apps, or PWAs, have been around for some time, but only lately it has become a buzzword. Everyone is talking about it, but is it just a fad, or a future of the web?<span id=\"more-31681\"><\/span><\/p>\n<h2>What is a PWA?<\/h2>\n<p>Progressive web apps are a hybrid between web pages and native apps. The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience. But underneath, PWA is still just a website. It can \u201cbecome\u201d an app if user wants to use it that way. So if user returns to the website, using supporting OS and browser, he will be prompted to add the website to the home screen. If he decides to do it, he can use the website as an app later on. If not, the website is still reachable through the browser, and still with most of the benefits that make PWA\u2019s great.<\/p>\n<p><a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\">Google\u2019s definition of PWA:<\/a><\/p>\n<ul>\n<li>Reliable &#8211; Load instantly and never show the <i>downasaur<\/i>, even in uncertain network conditions. aka: <b>work offline<\/b>.<\/li>\n<li>Fast &#8211; Respond quickly to user interactions with silky smooth animations and no janky scrolling.<\/li>\n<li>Engaging &#8211; Feel like a natural app on the device, with an immersive user experience.<\/li>\n<\/ul>\n<h3>Working offline, what kind of sorcery is that?<\/h3>\n<p><b>Service workers.<\/b> They are the heart of every PWA. Service worker is a script that runs in the background, separate from the web page. It is responsible for caching, content updates, push notifications and makes it possible for the PWAs to work offline. Basically, service workers can intercept and handle network requests, serving assets from the cache if needed.<\/p>\n<p>In most cases, PWAs will be single page app, and on the first load, the Application shell will be stored in the cache.<\/p>\n<h3>What is an Application shell?<\/h3>\n<p><b>Application shell<\/b> is minimal HTML, CSS and JS needed to render the UI of your website. It should contain only UI elements, without any dynamic data. As it is stored in the cache on the first load, every subsequent time that user opens the app (or the website), UI will load immediately, making PWA fetch only dynamic data.<\/p>\n<h3>OK\u2026 How do I install the app?<\/h3>\n<p>You don\u2019t. It is not actually an installation. There is an \u201cAdd To home screen\u201c feature, so users can add a shortcut to your website on their smartphone home screen. It looks and behaves like a native app. Once opened, it will load with the splash screen loader and without browser UI. To enable \u201cAdd to home screen\u201d feature, your PWA will need <b>app manifest<\/b>.<\/p>\n<h3>App manifest?<\/h3>\n<p>Yes. Web app manifest is just a simple JSON file that gives you the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the mobile home screen), direct what the user can launch and more importantly how they can launch it. This includes app name, various icons and sizes, splash screen background, etc.<\/p>\n<h2>PWAs don\u2019t work on Apple devices, so it\u2019s all useless?<\/h2>\n<p>Service workers and web app manifest don\u2019t work in Safari at the moment, but are currently in development. That means that we\u2019ll soon have PWAs in all their glory on all devices.<\/p>\n<p>But until then, PWAs work just fine on your iPhones. Like any other regular website. <a href=\"https:\/\/cloudfour.com\/thinks\/why-does-the-washington-posts-progressive-web-app-increase-engagement-on-ios\/\">Even better.<\/a><\/p>\n<h2>That\u2019s all fine, but what about Magento?<\/h2>\n<p>Well, Magento is, in fact, working on their <a href=\"https:\/\/community.magento.com\/t5\/Magento-DevBlog\/Introducing-Magento-PWA-Studio\/ba-p\/74636\">PWA studio<\/a>. It should be released as a part of Magento 2.3. sometime later this year. It will be based on React and Redux.<\/p>\n<p>In the meantime, there are couple of community efforts, such as <a href=\"https:\/\/deity.io\/\">Deity<\/a> or <a href=\"https:\/\/vuestorefront.io\/\">Vue Storefront<\/a>.<\/p>\n<h2>What about Inchoo and PWA?<\/h2>\n<p>We recognized PWAs as a future default, just as we did back in the days when Responsive Web Design emerged, and we are prepared for this (r)evolution. PWAs have been in our focus for some time now and that\u2019s why <b>we partnered with <\/b><a href=\"https:\/\/demo.deity.io\/\"><b>Deity<\/b><\/a> <strong>in order to bring next generation web apps to the merchants who want to stand out from their competition<\/strong>. If you are thinking about running your online business as PWA, <a href=\"http:\/\/inchoo.net\/hire-us\/\">we\u2019re at your service.<\/a><\/p>\n<p>As a part of our efforts in leveling up our skills, Inchoo delegation will attend <a href=\"https:\/\/reacticon.org\/\">Reacticon<\/a>, the first Magento conference completely dedicated to PWAs, so if you are attending too &#8211; get in touch!<\/p>\n<h2>Who&#8217;s Deity?<\/h2>\n<p>First time we heard about Deity was at <a href=\"http:\/\/inchoo.net\/life-at-inchoo\/meet-magento-poland-2017-review-by-inchoo\/\">Meet Magento Poland 2017<\/a> in Krakow where <a href=\"https:\/\/www.youtube.com\/watch?v=cD-E4jjwwk8\">The Rake case study<\/a> was presented. That presentation attracted a lot of interest and we started following the progress. When we got an invitation to become a partner, we <a href=\"https:\/\/twitter.com\/deity_pwa\/status\/963013230502273024\">didn&#8217;t hesitate too much<\/a>.<\/p>\n<p>We have a feeling that Deity project went farther than announced Magento PWA Studio. Who knows, perhaps Deity could actually become an official PWA Studio. We expect a lot of excitement in the next couple of months!<\/p>\n<p>&nbsp;<\/p>\n<p>The post <a rel=\"nofollow\" href=\"https:\/\/inchoo.net\/magento-2\/progressive-web-apps-the-future-default\/\">Progressive web apps &#8211; the future default<\/a> appeared first on <a rel=\"nofollow\" href=\"https:\/\/inchoo.net\">Inchoo<\/a>.<\/p>\n<h1><a target=\"_blank\" href=\"http:\/\/www.circulatetechnology.com\/\">Click here for more informations about top website development services <\/a><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>Progressive Web Apps, or PWAs, have been around for some time, but only lately it has become a buzzword. Everyone is talking about it, but is it just a fad, or a future of the web? What is a PWA? Progressive web apps are a hybrid between web pages and native apps. The application type &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[1161,1119,225,20,1162,1127,1110,1163,1164],"tags":[],"class_list":["post-132281","post","type-post","status-publish","format-standard","","category-deity","category-dev-talk","category-frontend","category-magento-2","category-magento-2-frontend-optimization","category-progressive-web-aplication","category-pwa","category-user-experience","category-user-interface"],"jetpack_publicize_connections":[],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p99pkJ-ypz","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/132281"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=132281"}],"version-history":[{"count":0,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/132281\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=132281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/categories?post=132281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/tags?post=132281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}