Progressive Web Apps (PWAs)

As an introduction to PWAs, let’s build a mobile app the fastest, easiest way, using the Progressive Web App model. A PWA is both a mobile app and a website. Built with HTML, CSS, and javascript, the website can be viewed as either a website on your laptop or a mobile app on your phone or tablet. No need to develop a separate native app for every platform!

What does “App-like” mean? PWAs can work on your phone or tablet so much like a native app, it is hard to see the difference. Twitter produces both, a native app you can find in your app store, and a PWA you can “install” from browsing to twitter.com. Check out images of each:

A PWA can even access device hardware like the camera or microphone! They can produce push notifications and work offline. How does it do these things? It’s all in the site javascript and structure. It is the best way to build a mobile app. Let’s see how this works.

PWA Goals

To work like a native app, the PWA website has to:

  • Work offline
  • Perform fast
  • A display like a native app, responsive, with no browser UI visible
  • Startup from an icon on your home screen

Advantages

Why and when would we want to create a PWA?

  • Fast deployment: Avoids submission to the app stores for review and approval
  • Quicker updates are published immediately because it is served on the web and so no need to wait for the user to download to their device
  • More discoverable: Users can find and link to it via search engines
  • Secure: They use the browser security model, so providing the security of operating within the web browser context
  • Connectivity independent: PWAs can function on very low bandwidth or no connection at all.
  • Installable: Like a mobile app, this is opened from an icon on the home screen.
  • Notifications: Can send push notifications to the device like a native app
  • Hardware access: Can use the mobile device camera, microphone, etc.

Progressive?

“Progressive” in the name refers to that it will work and display in all browsers to a varying degree. Because it is browser dependent, it is affected by the capability of which browser the user has, and what version. PWAs have a goal to display and function at least minimally in all browsers, regardless of version. As such they become progressively more feature-rich in newer versions.

History

The Progressive Web App concept was created by Google in 2015. Its roots go even further back though, to Steve Jobs’ introduction of the iPhone in 2007. He declared back then that development for the iPhone would be done in html5 and have no SDK. His vision was undermined by iPhone jailbreaking which forced Apple to retreat to having an SDK and app store. But the concept lived on and is seeing increasing life in the PWA model.

Let’s Build One

We will look at how to use a manifest and service worker to create a very simple application that provides the features of a PWA. This is exciting to see on your phone, in action!
In your development environment, create a folder in your local for your project, name it anything, and add subfolders for js and images, and an index.html file:

This demo was edited VS Code and the site was served on IIS in Windows but any favorite editor and dev web server will be fine. Node.js http-server is another easily available web server you could use. The file index.html should look like this, to start. We’ll add more later:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello My Phone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="fullscreen">
  <div class="container">
    <h1 class="title">Hello My Phone!</h1>
  </div>
</body>
</html>

Run the app now in your webserver to see how it is shaping up. So far this is just a web app. Push it to your GitHub Pages repo to see it run on the web. To add mobile app functionality, we need to add two files, a Service Worker and a manifest.

Service Worker and Manifest

These change the app from a simple web app to one that can behave like a mobile app, a Progressive Web App. The Service Worker is the middleman between the web page and content. It contains the code to determine whether to deliver static, cached content or dynamic data based on whatever criteria you want, typically whether it finds a connection to the internet or not. The manifest is a json file that provides properties to the browser such as which page to load when the app is first opened, or what is the title of the app. Both the manifest and the service worker live on the root directory for access.

Create a file named manifest.json in the root of the site, and add the following:

{
  "name": "My Phone App",
  "short_name": "My App",
  "icons": [{
    "src": "images/phoneapp-icon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/phoneapp-icon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/phoneapp-icon-152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/phoneapp-icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/phoneapp-icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "images/phoneapp-icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "description": "Sample Progressive Web App",
  "lang": "en-US",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "white",
  "orientation": "any",
  "theme_color": "white"
}

Link the manifest file in your index.html file, in the head section:

&lt;link rel="manifest" href="/manifest.json"&gt;

Service Worker

To add the service worker, create a file in the root folder named sw.js. Add the following to it:

var cacheName = 'phoneApp';
var filesToCache = [
  './',
  './index.html',
  './css/style.css',
  './js/main.js'
];

/* Start the service worker and cache files in filesToCache */
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache); 
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

Adding a service worker is the first step towards enabling the following progressive web app features:

  • Offline performance
  • Push notifications
  • Add icon to the home screen

Our service worker file caches specifically named pages to be able to serve them from the cache when the device is offline. The file must be placed in the app root to allow it access to all of the app’s files. Service workers only have permission to access files in their same-level directory and subfolder. In the first function of the sw.js, the first item in the variable filesToCache is “./” because that allows caching of our index.html. The cacheName variable adds the content to the browser cache to be available to be called from the javascript. The following function fetches the cached content. This file works for our demo but to properly fortify the app with error handling and to see what else the service worker can do, check out PWABuilder. It is a handy file generator for your PWA, but even if you don’t use the generator, just looking at this site sums nicely what you can define in the manifest and service worker and what they can do. For now, we’ll keep our service worker simple.

Register the Service Worker

We need one more file to call, or “register”, the service worker. Create a javascript file in your js folder named main.js. This tells the browser where to find your service worker JavaScript file. Add the following:

window.onload = () =&gt; {
‘use strict’;

if (‘serviceWorker’ in navigator) {
navigator.serviceWorker
.register(‘./sw.js’);
}
}

Link to main.js at the bottom of index.html by adding a script link before the closing body tag:

<script src="js/main.js"></script>

App Icons

We need to provide icons that various displays can use, to support the mobile app experience of having an app icon on the device. Images of varying sizes are defined in the manifest above. We will put these images in the Images folder to be available to display the home screen icon when users “install” your app. Sample images for these and for favicon.ico are included in the downloadable files (link below). The file structure looks like this now:

Add Responsive HTML

To see the best effect of your sites’ web vs mobile view, add some responsive elements and styles to index.html. This example uses the free W3 Schools templates. It links to their online w3.css stylesheet for responsive styles. A link to the W3 Schools templates is included in the links at the end of this post along with a link to download the project files.

With the addition of the html below, our site now has navigation and layout that changes based on the viewport. The HTML now looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PWA Sample</title>
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" href="css/style.css"> <!-- optional -->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="white"/>
  <link rel="icon" href="favicon.ico" type="image/x-icon" />  
<link rel="apple-touch-icon" href="images/pwa-icon-152.jpg">   
<meta name="theme-color" content="white"/>  
<meta name="apple-mobile-web-app-capable" content="yes">  
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="apple-mobile-web-app-title" content="Hello World"> 
<meta name="msapplication-TileImage" content="images/pwa-icon-144.jpg">  
<meta name="msapplication-TileColor" content="#FFFFFF">
</head>
<body class="fullscreen">
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold; background-color:#ddd;" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<div style="width: 120px; height:119px; background-color: #fff;">
  <img src="images/logo.jpg"</div>
</div>
<div class="w3-bar-block">
    <a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a> 
    <a href="#sectionOne" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Section One</a> 
    <a href="#sectionTwo" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Section Two</a> 
    <a href="#simpleForm" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Contact</a>
  </div>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-grey w3-xlarge w3-padding">
  <a href="javascript:void(0)" class="w3-button w3-grey w3-margin-right" onclick="w3_open()">☰</a>
  <span>My Mobile App</span>
</header>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:340px;margin-right:40px">
<!-- Header -->
  <div class="w3-container" id="showcase">
   <h1 class="w3-xxlarge">My Mobile App</h1>
   <h1 class="w3-large w3-text-gray"><b>Lorem dolor etc!</b></h1>
  </div>
<!-- Photo grid (modal) -->
<div class="w3-row-padding">
<div class="w3-half">
      <img src="images/circle1.jpg" style="width:100%" onclick="onClick(this)" alt="It's a photo">
      <img src="images/circle4.jpg" style="width:100%" onclick="onClick(this)" alt="It's a photo">
  </div>
<div class="w3-half">
      <img src="images/circle3.jpg" style="width:100%" onclick="onClick(this)" alt="It's a photo">
      <img src="images/circle2.jpg" style="width:100%" onclick="onClick(this)" alt="It's a photo">
  </div>
</div>
  <!-- Top Section -->
<div class="w3-container" id="sectionOne">
<h1 class="w3-large w3-text-gray"><b>Section One</b></h1>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<!-- Section of Text -->
<div class="w3-container" id="sectionTwo">
<h1 class="w3-large w3-text-grey"><b>Section Two</b></h1>
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<b>All The Things:</b>
  </div>
  <!-- Images in Boxes -->
<div class="w3-row-padding w3-grayscale">  
  <div class="w3-col m4 w3-margin-bottom"> 
   <div class="w3-light-grey">     
     <div class="w3-container">
        <h3>Thing 1</h3>Thing 1 Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
     </div>
   </div>
</div>
<div class="w3-col m4 w3-margin-bottom">
  <div class="w3-light-grey">
    <div class="w3-container">
       <h3>Thing 2</h3>Thing 2 Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
    </div>
  </div>
</div>
<div class="w3-col m4 w3-margin-bottom">
   <div class="w3-light-grey">
     <div class="w3-container">
       <h3>Thing 3</h3>Thing 3 Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
     </div>
    </div>
  </div>
</div>
<div class="w3-container" id="simpleForm" style="margin-top:75px">
My Form   
   <form action="/myformaction.js" target="_blank">
     <div class="w3-section">
      <label>Name</label>
      <input class="w3-input w3-border" type="text" name="Name" required>
     </div>
     <div class="w3-section">
       <label>Email</label>
       <input class="w3-input w3-border" type="text" name="Email" required>
     </div>
     <div class="w3-section">
       <label>Message</label>
       <input class="w3-input w3-border" type="text" name="Message" required>
     </div>
     <button type="submit" class="w3-button w3-block w3-padding-large w3-grey w3-margin-bottom">Send Message</button>
   </form>
</div>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}
</script>
<script src="js/main.js"></script>
</body>
</html>

Install On Your Phone

Upload the files to a WebHost or browse to the localhost IP address in your wifi network, to try it on your phone. On the iPhone, browse to the URL and then choose the share button.

iOS Shae button

From the context menu, choose “Add to home screen”. Android devices make this even easier by displaying a default button. See links at the end of this post for options to install on Android and other devices.

Summary

Progressive Web Apps offer the best of native mobile apps combined with the advantages of web development. Over time, the increasing embrace of PWA techniques by developers could bring Steve Jobs’ vision for smartphone applications to reality: no need for phone SDKs or and native app deployments or app store constraints, and a world in which web technology can be used to create mobile apps that are faster to build with every bit of functionality equal to their native counterparts.

Links

More about installation of a PWA on other OSs:
For the last few years, I have enjoyed participating in HOUR OF CODE – a global movement reaching tens of millions of students in 180+ countries. In 2017, 154,012 Hour Of Code events were registered worldwide.

To show how much fun (and useful) coding is, I wanted the kids to build something real,  vs. simply making their favorite character walk left or right.  I decided to use the MIT App Inventor tool for my Hour of Code sessions. App Inventor is a browser-based tool that allows you to build your own apps.  We built a simple Android app to help parents reduce distractions while driving. Even though the app is super simple, the results are cool enough for kids to proudly show the app to their parents.

Here is a 10-minute video of the steps we followed to build and test the app: Read More…

 

AIS recently completed work on a complete revamp of the Texas Workforce Commission’s “Texas Reality Check” website. Texas Reality Check is an Internet-available, fully accessible, responsive, mobile-first and browser-agnostic design. This website was tested for accessibility, performance, vulnerability scans, and usability.

Background

Texas Reality Check (TRC) is targeted at students on a statewide basis, ranging from middle school to high school (with some colleges and universities making use of the tool for “life skills” classes). The goal is to inspire students to think about occupations, and prepare for educational requirements so they can achieve the income level that meets their lifestyle expectations.

This tool walks students through different areas of life, on a step-by step-basis, identifying budgets associated with living essentials such as housing, transportation, food, clothing, etc. Students make selections and then calculate a corresponding monthly income that would afford the selections they make. From here, the students are directed to another page and connected to a database on careers and associated salaries.

However, the existing site was dated and in need of improvements in three core areas: UX, Accessibility, and overall performance. Here’s how AIS delivered:

Read More…

We’ve recently worked on several mobile app development projects for tablets and phones running iOS, Android and Windows. Thanks to these projects, we’ve identified some key do’s and don’ts for managing your product backlog requirements for mobile application development efforts.

Here are some of the common business features and technical requirements/constraints for both consumer-facing apps and corporate internal apps that could show up in the product backlog:

  • Responsive UX Design (screen size, orientation, device features, etc.) – for this you will need to identify a limited set of target device configurations for acceptance
  • Required corporate branding/corporate style guides
  • Choosing between a native app style UI that is device specific vs. a common style cross-platform UI
  • Stringent speed/performance targets for initial app loading, screen navigation, response to user actions
  • Connected vs. Disconnected Operations requirements – you need to clearly define what features work when there is no connection
  • Data security and Personally Identifiable Information (PII) protection
  • Support for multiple OS and multiple versions of an OS
  • Support for multiple types of mobile browsers
  • Integration with companion apps on the device
  • Cloud/web service integration to access corporate systems of record
  • App Store submission requirements (i.e. Google Play, Apple App Store and the Windows Store). Each store has its own unique sets of UX requirements, minimum performance, storage management, legal/copyright, privacy notification requirements, content age appropriateness designation, etc.
  • App version management
  • Code-sharing across device and OS platforms
  • Graceful degradation of the app functions in case of failures
  • Process improvement support, especially for corporate vs. consumer apps that are targeted for mobile workers
  • Security and device management for corporate apps

The items in the list above may all need to be considered when you first start working with the product owner to both build the product backlog for the mobile app and help define the overall scope and timeline for the project. For consumer apps deployed through app stores in particular, the timeline for publishing to the stores — and factoring in the review and acceptance process — needs to be considered up front. Read More…

Given the widespread use of the Android operating system running on today’s mobile platforms, Android development has become an excellent choice for enhancing a developer’s skill set. Fortunately for the seasoned .NET developer, learning Android development is not a huge stretch. While there are several avenues for .NET developers looking to break into the world of Android application development, currently the most popular options are made possible by utilizing any of the following technologies:

  • Xamarin platform
  • PhoneGap framework
  • Native Android development via Java

The Xamarin platform provides the ability for .NET developers to harness their C# knowledge, create cross-platform (iOS, Android and Windows) applications, reuse existing code and perform development within Visual Studio. The greatest advantage of utilizing the Xamarin platform is a reduced time to market while supporting multiple platforms. However, due to the additional Xamarin runtime contained within the final application, the footprint tends to be larger — this could be an issue, especially for some Android devices.

The PhoneGap framework is another option for writing Android applications.  The PhoneGap framework is a client-side web application comprised of HTML5 pages using CSS and JavaScript. While it’s possible to utilize Visual Studio to code and test the application, ultimately the code will need to be packaged into a real Android application. This will require an IDE such as Eclipse or JetBrains’s IntelliJ IDEA.  The PhoneGap Build service may also be used to accomplish the application packaging. While the PhoneGap approach will provide multiple platform support, the application type should be given consideration because the PhoneGap framework relies on JavaScript, which may have performance limitations compared with native Java Android applications.

While Xamarin and PhoneGap certainly have their merits for creating Android applications, native Android development via Java provides an opportunity to take advantage of a device’s full feature set with fast execution, all wrapped in a smaller package for more rapid downloads. For a complete discussion of the various mobile platforms’ benefits/drawbacks, please read Eric Svendsen’s excellent article where he provides plenty of depth on the issue.  For now, the remaining content of this post will be to provide valuable insight for .NET developers looking to expand their language set by utilizing native Java for Android development. Read More…

Mobile solutions are already transforming the way we do business and interact with customers, partners and colleagues, but many organizations are still struggling to fully embrace the changes and opportunities. Today’s workforce wants mobile technologies that allow them to work when they want, how they want, and from where they want. (And not to mention using whatever device they want.) Here are 10 reasons to rethink your current mobile strategy and fully embrace the concept of enabling a true mobile workforce.

1. Your workers want lightweight, handheld devices.

Slim and lightweight tablets are making it possible for mobile workers to carry them virtually anywhere without burden. Who wants to carry ruggedized bulky laptops anymore?

2. Tap into tablet innovation.

Innovations are happening at a breakneck pace in the tablet world. Even warehouses are now manufacturing tablets. Fold-up, roll-up or paper tablet, anyone?

3. Simplified app acquisition.

The app economy is expected to grow to $150 billion by 2017. Users simply love the ease of acquiring (and disposing) apps. Most of them already rely on a collection of apps to get their jobs done everyday.

Read More…

What exactly is Responsive Design? The simple answer: Making digital media viewable across all devices and resolutions.

Take your company website, for example. It looks great on your desktop computer, right? But when you view it on your phone, it doesn’t look nearly as nice if it wasn’t developed using responsive design techniques. Images will be too big, the navigation may be impossible to tap and the download time may kill you.

Designers/developers must write the code in a way that looks great no matter what device it is viewed on. Basically, we have to use something called media queries. Media queries are pieces of code that allow us to put details around objects. So we can say if a web page is being viewed on a device with a 460 pixel width, display it like this. But if the web page is being displayed on a device with a 800 pixel width, then display it like that.

It actually goes well beyond just the width. We can decide what to display based on the following factors:

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

We can tell your website if it should use high-res images for Retina Display or no images for a phone display. We have a ton of options. Responsive Design is in its infancy and we are discovering new ways every day to make this logical way of thinking possible. The sad fact is we haven’t quite developed the best way to do this yet. Right now we have to write tons of lines of code to account for all the different resolutions, as well as older versions of browsers that do not support the latest and greatest best practices. But each time we launch a new digital page, we get closer. We make it better. Read More…

Every software development company tests their product before releasing it to their clients. Test engineers strive to deliver the product without any defects, but quite often a defect appears (and reappears) even with the best testing processes in place.  Automation testing utilization increases effectiveness, reliability, repeatability and test coverage.

The Agile methodology is implemented in many organizations, which requires more frequent regression testing as the sprints are short. The automation capabilities can help accomplish the Agile sprint-based regression testing and integration testing needs. Read More…

I’m not going to try and convince you that mobile development is important – I hope you already recognize that it is! If you need further convincing, head on over to Allison Christman’s article – she gives you all the reasons you’ll need. However, while she mainly discussed mobile websites, I’d like to give an overview on mobile applications and their development methodologies. Should you build for the platform or the browser? Or both? What is the difference between a mobile website and a mobile application? What is a hybrid application? Knowing the strengths and weaknesses of each approach is vital when making the decision on how to best reach and serve your end-users. Read More…