Device Api's and why they matter for a PWA
Ever wondered if you could make a device vibrate, or access the camera, or even access the native share dialog for a device from your PWA?
Sure, if you make a regular Ionic 2 app, use Ionic Native and deploy this to a device then yeah, you can have access to all these things
but what if you are making a PWA? Well the cool thing is you can access all these things with all the new device api’s that are now supported
in browsers. You can now swing your magic wand and give your PWA even more of that “native” feel by accessing the capabilities of the users device
all from plain JavaScript!
Why would I want to access these native capabilities?
To answer this question we first have to take a look at exactly what a PWA is. If you dont know already a PWA is a web app built with
modern web technologies such as service workers, web manifests and more that give a fast, app-like experience in the browser. And, if the user decides
they like your PWA and visit it enough times then they will get a prompt to add it to their homescreen on their device which puts your PWA
right alongside all the native apps on their device! Now the two key things here are app-like and right alongside all the native apps on their
device. When your PWA sits right alongside native apps and launches just like a native app (no browser chrome) a user has the expectation that
your PWA will act and feel just like a native app. A key part of this is being able to access the same device functionality that a native app
can access. A good example of this is sharing something on Android. There is a standard way that sharing happens on Android and all native apps will
use this same api for sharing something which means that a user will get used to this way of sharing something from their device. Now, if they are using
your PWA, hit a share button and are all the sudden faced with an unfamiliar sharing ui then it can cause confusion, therefore causing the user
to potentially not want to use your PWA.
Ok so now I want to use these api’s, but what is actually available?
The cool thing about the modern web is that it is immensely powerful and has more access to your device than you may think. Here is a short list
of some of what is available out there now: disclaimer - not all of these api’s are widely supported yet but are standardized and should be coming soon
- Vibration api - http://caniuse.com/#feat=vibration
- GetUserMedia api - http://caniuse.com/#search=getUserMedia
- Web Share api - Only available as an origin trial in Chrome at the moment
- Battery Status api - http://caniuse.com/#feat=battery-status
- Push messages api - http://caniuse.com/#search=push
For a comprehensive list feel free to check out What web can do today but these are some of what I personally think
are the coolest device api’s available at the moment. As you can see the browser support is pretty decent for most of these api’s. Happily, edge is in the
progress of implementing most of these (understandable as they are still a relatively new browser) which just leaves Safari not having good support, I have
hope that Safari will implement these api’s soon though!
This is exciting! Have any examples available I can use?
Over the coming weeks I hope to create a few PWA’s that use these api’s and open source them on Github for you to use as examples!
Thanks for checking out what is only my second blog post on this blog! I have a special blog post planned next that I think you will want to see!
Think its possible to create a full blown camera app only out of web technologies? It definitely is and in my next post I will go over how I did this!