Progressive Web Apps

Everything You Should Know About Progressive Web App

Progressive net Apps may be a net application that takes advantage of contemporary browser options and might be additional to your home screen, behaving rather like a native application.

In this tutorial we're aiming to show you everything you wish to understand regarding PWAs, step by step, with sensible examples and a demo app. To not begin from scratch, we have a tendency to square measure aiming to use the selfie app we have a tendency to created recently, and build it progressive.

What is a Progressive Web App

In its core a progressive net app is not any totally different from a traditional web site - it's made from HTML, CSS and JavaScript, and lives within the browser. What separates PWAs from regular websites may be a list of ten key ideas that require to be consummated. Here there, taken directly from the Google Developers web site.

1. Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.

2. Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.

3. Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.

4. Connectivity-independent - Enhanced with service workers to work offline or on low quality networks.

5. App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.

6. Fresh - Always up-to-date thanks to the service worker update process.

7. Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

8. Re-engageable - Make re-engagement easy through features like push notifications.

9. Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

10. Linkable - Easily share via URL and not require complex installation.

Following these guidelines will ensure that your app works well not only when viewed in the browser, but also when started separately via a home screen shortcut. You may find the wording Google has chosen rather confusing, but don't worry, we will explain the rules one by one later in the tutorial.

What a Progressive Web App is NOT

The concept of PWAs shouldn't be confused with:

· Cordova based hybrid apps

· React Native

· NativeScript

· Electron and NW.js

All of the said technologies wrap markup language apps and package them into workable files, be it an .apk, .exe or the rest, that then have to be compelled to be downloaded from the various app store and put in on the user's device.

PWAs do not need installation and are not obtainable (yet) in Google Play or the iTunes App store. To transfer a PWA you would like to easily visit it's web site so put it aside to the house screen as a cutoff. Developing and maintaining separate iOS and automaton versions is not any longer a problem, however browser support has to be taken into thought.

1. Safe

Most progressive internet apps work with native genus Apis and repair employees, technologies that manage sensitive information and wish to be handled with caution. That is why each PWA has got to be served through a HTTPS affiliation.

If you do not have access to a server with a SSL certificate, the best method run comes in a very secure surroundings is via GitHub Pages or the same service. Any GitHub repository are often hosted directly over HTTPS, and each GitHub and GitHub Pages area unit free for public repos.

For simple testing on a neighborhood server, you'll additionally attempt Ngrok. It’s a small tool that permits you to tunnel any presently running local host to a secure public uniform resource locator. Ngrok is free and obtainable for Windows, Mac, and Linux.

2. Progressive

Essentially, what this suggests is that PWAs ought to use internet technologies that square measure wide supported and work equally well on as several browsers as potential. As we tend to all recognize, within the world of internet development this is often about to not possible, however still there square measure things we will do to hide a bigger user base.

For example, in our PhotoBooth app we tend to use the getUserMedia() API for accessing the hardware camera on a tool. Its support in several browsers is sort of inconsistent - hunting expedition does not support it in the slightest degree, the browsers that do support it would like prefixes and take issue in usage. To ensure additional individuals will really use our app, we tend to cowl all the prefixes:

 navigator.getMedia = ( 
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia
 );
 

We also show an error if none of the prefixes work:

if (!navigator.getMedia) {
 displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else {
 // Use Camera API
}

Fallbacks and polyfills should be provided where possible. The same principles go for the CSS and HTML code.

3. Responsive

The app ought to look nice on all devices, notwithstanding their screen size. Our app encompasses a fairly straightforward UI therefore we've used solely one or two of media queries to regulate font-size, paddings, margins, etc.

Don't be afraid to use CSS libraries and frameworks like Bootstrap, as they create it very easy to make grids, and influence typography and general responsiveness.

4. Connectivity independent

This is a vital one. victimization service staff permits your app to figure even once there's no net affiliation on the market. Some apps may be cached solely partially: UI is cached and on the market offline, dynamic content still wants access to a server. Others, like our PhotoBooth demo, may be cached in their totality. All of the ASCII text file and resources are going to be saved regionally and also the app can work offline and on-line precisely the same means. Here is that the code that creates the magic happen:

This is an oversimplified usage of Service Workers, use with caution in commercial projects.

First we need to make a service worker JavaScript file, and define the logic behind it.

sw.js

// Install the service worker.
this.addEventListener('install', function(event) {
 event.waitUntil(
 caches.open('v1').then(function(cache) {
 // The cache will fail if any of these resources can't be saved.
 return cache.addAll([
 // Path is relative to the origin, not the app directory.
  '/pwa-photobooth/',
 '/pwa-photobooth/index.html',
 '/pwa-photobooth/assets/css/styles.css',
 '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
 '/pwa-photobooth/assets/js/script.js',
 '/pwa-photobooth/assets/icons/ic-face.png',
 '/pwa-photobooth/assets/icons/ic-face-large.png',
 '/pwa-photobooth/manifest.json'
 ])
 .then(function() {
 console.log('Success! App is available offline!');
 })
 })
 );
});
 
// Define what happens when a resource is requested.
// For our app we do a Cache-first approach.
self.addEventListener('fetch', function(event) {
 event.respondWith(
 // Try the cache.
 caches.match(event.request)
 .then(function(response) {
 // Fallback to network if resource not stored in cache.
 return response || fetch(event.request);
 })
 );
});

Then we need to link that service worker to our HTML.

index.html

<script>
// Register Service Worker.
 
if ('serviceWorker' in navigator) {
 // Path is relative to the origin, not project root.
 navigator.serviceWorker.register('/pwa-photobooth/sw.js')
 .then(function(reg) {
 console.log('Registration succeeded. Scope is ' + reg.scope);
 })
 .catch(function(error) {
 console.error('Registration failed with ' + error);
 });
}
</script>

Now all of the files in our project will be saved in the user's browser. Any JavaScript variables and object should also be saved in the localStorage or IndexDB where possible.

Right now Service Workers are supported in Chrome, Firefox and Opera. Safari and Edge are also working towards adopting them, and we hope that in the future they will be available in every browser.

5. App-like

When building PWAs, it's counseled to follow a style idea referred to as app-shell design. It sounds terribly sophisticated however basically boils all the way down to this: the app is separated into 2 major components: the shell and also the content. The shell contains all the static UI components like a header, menus, drawers, etc. once we cache associate degree app, the shell should be saved on the device, as a result of we wish it to be on the market in the slightest degree times. That method once a user with no web association opens the app, they will not see associate degree empty screen or a running archosaur - they'll see the cached app interface associate degreed an applicable error message.

The content resides within the shell. It can also be cached but it isn't necessary to do so as content is usually dynamic, changes frequently and can be different on every single page load.

6. Fresh

Once cached, our PWA will always load from the local storage. However, if we change the service worker sw.js in any way, on the next page load the new version will be downloaded and installed.

this.addEventListener('install', function(event) {
 event.waitUntil(
 caches.open('v1.0.1').then(function(cache) {
 // ...
 })
 );
});

Using service worker updates we can re-download resources, delete old cache, or completely change the service worker logic. You can learn more about the SW Update process from the Google Developers article.

7. Discoverable

By adding an online Manifest to our app we are able to give varied info regarding it and alter the manner it's displayed on people's devices. It permits apps to be saved to the house screen with a custom icon, to be started during a separate browser window, and a great deal of different cool stuff.

The Web Manifest takes the form of a simple JSON file:

manifest.json

{
 "name": "Progressive Web App: PhotoBooth",
 "short_name": "PhotoBooth",
 "description": "Simple Progressive Web App for taking selfies.",
 "icons": [{
 "src": "assets/icons/ic-face.png",
 "type": "image/png",
 "sizes": "72x72"
 }, {
 "src": "assets/icons/ic-face-large.png",
 "type": "image/png",
 "sizes": "144x144 256x256" 
 }],
 "start_url": "index.html",
 "display": "standalone",
 "background_color": "#fff",
 "theme_color": "#fff",
 "orientation": "portrait"
}

Most of the properties are self explanatory so we will cover only the more important ones. See the full Web manifest format and all the available fields.

· Shortname - This is the name our app will have when saved to the home screen.

· Icons - Array of icons with different resolutions.

· Display - Defines how the app will be opened. We've chosen standalone so when started our photo booth will appear in a full-screen window without any browser navigation or menus. It will also be seen as a separate app in multitasking.

To register the manifest we have to link it to our HTML:

<!-- Web Manifest -->
<link rel="manifest" href="manifest.json">

Safari doesn't support the Web Manifest standard yet but we can define app-like behavior with this Apple-specific meta tag:

<!-- Meta tag for app-like behaviour in iOS -->
<meta name=”apple-mobile-web-app-capable” content=”yes”>

8. Re-engageable

Push notifications are not restricted to native apps to any extent further. because of service employees and also the Push API, internet applications also can send messages to the humanoid notification bar. Not all apps can enjoy having this feature, however once used properly notifications will extremely facilitate interact users.

This topic goes on the far side the scope of our tutorial, as Push Notifications area unit quite difficult and merit a full lesson on their own. If you continue to need to implement notifications to your internet app, here area unit a number of the simplest learning resources available:

· Google Developers, Push Notifications: Timely, Relevant, and Precise - here.

· Google Developers, Push Notifications on the Open Web - here.

· MDN, Using the Push API - here.

· Push.js, Library that provides a cleaner API for handling push notifications - here.

9. Installable

By default any web site may be manually saved to the house screen victimization the increase Home Screen button from the Chrome browser menu. However, it'd be rather tough to create users "install" our app this fashion, since the majority do not know this feature in the slightest degree.

Thankfully, there's how for your app to prompt users to save lots of it with a straightforward installation pop-up. To stop developers from abusing these pop ups, there's not any thanks to programmatically show them. Instead, they'll seem on their own once Associate in Nursing app fulfills a series of requirements:

1. There is a valid Web Manifest.

2. There is a valid Service Worker installed.

3. The app is served over HTTPS.

We have all of the above covered, so when a user visits our app's website a couple of times, they will get this prompt:

The entire installation process of our app is in this simple prompt. The install happens instantly, and once saved the PhotoBooth will be available to launch from a home screen icon, behaving exactly like a native app.

11. Linkable

Anyone with an internet browser has access to PWA apps and that they is shared merely via their universal resource locator. No third party tools area unit needed for locating or putting in them.

If associate app runs in standalone mode, it is also suggested to feature in-app share buttons, since the browser address bar and menus are not visible.

Conclusion

Our PWA is now complete. We can test how well it follows the PWA rules with an official Google-made tool called Lighthouse. It recreates possible scenarios and tests the app thoroughly. Here is what it tells us about the PhotoBooth:

We passed!

If you want to find more PWAs to play with, go to pwa.rocks. They offer a nice collection of games and useful tools, showcasing the great power of Progressive Web Apps.

We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.

As a reputed Software Solutions Developer we have expertise in providing dedicated

remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!