As some people know, I have been very passionate about Windows Phone since the early days of the platform. I am still using a Windows 10 Mobile device, and I still love the operating system and the Windows 10 platform. However, I am not living in a cave, and I do realise that the future potential of the Windows mobile platform is limited. I still don't think it is "dead", but it is certainly limited. I started learning Xamarin a couple of years ago, to use my C# knowledge and skills for building mobile apps for both iOS and Android. Xamarin is a brilliant platform for creating native apps and as it matures, it has become a tool of great importance in my toolbox.
Lately, a new way of creating mobile apps has come out of Google's masterminds. Progressive Web Apps. Or PWAs. So what is this new fandangled craze the cool kids are talking about? There are a number of points that should be fulfilled for a PWA.
- Progressive - Works for every user, on every browser using progressive enhancement at 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 - Feels like an app, because the app shell model separates the application functionality from application content .
- Fresh - Always up-to-date thanks to the service worker update process.
- Safe - Served via HTTPS 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 add apps they find most useful to their home screen without the hassle of an app store.
- Linkable - Easily share the application via URL, does not require complex installation.
List by Google
Google is emphasizing three points in particular to make a successful PWA.
This code checks to see if the service worker API is available, meaning the user is using either Chrome or Firefox. If it is, the service worker at /sw.js is registered once the page is loaded. The web app now have access to local databases, rendering websites and offline functions that make the app seem native. And it is a reliable experience. It works every time.
Performance is king. Consumers expect experiences, and especially native apps on their smartphones, to be snappy and super responsive. Especially any interaction with the user has to be immediate or you can lose them in seconds. Google recommend the RAIL approach to performance.
Your PWA has to feel natural and honour the action-reaction connection. This means you have about 100ms to respond to any user input, before they lose trust in the experience. On the other hand it also means that you have 100ms to perform a task or a piece of work before you have to give the user feedback. This might not seem like a lot of time, but in the programming world, it is significant.
Of course you can have actions that will take longer than the prescribed 100ms, such as retrieving data from a web service, synchronizing some information or other known outdrawn task. If this is the case, then inform the user that they have to wait.Animation
Performance during an animation is all about frame rate. Animations such as scrolling and pinching are only convincing if they are smooth, which means a target frame rate of 60 frame per second (fps). This means you have about 10ms per frame of the animation (after the browser gets hold of the instructions) to keep it smooth.Idle
The best time to do your calculations and setting up is when the user is not interacting with the app, and it is idle. There are strategies to group units of work into blocks that can be done during idle time. The balance is to make sure you don't block the thread when the user needs it though.Load
We're talking about load time, not load of number of processes. You have to load your PWA in one second or less. Yes, 1000ms is the maximum time you have to load before users lose interest. Or worse, they think your app is broken.
You don't have to load everything in one second, but enough to make the user believe in the experience. Use the idle time (above) to finish loading anything non-essential.
There are no app stores for PWAs and they work on any platform with a supported browser. They can be installed to work offline and have an icon on the home screen to mimic any native experience. Heck, you can even send push notifications to your users.
Web App Manifest
The Web App Manifest is in charge of how your app is launched and how it appears on the device. You can specify what icons should look like, what the start page is for the experience, if you are showing the browser chrome or not, and more. The following is a simple example of a manifest file for a PWA.
Code from Google
Web Push Notifications
Just like allowing a PWA to work offline, service workers are also used for push notifications for the web. If you want to get technical push and notifications are two different APIs. Push is invoked when a server supplies information to a service worker; a notification is the action of a service worker or web page script showing information to a user.