Build PWAs in Webflow using Wized! (No Code Progressive Web Apps in Webflow!)

hi today I want to show you how you can turn your WIS web app into a real Progressive web app that will be able to run on your user's device just like this you'll be able to see it as the app name Taps IO in the preview you'll be able to see it like a real app icon which you can work with um using the bookmarking system and it will open it like a real native app and this is amazing because if you would normally just bookmark the site like here I like the example I have in here it would just normally open the web flow site in the browser and we're going to use some JavaScript magic that it will actually recognize the webflow site as a web app because what WS is doing whs is a powerful tool but WIS is adding web app functionality on top of a webflow site so iOS or your mobile device in general is thinking okay it's a website so they just want to bookmark it so they just expect me to click on here and go to this bookmarked website they don't know about waste yet so what we have to do is we have to add something called a manifest that tells iOS Android you know what this is actually a web app so if I click on that here I will open this as a web app and I'll be able to see it and interact with it like a native web app experience and the wonderful thing is if I'm going to turn off my internet and I would just reopen that app the functionality that is based on JavaScript will still work within the app of course you will not be able to do API calls cuz they need an internet connection but you could save them still in variables and do them once you are reconnected to the Internet so this really is an exciting thing and if I were not to exit that app I would clear the cash I would now just get a couldn't load request and the moment I'm reconnecting with internet it will automatically load my web app directly in this native web app frame and the nice way about doing it like this is I'm going to avoid paying the app store or the Google Play Store 30% of all the purchases I'm processing in my mobile app experience while still having some sort of offline functionality and being able to configure all the app and all the functionality natively in WIS so this is really really really big this is exciting and you can do this in just a few lines of codes in just a few minutes and I'm going to show you right now how to do that so let's just switch to the desktop hi so here we are now at the desktop and we're going to go straight into it so we're going to just of course have our app in here in whiz we need to configure that but we're just going to go to webflow right now and we're going to use a wonderful technique we're going to go into the head code of our project and we're going to add a link um with a manifest so reel Manifest this is what will give the external data that we want to open this as a web app in your mobile device to the mobile device that will be read and we're going to add another data attribute of Wis for manifest URL into it we're going to save that that is it that's everything we need to add the code above that here was just some custom CSS um for a different project I'm going to add this in so you can just ignore that that it's not important you only need to add this that's everything you need to do and now since the data attribute of waste we've added into the code is actually a waste attribute we will be able to see this manifest URL as a waste attribute inside the wi editor so you are not just limited to adding WIS attributes onto elements you can just add that on the whole page itself and influence the page while doing that and this is what we're going to do right in here so we're now going to create an action and first of all before we do that before we set this manifest URL we're going to create a variable a computed variable because we want this to run the moment the dependencies change on the page we're going to create this variable called manifest and we're going to do const manifest Json this is the data structure that your mobile device will need to be able to recognize this as an a real app as a progressive web app so we need to give it a short name this will be tabs IO we're going to give this a normal name it will just be tabs and we're going to give this a start URL in this case we're just going to start with the home URL but for example if you want and you could specify some logic in there you could for example do a query parameter in here if you have a specific mobile version and you could do ID equals mobile or something like this to only load the mobile version of your web app if you have different UH responsibilities but it doesn't need to stop here you could also add some more JavaScript logic into it to detect if the device is in dark or light mode and you could for example just do a query parameter called mode of a light or dark that will then be recognized within your existing WIS setup that will then change the canvas based on what the device it is being opened in has preset in their settings so we don't want to do that right now but I just want to let you know that this is possible but we just want to start right in here and then this is where it gets important we want to do the display AS stand alone this will allow us to open this web app like a real app and we're going to have this um in the editor we have the home icon we will able to swipe up and see the preview and we see the app name and the app icon and all of that this is what the display type of Standalone will give us the option to do that and right here we're just going to have the background color which is set to a default of white and we have the theme color which is set to a default of dark you can change this you can also use WIS variables or you can uh connect or talk to the device and see what information it gives you if you want to work with that and now we have the icons most iOS devices will actually use the icon which you're going to set in the side settings of your webflow project with within the web clip because adding this on the home screen is called a web clip but it is intended to add this like a bookmark that will open it in the browser we're just going to add the bookmark here and open it like an app so it's actually an app clip basically but since webflow is already providing you this infrastructure you will not need to probably add that within the code if you have the web clip in here so whatever you want the icon to be visible on iOS devices you will just be adding the web clip in here and this will be the icon you see on your device but for some devices for some older models for some specific Android devices that may not be sufficient enough if they're not on the latest version so we're also going to manually add the web clip icon in this um manifest code just using the icons adding like an array and we're going to select the type for a 512 by 512 pixels as an image PNG and we're just going to load our image URL in here which is just a normal URL of our app icon which is actually an old app icon so I got to replace this later on but it is not working um for iOS devices this is think of it as a security back back up if the web clip cannot be loaded if this device doesn't support Web Clips it will just fall back to this image so treat it like just a fallback image just in case and then we're going to have this function to convert the JavaScript object above into a Json string so we turn this in here this manifest Json this one and we're going to turn it into a Json string so we're going to let Json string equal json. stringify and then we're going to run this function on the Manifest Json this one and once we have this turned into a string we now want to create a blob out of that a blob is like an URL think of it it's like a file URL it's a file that is accessible through an URL that is only stored on our browser that is not stored on a CDN that is not stored on this or on that it is merily purely um mainly purely stored on our browser and we're going to add we're going to create this so we're going to do const blob equals new blob function we're going to apply this to the stringified version of this one on top which we defined in this function in here and we're going to set the type to application Json so that our front end as we set the header can use it and we're now going to generate a blob URL FL from The Blob so we're going to take this blob which we created here and we're going to have this equal manifest URL and we're going to do url. create object URL so this blob which is just like a file stored on your browser will now be turned into a URL that is accessible for our front end so the blob itself is not just the URL the The Blob itself is mainly used as an URL but a blob purely is just the file on the browser so we're now going to get the the link that is within our browser the URL the link that is linked to that in our browser so we're asking it what is it and we're going to do this function to get the URL and then once we got the URL we're just going to return the Manifest URL in here and if I'm going to open this URL now in my my browser you are going to see that I'm just getting this oh that I'm just getting this manifest code in here and this is the code that will be able to run as the site is being opened and that will give the settings that will make it look and work like a mobile app yeah we're just going to close that here and now it will not work if we're not going to set this application Json this manifest Json file into our website into our web app so what we now need to do is we need to go to the Manifest URL to the Manifest we initially added into the header code and we're going to modify it after we got the application Json file containing the Manifest so containing the code saying we want this icon we want it stand alone we want this this whole configuration of how we want to have this a mobile experience to work within our mobile device we're now we now need to load this back into into the header of our web flow site so that the browser knows how to treat it and that we don't want to treat it like a website but that we want to treat it like a web app um a a progressive web app so we have this attribute here of West manifest URL and this is the Manifest set setting in the header code and we're now just doing an action and we're going to apply it to the attribute of manifest URL this is the link element which we have set in the header that will manipulate the whole header structure of the page and we're now going to set an element action on this header link which will influence the whole page and everything in it the whole header and we're going to set HTML attribute of H ref and we're going to put our and we're going to return our v. manifest variable with the Manifest URL this one in here as the code that will be loaded within the header and we are now going to just publish our site in with and it will work on our mobile device so now the question is why do we need to create in url for that because the way this principle works is we need to set an H ref in here but we cannot set an hre for a variable because an hre is a link it is a bit like fin Suite attributes but in this case it needs to have the the code loaded um from a different URL to be able to work in this principle so we don't want to put it on a CDN because we need an internet connection to load that we just want to simplify everything and already have this code run in our browser therefore we're going to enable offline functionality or somewhat of an offline experience for our web clip for our um Progressive web app without having to go through the CMS route which always needs to have an internet connection to work properly so this where we're going to build it directly in Waist we're going to load that already in the browser and that blob will be available for the next few minutes to hours within that browser or in this case within the mobile app frame and yeah this is how you're going to do that and I hope you're going to build a lot of exciting Progressive web apps using this principle and yeah I wish you all the best in developing that and thank you thank you thank you so much for all your support for all your wonderful comments I really really really appreciate that and yeah thank you so much again I'm excited to see in the comments if you have any questions I'm always happy to help and yeah thank you so much and see you tomorrow bye-bye

Channel: NoCode ProCode

Views: 1,500

Keywords:

Id: lK0R9JDskbQ

Length: 15min 39sec (939 seconds)

Published: Tue Mar 12 2024