Saturday 29 June 2019

What is a Progressive Web App?

Web Technology

PWA's are websites but better.

Progressive Web Applications (PWAs) are websites that give your users an app like experience.

They are downloaded and installed on your mobile home screen and desktop through a standard web browser. PWA’s can be indexed by search engines, receive push notifications, sync in the background and also have access to mobile devices like microphones, cameras and touch sensors.

The requirements was outlined in 2015 by Google, since then the whole industry has been moving toward PWA's by integrating them into their browsers. They work on any platform that uses a standard compliant browser and provide a significant cost savings because they only require one coding platform to both website and app.

Progressive web applications have some distinct features which vary with apps and help them offer optimum web experience;

Service workers

Unusual title, but this part of the platform allows a PWA to receive provide push notifications, background syncing and offline working.

Offline caching

PWAs utilise caching to instantly load pages on repeat visits. Some content help within the device while the new dynamic content is refreshed on each user visit - effectively providing basic functions without the need of internet.

Integrated Platforms

Unlike Apps they will work across all devices and platforms because they are created as responsive mobile websites.

Which browsers support PWA's?

Today, progressive web apps are fully supported by Chrome and Opera. Firefox supports nearly all of their features. Microsoft Edge is working on them. Safari are even supporting them on iOS 11.3. A PWA provides features like push notification, home screen icon, full-screen and offline, the first app to glorify user engagement.

Case Studies

George.com

The UK clothing brand upgraded their website to a PWA and experienced a 31% increase in mobile conversion.

3.8x - Faster average page load time
2x - Lower bounce rate
31% - Increase in Conversion Rate
20% - More page views per visit
28% - Longer average time on site for visits from Home screen

Lancôme

Lancôme PWA proved to be successful for a number of reasons - they kept users engaged with push notifications with exclusive promotions and products releases. This method delivered an 18% open rate on mobile.

53% increase in mobile sessions on IOS
15% decrease in bounce rate
8% increase in users returning after abandoning their cart
17% increase in conversion on IOS devices

PWA's coming to the Galaxy Store

Samsung are going to integrate Progressive Web Apps (PWA's) into the Samsung experience, it has decided to start adding Progressive Web Apps to the Galaxy Store along with conventional apps.

PWA Pros

PWA’s are built using standard internet technologies like HTML, CSS and JavaScript. They work on all platforms that use standard browsers.

They are accessed by Home Screen Icons and Desktop Icons
Can receive push notifications (even if application closed)
Can access some native features like Cameras, Microphone, File System and Database.
App Install Banners – customized installation visual buttons – also built in address bar chrome install button
Installs desktop (Home) icon which can be moved to start menu or task bar.
Can add to Home Screen on android, does not have to be installed but provides extra functionality if installed.
Work offline capabilities, you can prepare an offline version of site that still provides useful information, reported improvement on regular browser caching load times, can save submitted data offline and sync later, can use cache then when network comes online dynamically update with latest resources.
Many sites report increased turnover with this technology as switching to PWA as a shortcut on your Home Screen has less moves for a user than opening browsers and entering a web address.
Indexable via Search Engines as essentially is still a website where Native apps are not.
Improved abandoned shopping cart retrieval and completion thanks to push notifications bringing people back to the site when they may not have thought about it but where reminded
No updates required as its basically the website in a container with extra capabilities to access native os or at least simulate as its run by chrome window
Future looks like it’s going to feature PWA more with windows 10 and Edge browser actively under development with extra features to integrate in to the OS, Apple iOS on the case also but Safari reportedly behind on offering some functionality in compared to Android and Chrome
Some companies have Lite version of desktop/website app that loads really quickly eg goes direct to booking section
Much less development time that a native app due to it being practically a website same server side C# .Net/PHP, then client side HTML, JavaScript, CSS, SQL, XML, JSON data manipulation, native Android and iPhone apps would be almost a partial/total rewrite for a different development framework depending on requirements, advances in recent years make it less than it used to be to make native app but PWA makes it even less still (that does not mean there is no development to do however and also adding new functionality to the existing website would take same amount of time it’s just got the advantage you don’t need to maintain multiple solutions)
Install Options; Google Play, Apple App Store, Windows 10 App Store, Chrome Browser, more options TBA in future

PWA Cons

Can’t load Native Apps from PWA such as Google Earth location, Photoshop or Media Players
Not all features are accessible inconsistent support for cameras, compass, accelerometer, gesture support for screens etc
Patchy support in some browsers to install to Desktop (may improve in future)
Can’t do custom window shaped application – restricted to have a coloured frame around, no super special AIMP skins or old school Winamp skins, TV players
Battery consumption greater

Please call us us 0131 454 3311 or just get intouch and find out how to get started with a Progressive Web App (PWA). Learn about the future of PWA's