Progressive Web App

Progressive Web Apps when I heard this a few months ago, I try to seek every people who talking about it, Just thing, I little bit late to collect information about it, but no problem. After that I follow google io 2016, there are lot of information about it. Then I make note here.

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.

For this time Mobile App is very powerful almost every new startup begin with mobile app. But I think PWA will make something different for a few more years because it’s more effective. Why I said it’s more effective? because we build App for more large segment, for the people who likes mobile app we serving Web App with PWA who had almost same functional.

Let me drove you to in my imagination, but first thing that you should know that its still subjective I still try to figure it how exactly pwa work correctly, so please pardon me if i wrong. When we try to adopt new app, we need to download the content first before we can use those app. How many bytes we should download it? sometime we “as end-user” doesn’t need and doesn’t know all features on those app. Sometime we just need some feature not all.

For example by some reason I need App with time management feature just for my self, because I have a different App from my company to arrange a time as workers, but the App do I use for myself have a lot of features I do not need. It make me lost lot storages.

Ok done, what if we use PWA we just downloaded what we feature of we need, and will removed when we doesn’t need again in some period. It make effective storage. That why I thing PWA will beat most of native app. Then what about hybrid? hybrid app is combine between native and web. PWA is completely web but user can have experience like using native app.

A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment.

It’s important to remember that Progressive Web Apps work everywhere but are supercharged in modern browsers. Progressive enhancement is a backbone of the model. (PWA.rocks)[PWA.rocks] got list of many web use progressive web apps.

What is a Progressive Web App?

A Progressive Web Apps is:

Progressive - Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
App-like-interactions - Feels like an app to the user with app-style interactions and navigation because it’s built on the app shell model.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via TLS (a Service Worker requirement) to prevent snooping and to ensure content hasn’t been tampered with.
Discoverable - Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageable - Makes re-engagement easy through features like push notifications.
Installable - Allows users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable - meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.

This codelab will walk you through creating your own Progressive Web App, including the design considerations, as well as implementation details to ensure that your app meets the key principles of a Progressive Web App.

Instant Loading

Tech behind PWA to have capabilities to work offline with controlling asset and store them in cache and make faster load on low-quality network is service worker.

(service-worker)[https://chromplex.com/wp-content/uploads/2016/07/service-worker.png]

to check what version already supported service worker you can check in (jakearchibald)[https://jakearchibald.github.io/isserviceworkerready/]

Add to Homescreen

Add to Homescreen will make web look native with manifest has icon setting, app name, resolution of icon shortcut, and setting view to remove address bar then make like native app.

(add-to-home-screen-pwa)[https://chromplex.com/wp-content/uploads/2016/07/add-to-home-screen-pwa.gif]

Notifikasi

After chrome version 42, google give support to browser to have capabilities sending notifications like native apps. But there some is problem about notifications API, because every browser has different notifications API. This make developer should code to every single browser. But any rumor about Apple, Google, Mozilla and Microsoft will compromise to make standard for this API. To make developer just create single code to work in every browsers.

(push-notification)[https://chromplex.com/wp-content/uploads/2016/07/push-notification.gif]

Fast

User who use web hope web page will more interactive, smooth, fast scroll and smooth animations. Accessing web with desktop and mobile is completely different. Hopely in mobile web will more light and not to download many asset. Goole has launch (PageSpeed Insight)[https://developers.google.com/speed/pagespeed/insights/] tool to test whether web is good for mobile user.

Secure

Requrement of service worker is web should use HTTPS protokol. HTTPS will encrypt session data with SSL (Secure Socket layer) or protokol TLS (Transport Layer Security). So data between web and user has secured. If communication unprotected attacker can be easy to steal or abusing data like cookie, script and all can be exploited. For instance some ISP ijected ads on every web page has we acess, it’s really bad for UX.

Responsive

Google absolutely support responsive web. In this era many user moved from dekstop to mobile. Even many people firstly know internet access from mobile.

What we should learn

How to design and construct an app using the “app shell” method?
How to make your app work offline?
How to store data for use offline later?

What we need

Chrome 47 or above
Install Web Server for Chrome, or use your own web server of choice.
The sample code
A text editor
Basic knowledge of HTML, CSS and JavaScript

Architecture

App Shell

What is the app shell? The app’s shell is the minimal HTML, CSS, and JavaScript that is required to power the user interface of a progressive web app and is one of the components that ensures reliably good performance. Its first load should be extremely quick and immediately cached. “Cached” means that the shell files are loaded once over the network and then saved to the local device. Every subsequent time that the user opens the app, the shell files are loaded from the local device’s cache, which results in blazing-fast startup times.

App shell architecture separates the core application infrastructure and UI from the data. All of the UI and infrastructure is cached locally using a service worker so that on subsequent loads, the Progressive Web App only needs to retrieve the necessary data, instead of having to load everything.

Web App Manifest

The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the device home screen), direct what the user can launch and more importantly how they can launch it

The manifest enables your web app to have a more native-like presence on the user’s homescreen. It allows the app to be launched in full-screen mode (without a URL bar being present), provides control over the screen orientation and in recent versions of Chrome on Android supports defining a Splash Screen and theme color for the address bar. It is also used to define a set of icons by size and density used for the aforementioned Splash screen and homescreen icon.

pwa general

A sample manifest file can be found in Web Starter Kit and over in the Google Chrome samples. Bruce Lawson wrote a Manifest Generator and Mounir Lamouri has also written a handy Web Manifest validator worth checking out.

For more details, read Installable Web Apps with the WebApp Manifest in Chrome for Android on Web Fundamentals.

Chrome on Android has support adding in your site to the homescreen for a while now, but recent versions also support proactively suggesting sites be added using native Web App install banners.

pwa general

In order for the app install prompts to display your app must:

Have a valid Web App manifest
Be served over HTTPS (see letsencrypt for a free certificate)
Have a valid service worker registered
Be visited twice, with at least 5 minutes between visits

A number of App Install banner samples are available, covering basic banners through to more complex use-cases like displaying related applications.

Service Worker for offline caching

A service worker is a script that runs in the background, separate from your web page. It responds to events, including network requests made from pages it serves. A service worker has an intentionally short lifetime.

It wakes up when it gets an event and runs only as long as it needs to process it. Service worker allows you to use the Cache API to cache resources and can be used to provide users with an offline experience.

Service workers are powerful for offline caching but they also offer significant performance wins in the form of instant loading for repeat visits to your site or web app. You can cache your application shell so it works offline and populate its content using JavaScript.

pwa general

A comprehensive set of service worker samples are available over on Google Chrome samples. Jake Archibald’s offline cookbook is a must-read and I highly recommend trying out Paul Kinlan’s your first offline web app walkthrough if new to service worker.

Our team also maintain a number of Service Worker helper utilities and build tools that we find useful for reducing the overhead in getting Service Worker setup. They’re listed over on Service Worker Libraries. The two main ones are:

sw-precache: a build-time tool that generates a service worker script useful for precaching your web app shell
sw-toolbox: a library providing runtime caching for infrequently used resources

Jeff Posnick wrote a quick primer on sw-precache called Offline-first, fast, with the sw-precache module and a codelab on the same tool that you might find useful.

Dean Hume also has a very well written post on getting started with sw-toolbox worth checking out.

Chrome, Opera and Firefox have all implemented support for Service Worker with Edge having positive public signals about interest in the feature. Safari briefly mentioned interest in it via one engineer’s proposed five year plan.

Push Notifications for re-engagement

Push notifications allow your users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, engaging content.

Effectively, you can build web apps that users can engage with outside of a tab. The browser can be closed and they don’t even need to be actively using your web app to engage with your experience. The feature requires both service worker and a Web App manifest, building on some of the features summarised earlier.

The Push API is implemented in Chrome, in development in Firefox and under consideration in Edge. There are no public signals from Safari about their intent to implement this feature just yet.

Push Notifications on the Open Web is a comprehensive intro to getting Push setup by Matt Gaunt and a Push Notifications codelab is also available on Web Fundamentals.

Layering in advanced features

Remember, your user experience can have different levels of sweetness depending on the browser being used to view your web app. You’re in control of the hard candy shell.

Additional features coming to the web platform such as Background Syncronisation (for data sync with a server even when your web app is closed) and Web Bluetooth (for talking to Bluetooth devices from your web app) can also be layered into your Progressive Web App in this manner.

One-shot Background Sync has been enabled in Chrome and Jake Archibald has a video of his Offline wikipedia app and article demonstrating it in action. Francois Beaufort also has a number of Web Bluetooth samples available if interested in trying out that API.

Framework-friendly

There’s really nothing stopping you from applying any of the above principles to an existing application or framework you’re building with. A few other principles worth keeping in mind while building your Progressive Web App are the RAIL user-centric performance model and FLIP based animations.

I’m hopeful that during 2016, we’ll see an increasing number of boilerplates and seed projects organically baking in support for Progressive Web Apps as a first-class citizen. Until then, the barrier to adding these features to your own apps isn’t very high and are imo, quite worth the effort.

Progressive Web App Progressive Web Apps 05 October 2016

What is a Progressive Web App?

Instant Loading

Add to Homescreen

Notifikasi

Fast

Secure

Responsive

What we should learn

What we need

Architecture

App Shell

Web App Manifest

Add to Home Screen Banner

Service Worker for offline caching

Push Notifications for re-engagement

Layering in advanced features

Framework-friendly

Further reading

Vanilla JS

Polymer

React

Virtual-DOM

Angular.js

More