{"id":1371,"date":"2018-08-27T02:38:29","date_gmt":"2018-08-27T01:38:29","guid":{"rendered":"https:\/\/pleiades-technology.com\/?p=1371"},"modified":"2024-02-04T11:27:10","modified_gmt":"2024-02-04T16:27:10","slug":"pwa","status":"publish","type":"post","link":"https:\/\/pleiades-technology.com\/index.php\/2018\/08\/27\/pwa\/","title":{"rendered":"PWA – Progressive Web App"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Since 2010, I\u2019ve been learning to write mobile apps. Professor Paul Hegarty from Stanford University had a great iOS programming course offered for free on iTunes U. I liked it so much that I introduced it to my colleagues at Xerox and started a series of group-learning iOS courses based on Prof Hegarty\u2019s video lectures. To follow that up, we also brought in a professor from SUNY Geneseo to teach us Android app programming.<\/p>

Since my colleagues and I were mostly C\/C++ programmers, we had to learn to program in Objective-C and Java for iOS and Android respectively. We also have to learn the nuances of iOS and Android libraries, programming and build processes. I always thought that there should be a better way to do this.<\/p>

Along the way, I\u2019ve looked at different mobile app development approaches such web apps that run on the mobile\u2019s browser, hybrid apps that are web apps packaged to run on the native web viewer and mobile apps that are compiled to native code via free\/open or proprietary sourced compilers. Each has it\u2019s own benefits and claims to be the answer to code once and to be able to run on different mobile platforms.<\/p>

I have been experimenting with Ionic and Cordova and find the hybrid approach quite promising. Hybrid app did have it\u2019s limitations. Frequently cited limitations are reduced performance, limited access to device\u2019s features, non-native UX, cannot work off-line and might not run and\/or be distributed in app stores for all platforms.<\/p>

However, with the recent wide cross-platform support of PWA from Google, Apple and Microsoft, Progressive Web App development approach casts new hope for hybrid apps. PWA now promises to be:
-faster, better integrated with the native web viewer,
-can be installed with a native app like icon on the home screen,
-can work off-line or on slow networks and auto updatable vis service workers,
-supports push notifications,
-discoverable via web searches
-and easily shared via URL without complex installation.<\/p>

\u00a0<\/p>

And, with cross-platform UX framework support with Iconic, one can get close to native UX behavior with a common set of code.
As an example, I\u2019ve developed a simple PWA called LoveCalc to demonstrate what one can do with a PWA. Two sources that I\u2019ve consulted and borrowed code to build the demo are from Mirko Nasato\u2019s YouTube video \u201cIonic 2 by Example\u201d
https:\/\/www.youtube.com\/watch?v=qdeD9rYlBU4&t=72s<\/a> and Josh\u2019s cryptoCurrency PWA https:\/\/www.joshmorony.com\/building-a-cryptocurrency-price-tracker-pwa-in-ionic\/<\/a>.<\/p>

\u00a0<\/p>

Use your mobile device\u2019s browser and go to https:\/\/lovecalculator-59e29.firebaseapp.com\/<\/a> to access the Love Calculator app. Use Safari from an iOS device and Chrome from an Android. I do not have a Windows phone so was not able to test the LoveCalc app on the Windows platform. Check out how the app works on your particular phone. Note that since Apple has just started to support the PWA functionalities, Safari version 11.3 or later is required.<\/p>

\u00a0<\/p>

I have tried to add most of the PWA functionalities to the LoveCalc app. In particular, it supports the features of saving the app the home screen, running the app even when the mobile device is of-line, seeing a splash screen when the app launches and providing the native-like UX experience with the screen layout\/animation.<\/p>

\u00a0<\/p>

Please note that I did not implemented the Web App Banner to automatically adding the app to the home screen. To save the app to the mobile device\u2019s home screen, do the following:<\/p>

\u00a0<\/p>

On iOS devices
-Open Safari and go to https:\/\/lovecalculator-59e29.firebaseapp.com\/<\/a>
-Touch \u201cShare\u201d icon – one with a square box with arrow pointing up
-Touch \u201cAdd to Home Screen\u201d – might need to scroll to the right
-Touch \u201cAdd\u201d on upper right hand corner (on iPhones)<\/p>

\u00a0<\/p>

On Android devices
– Open Chrome and go to https:\/\/lovecalculator-59e29.firebaseapp.com\/<\/a>
– Click on the 3-dot menu and selected \u201cAdd to Homescreen\u201d<\/p>

\u00a0<\/p>

Please email me at francis.tse@pleiadestechnology.com to let me know what your experience had been and\/or if you ran into problems with the LoveCalc app.<\/p>

\u00a0<\/p>

Finally, the LoveCalc app code is in Github. Let me know if you are interested to get the code and play for it yourself. In future blogs, I might continue to explain, in more details, about various aspects of PWA. PWA is relatively new. All the mobile platforms finally seem to be jumping on board so there are still a lot to learn. I will be glad to share what I\u2019ve found out.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Since 2010, I\u2019ve been learning to write mobile apps. Professor Paul Hegarty from Stanford University had a great iOS programming course offered for free on iTunes U. I liked it so much that I introduced it to my colleagues at Xerox and started a series of group-learning iOS courses based on Prof Hegarty\u2019s video lectures. […]<\/p>\n","protected":false},"author":1,"featured_media":1418,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[9,8],"tags":[15,16],"class_list":["post-1371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-app","category-software","tag-mobile-apps","tag-pwa"],"_links":{"self":[{"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/posts\/1371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/comments?post=1371"}],"version-history":[{"count":15,"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/posts\/1371\/revisions"}],"predecessor-version":[{"id":1522,"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/posts\/1371\/revisions\/1522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/media\/1418"}],"wp:attachment":[{"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/media?parent=1371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/categories?post=1371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pleiades-technology.com\/index.php\/wp-json\/wp\/v2\/tags?post=1371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}