Deploying “Progressive WebApps” (PWAs) for mobile and desktop solutions
Deploying “Progressive WebApps” (PWAs) for mobile and desktop solutions
Good morning, good afternoon or good evening, depending on where you are joining us from. I’d like to welcome you to the 77th episode of the Servoy Tech series. Today we will be joined by a Servoy customer who’s going to talk about an interesting approach they’ve taken to deploying their applications as mobile applications using a progressive web apps convention. But before we jump into that, I’d like to remind you of how keeping notes number one, the session is recorded and recordings are available on our archives on our site. And also number two, there is a questions panel in your Zoom console there. So at any point during the webinar, if you have a question, please type it in. And at the end, we will allocate some time for a question and answer. So today I’m excited because typically I’m doing these webinars by myself and it’s a lot of work and a bit of a juggling act. And anytime I can have some help but also have someone to talk to, and these webinars, it makes it a lot more interactive and fun. So I am happy to welcome the guys from Portfolio Plus. They’re a FinTech software vendor based out of Toronto, Canada. And they’ve been working with Servoy for a number of years, building applications for banks and credit unions. But why don’t I introduce Ian and Paolo. Hi guys. Let you guys explain who you are and what you do. Yeah, my name’s Ian and I work at Portfolio Plus and we create banking solutions for credit unions and banks. And today we’re going to talk about one of our products, which is the online banking solution. So not only would you provide the core solution, but the banks run on internally, but also the online banking that their customers use. So, yeah, the reason we decided to do this webinar is that Ian had actually mailed me about some questions about kind of some custom integrations in Servoy’s NG clients and I started asking him, why are you asking me these questions? And he pointed me to some literature he had been reading about progressive web apps. And we decided to do a call together and then he showed me what he had made and I was really impressed and I got our mobile expert on the call as well and he was also impressed. And the two of them got together and started working on a solution. And we decided that this is useful for everyone. So today as is the tradition in the tech webinar series, we’re going to start with a couple of demos and then we’ll do some slides to capture the overview. So first, Ian and Paulo are going to show a bit of a case study on Portfolio Plus Banking product and sort of why they chose to distribute it as a couple of demos. And I’ll attribute it as PWA and how it works. And then I’ll do a short demo of a open source project that is available through Servoy’s repository is called the SCY Mobile Project which demonstrates a lot of capabilities for delivering mobile features in the Servoy platform and we’ve updated that to show kind of a reference approach for doing the PWA distribution. So I’m going to stop sharing my screen and if I can figure out how to do that, there we go. I’m going to stop sharing and turn it over to you, Ian to go ahead and show your application. So hopefully you’re seeing my screen now. And what’s open in front of you is the login page for our Servoy application. It’s ngCliant built in Servoy and this is how our customers customers would log into their online banking. So what we’ve added is the progressive web app functionality to this so that when clients load this page up, whether they be on a mobile device, a Mac or a PC, there’s an additional little button for them to install the progressive web app. So when they click on it and this we may enhance this further by actually having an on screen button because it’s very obvious in some of the browsers that you can install it. But when you click on it, it prompts you to install the app and when you install it, it goes and grabs a copy of all the JavaScript and CSS for that site. And then stores it locally and puts an icon on the desktop of well or the home screen of the device. And you can see that it loaded the page without any address bar and it looks very much like a native app, but it’s a progressive web app. So the nice thing about this is whenever they launch from the icon, it’s going to run a service worker that goes to the web server and make sure that it has the most recent version of the JavaScript and the CSS and it’s going to then load the page up using the most recent versions if it didn’t already have a copy of them. And users like on a mobile device can uninstall it by, you know, the normal uninstall methods for that device. So in Windows, you can go to your control panel and your programs and features and uninstall it. And other devices, it’s the same as any other app. And or you can there’s a ellipsis here that you can click and you can uninstall it. And then the icon disappears. So that’s the the functional demo. And I’m going to stop sharing my screen. And see if anybody has a hand up. I have I actually have a question Ian. You you had said that well there’s the little plus button up in the address bar to to do the install. And you had said that you consider doing a like an in app button or a custom button. Is that is that a possibility where you could they could land on your site or your page. And you could present them something actually in the page that prompts them to install it as a as a PWA. Yes, that’s that’s an option. We’re looking into that. Actually tested it on iOS to see if it’s supported yet. But it’s certainly a feature that lead the interested in to make it more obvious to clients that they could install to their home screen. Okay. All right. And so I can also do a short demo and talk a bit about the S. I’m SVY mobile project where where this you can find more info about how to do this. So in my browser here I’ve gone to sfy mobile.serveway.com. Anyone could go here. And the page loads in a browser. Also mobile friendly site. I will bring up my inspector tools. And show this kind of as it would be in a phone. Now if you’re running depending on your your platform. Like iOS you might be running this in Safari. There’s a little button at the bottom where you can add you know click it and add to home screen. But since I’m demoing this from a kind of an emulation it’s still the Chrome browser. So it’s the same step that that Ian took and then you can click that and install it to your desktop. And then it runs it standalone here. So you can see that it’s actually got its own window with its own icon. And it pulls all of that from from the configurations that we’ll get into in a minute. Something else I want to point out here is that if you go in the inspector here to the network tab and go to the online and set it to offline. And I’m going to go ahead and refresh the page. I get a custom offline screen. So so this application doesn’t have any offline functionality. But typically if you were offline you wouldn’t get a friendly notification. So what’s happened here is that we’ve configured an offline page and that gets cached when the application loads. And it’s that service worker that Ian had mentioned which when when the application loads first before it starts looking for resources in the on the web server. It runs the service worker and it checks to see if there’s internet connection. If there’s not internet connection instead displays this offline page. So that’s just one example of ways that you can kind of optimize the experience. There’s a lot you could probably do with service workers and you know it’s subjective how much content or how much functionality you should put offline here. But it’s a nice bridge from having something which only runs in a browser and can’t do anything offline and it’s kind of user unfriendly in that situation versus having something which is completely deployed as a native application. And this kind of is a quick way to bridge that functionality. So I’m going to put this back online and reload it. So I think what’s worth showing is kind of how this project gets set up. This S3Y mobile project is again kind of a reference project for examples of how you can do things in a mobile application. How you can take advantage of some native integrations. But we did add the PWA approach and I want to show kind of quickly how we did that. If you go to the S3Y mobile project on our GitHub space and you go into the S3Y mobile folder which is the main application, the main solution. In every S3Y application there’s a media folder where you can put some, really any file, some static content, etc. But there is a internet specification called the web app manifest. And there’s a convention here where if you put manifest.json file in your media folder of your application. And you fill in some of the fields that are part of that spec, then I think as a bare minimum if you kind of put in the main part of this, including that the display is standalone. And the start URL, then that already will prompt most browsers to handle that application and provide that little button that you saw in the EIMS demo. So it’s really that manifest.json file which exposes this as an installable PWA to the system. Now of course there’s the different icons too like the desktop icon and the window icon so you can configure some of those and there’s probably better documentation on that specification on the internet. But it’s really about just sticking this one file in the media folder. Also in the media folder, in the example I showed where you get that offline page, you do have to prompt it to load the service worker. So there is a file here to load the service worker which tells it to basically to register it. Then I’m going to jump out to another folder in this project, but basically when you bundle your web application or your war file, if you put out whatever content you want out on the root of the web app, then it’s available. And here’s the actual service worker that goes and looks for if the application is offline and if it’s not online then it loads this offline HTML page and this is the one that said, sorry, this one here that we saw. What that service worker does could be anything, so I want to emphasize that what we showed is a really simple example. But it’s sort of the idea that your Servoy NG client web application can start to do things offline, can cache things, can optimize profile. I think Ian, you guys took this approach to also optimize some loading, right, so that once you install it the first time you’re caching some resources and then when you double click that icon on your desktop it loads much faster, is that right? Yes, so we got a quite a large performance boost because we do have some very large resources and some images that loaded much faster because they were cached. So again, you could put different content out here on the static content, in your web app and use the service worker. And I don’t want to get into the service worker itself, it’s a bit too technical for this webinar, but there’s plenty of resources on the internet on how to write service workers to do things. Like a kind of a service workers can’t access the DOM or the web page or anything, but what they can do is they can check to see if you have internet connection and do things like load the offline HTML page here. And now, if people want to look at pwa builder.com has some wonderful resources on service workers and have several samples that read, you know, ready to copy and paste and use. Yeah, I’ll add that to the list of links in the slides for this when we share it. So maybe just a quick overview of what pwa is are, I mean, it stands for progressive web apps, but what they really are just regular web applications, they’re not different and as you guys who are already using Servoyknow, Servoyis engine client is just a pure web application HTML, CSS JavaScript, nothing else. But they do provide that native like sort of capability and experience, so it gives the user the impression that they’re using an application and it sort of gives you that installable feel. So there is the ability to install it in, you know, on an iPhone at the home screen on a desktop you add to the desktop. And then when you run it, you get that standalone window, you can launch it from a task bar or the desktop or the dock. And you can, it shows up in your, your search if you’re just switching between apps on, you know, on your phone. It’s all, you get that, that native feel and you don’t have that feeling like you’re just using a browser. It also can, you know, increase your distribution channel. And I think this was another reason that portfolio plus, what went for this approach. So maybe Ian, can you talk a bit about, you know, after you guys had built your plus banking application and then your, your distributing it to customers, can you talk a bit about their, you know, their different app store strategies and how you adapted to that. Yes. So some of our customers are, are medium size and some of them are quite small. And so, when we were deploying mobile apps for them and they were managing their, their app stores, they found it quite consuming to manage test flight and manage, you know, allow their internal users to, to test it and promote it through all the different levels of each app stores. So, we were getting a little bit of push back on that and we were ending up having to do a little bit of hand holding to help, to help the manage, and, and that was really just our small clients that, you know, they, they really only have two IT people to manage all this. And so we saw progressive web apps as a way that a small company could, could easily manage this and still give their clients a mobile app that is available from the browser and when we dug a little bit further, we also realized, okay, well, now we’ve got that app now we can take that same progressive web app and compile it and promote it through the store for the that, that want to use it. So, we wouldn’t have a fragmented approach to our mobile solution, admitted meaning, you know, we compile it for the store is one way as opposed and we, you know, we do the PWA as a, as a side off it would be the same same same app, whether they went through the store or through the web. I guess it’s also worth pointing out that because you guys deliver, excuse me, applications to find the answer institutions, these typically run on premise and on the on premise of the institution and they don’t, they want the all the labeling and branding to be their own. So I, I have to go through their, their store right not the portfolio plus store. Is that right. Yes, that’s correct. Yeah. Okay. And, and how, so how does that work where, you know, because I know that that putting an application in the stores requires, you know, certification and it can be a bit of a hassle is, does that change at all with with once you have a PWA. Is there, is it pretty much the same process. It’s pretty much the same process. Okay. Yeah. Unfortunately, you know, you’ve still got at the end of the day you’re uploading from X code to, you know, to the app store or you’re uploading to the place store and going to the same steps. So there really isn’t a difference. If you’re, if you’re going to put it in the store, you’ve still both put those same steps, but you’ve got the also the ability to put it in the Microsoft store. If you want it. Okay. Another, another use case is there are some, some drawbacks to fully native applications. So I know I should point out for people that might be new to serve voice mobile strategy that that there’s another way to offer your applications, which is, which is with with a more like a hybrid approach where there really is binaries. On, you know, on the device and there are barriers to that one for one. There’s the native installation. So your, your users do have to go to a store and, and, you know, download a binary. There’s more storage required. Um, you know, I find that the, the, the next point kind of compelling because for me I have often I install an app that I end up using really occasionally, but there’s no other way to do it. Or you, you go to some crappy mobile website instead. So I think for use cases where you’re, you’re installing something that’s only going to be used occasionally. Um, just having that, you know, that lightweight PWA is compelling. And it reduces that, you know, that friction of if you’re on someone’s site and then you have to go to the app store and and go download versus you just sort of almost bookmark it or add it to your home screen. Um, we, we did mention, um, the optimization of performance. And I think that there were two, two components to that. One is caching data for, for faster startup, which portfolio was able to get a big performance increase with that approach. And the other one I demonstrated, which is, um, how you, you can have that sort of offline first mobile application, even though you really have a web application. Um, at least it has some minimal functionality when it’s offline, and you can access the local cache. Well, it’s offline so you can get creative with that. It’s, as a bare minimum, you can have a, uh, sorry screen like I showed, but, but you might be able to include a little bit of functionality or, or content at least when your applications offline. And that uses the service worker. Um, technology. In, um, sort of the perspective of, you know, um, there was a spectrum of application delivery. The PWA’s kind of fit in the middle next to the hybrid approach. Um, with Servoy’s, um, technology suite, we offer kind of the, the right three here. Uh, so, um, out of the box, the Servoy NG client is a standard space web application. Um, and for several years, the NG mobile project has allowed, uh, our customers to deliver the applications in a hybrid fashion. So that’s really, um, providing the native access to the device through the, you know, through, like, Cordova plugins. Uh, but it’s still running in like a web engine on, on the device. So, so there’s nothing, um, nothing really, uh, native going on there. Uh, it’s just through the plugins that get that native connectivity. And that has a lot of advantages. Um, for one, every time you update your application, you don’t need to redistribute a binary. It’s always, always up to date, you know, because you’re just pushing to a web server. Um, and, uh, and so that’s been, that’s been on offer for a number of years. Um, and the PWA approach kind of sits in between those two, I think, in terms of the spectrum. If you really need, uh, totally native control, then you, they really have to do things yourself. Um, uh, you know, in, in some of the lower level languages. Uh, I should also, um, well, I’ll skip that one for now. Um, I think it’s worth pointing out some, some considerations, uh, that this is not a panacea. It’s not a replacement for the hybrid approach. Um, and, and so for one, the, the, the user experience is, is not fully consistent across browsers. So you have, of course, um, uh, the difference between the, like a desktop and a, and a phone, but you also have the difference across the browsers themselves. Um, and I do believe there’s, um, what you can do in terms of native integrations, um, varies across, uh, platforms as well. Um, and, and there’s probably not support there for more advanced device integrations, like biometrics, but maybe Ian, can you comment on this point? We didn’t talk about native integrations, because neither of our examples showed any, any integration with the device. Can you talk about some of the integrations you guys are looking at and what’s available and what’s not? Yes. So with, with the PWA, the, you’re, you’re really still running, um, a lab view inside of an app. Um, it’s, it’s the web view of whatever browser you used to install it with. So you’re really the functionality that, or the integrations that you have with devices are really exactly the same as, um, any browser. So if that helps clarify it, rather than going through a list of what you can do and can’t do. Um, I mean, for us, on our roadmap is we want to enable, um, integration with, uh, face ID and fingerprint logins on Android. So, um, they do have, uh, both of those things have APIs that support them. That, that we can’t force, um, biometrics from, from, from the web. Obviously it’s not like an, a native app where we can make direct calls to the, to the biometrics. So, you know, as it’s certainly on our roadmap and it’s something, a challenge that, um, that we’re going to have when, when we come to implement that. Okay. Yeah. So, so it’s, I guess if your, if you’re picking a strategy today, it’s something to consider as, is what native integrations do you need today and what, which ones do you foresee that you, you will need? Um, because there could be some, some hard limitations, um, you know, depending on, on what, what you need. Yeah. Agree with that. Okay. Um, just a quick overview of, of how it works because I, we didn’t, usually in these webinars we, we get under the hood a bit and, and we, we look at code. Um, it’s largely because there’s not a lot of code needed. Um, but the, the, the, at a bare minimum, you got to, you got to include that manifest, uh, Jason file. And if you put that in the media folder of your solution, it, um, it, it sort of exposes. your, you know, a description of your application to the browser and then, and then if it, if it sees the right tags, then it, it can expose that to be installed. And, um, you can also include some of the icons there. Um, like you saw the portfolio plus icon on, on the, on the end desktop, to be able to, um, you know, branded and, etc. Um, the other thing that, that’s, that’s needed is if you want to get into offline, uh, functionality and, and caching, you should implement the service workers. And there is, uh, I didn’t get too, too much into it, but there, there is on that SUI mobile site. There’s a bit of a wiki entry on this. And with some links to some documentation, then Ian mentioned, um, the PWA builder, right, just the site that has some, some good examples there. Yeah, PWA builder.com. And they have several different types of service workers, um, examples for allowing the website to run completely offline with full functionality if that’s, if you have static websites, but, um, then the more common service workers do some, some, you know, network first caching. Mm hmm. Uh, in, in, I put offline HTML here, that’s not a, um, a convention or standard or anything, but I just sort of put that because that’s the one that I, the page that I showed, uh, and that was just some content that was out on the, the root web app folder that the service worker, uh, loaded. There is, uh, there is one other thing I didn’t show, which is, um, head index contributions. If you put this file, head, head index contributions at HTML in your media folder, Servoy will inject it into the, the head part of the, the page, the index page. And so that’s a way to, um, to load some things and, for example, if you want to, um, I didn’t show this, but it’s a, if you wanted to, um, make sure this works on iOS, for example, I believe, if I go back to the media’s folder, you can see it right here. And there’s some, some tags that eat in jacks for you there. There’s also the ng utils plugin, which probably goes in. Let me check the globals here. I also didn’t show that. Um, yeah. Um, I guess it’s not in the on solution up in here. I think the ng utils plugin that you can also inject things down into the page as well. I think it’s right here. That service worker. Right there. So contributed to HAG. So you can push those down like as the applications loading. Um, so there’s some documentation on the on the SUI mobile site there. Um, but what did you do with it is really up to you? Okay. Um, I think that’s, that’s all we have. Um, encourage you guys to, to check out the, um, the SUI mobile, for examples of that. Um, and we’re ready for questions and answer. So let me bring this up. Okay. Um, so we had one question which was, um, are you able to use service workers, um, caching features? And I think we, we answered that. That’s one of the main use cases. Another question, um, is it possible for offline data containing media pictures, etc. The answer to that is yes. Um, so I don’t see any other questions. Uh, for this, um, I have one question for the portfolio guys. What, what are you planning to do next? Um, with your, with your application. What’s on the horizon? Um, specific in related to the topic. Yeah. To progressive web apps. Well, uh, we, we did talk briefly about, um, providing, um, more consistent user experience when installing it. So currently, um, the icons in each browser to, you know, the plus sign that you have to click on the, or unobvious and, uh, uh, inconsistent across the browsers. So we’re looking at providing, um, a button on the login screen that prompts the user to, to install up its consistent across all the devices. And, uh, then further down the road, of course, uh, there’ll be the, our, uh, biometrics that we want to implement, but that’s probably 18 months out before we start that. Okay. And then your, your, are you researching if that’s compatible with, with your approach or are you already, have proven that? Um, no, we, we need to research, um, some more to see if that’s come, you know, going to be flick compatible. Okay. Um, well, we’re already over the time limit and, uh, I want to thank Ian and Balo for, um, not only for participating in this webinar, but also for bringing this topic to our attention. I, I know that there’s, um, those of you out there that are already deploying, um, ng mobile hybrid applications and this is, um, perhaps interesting to you. So, uh, to our, uh, believing that delivering a mobile application is going to be something which is tricky. I think, um, Ian just showed that, uh, it doesn’t have to be that tricky at all. So I want to thank you guys a lot for this and, uh, we’ll post the recording. So everyone have a good day and we’ll see you in two weeks. Thank you, son. Thanks. Yeah.