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