What are some of the features of Progressive Web Apps that you can start using today for your business?

A friend of mine in the roofing business recently asked me a few questions about how he can implement a workflow automation tool into his website to save more time and increase sales. In this article I’ll answer some of the questions he asked.

I’d like to implement a workflow automation tool where I can set pricing for square footage and a customer would enter the total area and the application would calculate the cost, would this be an application or part of a web site?

This is very easy to do with just a little JavaScript on the front-end if the price is constant. If your updating the pricing of the square footage from a back end, you’d make an initial call to a database to retrieve that. The widget could be set up as part of your existing website or as a stand alone application on it’s own. If you like, a customer could download the application very quickly through the “app install prompt”. There would be no need for him to search on the apple store or android play store to find your application.

Install prompt being shown on leasewarehouses.net

How would my customers access and use my application, and would it work offline?

Customers wishing to use this feature customers could go to your website to use it or they could click the icon on the screen of their phones, computers, smart T.V’s etc.. or however else they wish to access it. This is one of the great features about progressive web apps, they are accessible on any device and any platform. A customer using your app will be treated to an in app feel, without the navigation bar. The display mode settings can be tweaked in the app’s manifest file. The modes offered are Standalone, Full Screen, Minimal UI, and browser mode.

Notice the full screen interface and lack of the browser navigation bar at the top when the app is opened using the home screen icon.

Today, most websites and web apps should be created with the offline first principle in mind. Offline first works great for things like images and text, however, if your app depends on a map being rendered in real time, like leasewarehouses.net, or real time results that need to be constantly updated from an API you wont get the app working as it would if you have internet access. Although this isn’t a problem nowadays as most cellphone services provide internet data as standard along with regular cellphone service. You can always provide an application shell that would be the minimum HTML, CSS and JavaScript required to power the user interface which, when cached offline would ensure instant, reliably good performance to users on repeat visits. Although describing this in depth is beyond the scope of this article, the basic idea is that you can cache assets that were previously retrieved on the last visit to your website/app, for more details about this you’ll need to read up on service workers and how they work, here’s a good resource to start:

PWA offline-quickstart

What are some of the ways my application re-engage my existing customers?

So, the traditional way to do that would be email marketing, and you could use that, but a more modern approach would be to implement web push notifications or a combination of the two. For example in the lease warehouse website, when a customer purchases a leasing application or uses a coupon to get a free leasing application, a process is started:

• A push notification is sent out to all subscribers
• An IVR system is activated which checks twenty four hours before the meeting time if the customer wishes to cancel or confirm the appointment
• Navigatable driving directions to the tenants chosen building are sent by SMS text message to his cellphone
• The customer is emailed the directions to the chosen building as well as a copy of the space plan he specified interest in.

These push notification work on desktops as well as cellphones, and any subscriber clicking on this specific push notification would be shown the time of the meeting, along with navigable directions to the building. This is great in the real estate business for something like open house showings where you’d want to maximize your time and possibly give off the illusion of demand by having many people show up at one time to see the space.

Push notification on desktop/laptop computer

One thing to note about push notifications and requesting permission is that some users may find this annoying. Myself, for one, if its my first visit to a website and that app/website is requesting permission to notify me, I almost always decline. A technique to get around this is by not asking for permission right away on the first visit.

So lets wait a little while…

let loaded = parseInt(localStorage.getItem("loaded"), 10),
  loaded_numb = loaded ? loaded + 1 : 1;
localStorage.setItem("loaded", loaded_numb);
if (loaded_numb === 3) {
  Notification.requestPermission()
    .then(function () {
      console.log("have permission");
      return messaging.getToken();
    })
    .then((token) => {
      console.log("token returned= ", token);
      localStorage.setItem("browserInstance", token);
        db.collection("subscribers")
          .add({
            browserToken: token,
          })
          .then(() => {
            console.log("token saved to the database");
            return;
          })
          .catch((err) => {
            console.error(err, "= was an err in adding token");
          });
    })
    .catch(function (error) {
      console.log(
        "error in running requestpermission method on the messaging object=",
        error
      );
    });
} else {
  console.log(
    "hes been here less than or more than three times, no need to ask permission or add him to the database"
  );
}

In the above code, using local Storage, I am checking how many times a user has visited. If its his third visit, ill add his browser token to a subscribers collection in my database with with I can loop through and push messages to a later point in time.. Its also possible to know how many times he’s been to your site on a given browser. Of course, this would be refreshed if the user clears his browsing data on that given web browser.

What other ways could I use modern web technology to increase my productivity in my workflow automation or business logic?

This is not something that’s exclusive to progressive web apps but one way you could do something like that is offer an option to pay for the roofing job directly through your app once he’s specified the square footage to be roofed over. A user could specify how large of a job he wants and then be prompted to scan his credit card using his cellphone.

Real estate checkout flow, the customer sees directions to his chosen building from his current location and after he chooses his desired space, he is prompted to pay by scanning his credit card through his cellphone.

Anything else I should know that would increase my productivity?

You might want to implement geolocation in your app, like maybe you charge more for a job depending on the distance? Of course all of these options and much more could be implemented depending on how you’d like your app to behave and how you want your users to interact with it. For more information feel free to reach out.

flex4lease@gmail.com