Creating Fast, Reliable Apps with Cache API

cache-api

Progressive Web Apps (PWAs) are leading the charge in providing mobile access at a relatively low price point.

They have a lot of advantages over hybrid apps and bypass the “download barrier” of native apps altogether.

PWAs operate within browsers, which imposes some limitations. One of these is the browser’s built-in cache.

Mobile apps rely on caching to stay operational in variable signal strength areas, and the browser’s native cache is too unreliable to provide the best possible service.

There is a tool smart developers use to give PWAs – and other applications- a performance edge: Cache API.

The Power of PWAs

PWAs are hosted by a website and accessed through a device’s browser. The most obvious benefit is that there’s no download required.

Users simply navigate to the app, grant permission for limited device access, and are granted full access to the app’s features.

That isn’t the only reason for their popularity. As a mobile option, PWAs offer better user experience than responsive mobile sites without the higher cost of standalone apps.

They’re fast, secure, always updated, and have the native look and feel that appeals to users. They can access a growing array of device features.

PWAs also work anywhere. After the first load, users don’t even need to be online.

The app can store information for automatic update when the connection is restored – which is why reliable caching is so important.

Introducing Cache API

Cache API is a system that securely stores requests and responses via JavaScript that can be accessed anytime. It can use service workers to cache network requests so the app is usable offline.

The API also serves as general storage, able to store almost any kind of response without worrying they’ll expire.

Caching things like this decreases traffic and network activity. It boosts the application’s performance, which is a major benefit when user experience weighs so heavily in repeat purchase decisions.

Cache API Vs Browser Cache

It might seem like using Cache API when there’s already a built-in browser cache is a waste of time, but there are good reasons to use Cache API in addition.

First and foremost is control. Developers who choose Cache API can implement custom cache control logic.

They can set priorities for what remains in the cache and what can be purged to make space. The browser cache only purges based on storage requirements.

This feeds into another benefit: reliability. Cache API adds a layer of dependable control that’s missing from even the better modern browsers.

Chrome and Firefox have been working to improve their browser caching, but it still needs improvement. A Facebook study found that only 25% of what they expected to find in the cache were actually there.

As a technical advantage, when users refresh a PWA their browser skips the HTTP cache. Service workers set up with Cache API always intercept requests.

It’s also useful that Cache API can cache multiple requests when the PWA is first run. Even those that haven’t been accessed yet can be stored.

Having these ready speeds up later requests even as the user moves through low signal areas.

Looking At Limitations

Cache API has a few notable limitations. Some browsers require use of https to access the API. Size can be a problem, too, since each browser has its own storage limits that need to be addressed.

Developers can manage this using cache quota usage estimates found through the StorageEstimate API.

Compatibility is another issue. Browser support for PWAs is growing but not consistent, and not all browsers support this feature. That does seem to be changing.

Cache API can be used in Chrome, Opera and Firefox now, and Edge and Safari have reportedly marked it as “In Development”.

Final Thoughts

With a simple API and a little javascript, applications can be given an amazingly functional caching layer that improves their performance while decreasing bandwidth usage.

It benefits users and servers alike. Given these benefits, Cache API should be on the technology short list when it comes to building PWAs.

Orlando Mobile App Development Company

Having a user-centric mobile presence is a critical part of modern digital strategy, and it doesn’t have to break the bank.

Concepta, a leader in Orlando’s mobile development industry, has years of experience working with companies of all sizes.

We’ve created solutions for partners ranging from Kingdom Strollers to Disney themselves.

 To learn more about mobile technology that meets your company’s needs (including your budget), set up a free consultation with one of our experienced developers.

Request a Consultation

Mobile Enterprise Series: Progressive Web Apps

pwas-enterprise-app

For some businesses, progressive web apps (PWAs) are the way to go. They offer a good balance between ROI and customer experience – as long as the project is a good fit.

Establishing a mobile presence isn’t an option anymore.

It’s a requirement for companies that want to stay competitive in an increasingly connected world.

Even small businesses benefit from the increase in traffic that comes from making a good mobile impression. The question of “if” has now shifted to “how”.

A New Take on Mobile

The push for mobile solutions has inspired several different approaches.

Mobile websites are the easiest to set up. A company’s existing web page is simply made responsive to adjust to a more mobile-friendly format which user access through the browser.

This involves rearranging navigation, increasing text size, loading smaller or fewer images, and more.

It’s easier and cheaper than other options, but that simplicity comes at the cost of customer experience.

Native apps provide the best customer experience from a usage angle. They’re downloadable programs independent of the browser.

Because native apps are specific to each device, they can provide the exact use conventions customers expect.

Building for every device can be expensive, though, and customers aren’t always willing to download another app.

Hybrid apps and PWAs exist in the middle ground between these extremes. Hybrid apps are essentially a native “wrapper’ with a web app inside.

The same web app can then be used for different devices.

Progressive web apps take the opposite approach: they’re apps that are hosted on a sponsoring website and accessed through the browser.

There’s nothing to download, but the app can still access some device features to offer a better user experience.

PWA Benefits

PWAs can very nearly match native apps when it comes to user experience. They operate on multiple platforms; any browser that supports PWAs will run them.

As of April 2018 Microsoft is also supporting them, so the list of holdouts is shrinking.

Developing progressive web apps is faster since one app can serve multiple platforms.

Companies have the option to use web developers instead of pricier and more in-demand mobile specialists, so the cost is lower as well.

Maintenance is low relative to other mobile options (besides responsive sites, but those can’t even come close to offering the same level of UX).

Updates can be made centrally and pushed to customers. There’s no need to download updates.

That brings up one of the most appealing benefits of PWAs: the low barrier to adoption.

Users only have to click a link and allow the app to use their device’s features. There’s no download or lengthy setup required.

PWA Limitations

Of course, this isn’t a perfect solution for all use cases.

PWAs don’t have full functionality on all browsers. In those cases they revert into a mobile website with no extra features.

They also can’t access all a device’s features like native apps can.

Battery usage can be significantly high and load times are a bit slower than apps in general.

While PWAs outperform many mobile options, they do have lower performance than native apps.

This is most noticeable with feature-rich applications and graphics or animations where there are lots of adjustable controls .

Weighing the Alternatives

Native apps

Native apps and PWAs share a lot of features: offline access, push notifications, full-screen access, desktop icons, and more.

PWAs have some benefits over native. Pages can be shared via link or bookmarked.

They’re easy to find, accessible by everyone regardless of device, and save on data usage.

In the past limited device usage kept companies from developing PWAs, but now they can access most device features: camera, microphone, location, vibration, screen orientation, and more.

There are some device features that they don’t have, though work is being done on accessing them.

Near-Field Communication, light sensors, magnetoscope, some directional tools, shape detection, and similar functions remain out of reach.

Plus, PWAs by nature can’t usually access things like contacts, calendars, SMS, device settings, phone, and more.

Users don’t like allowing those to websites for privacy reasons.

As mentioned earlier, there’s a reduced performance on feature-heavy or highly graphic apps. Those perform better on native.

Hybrid apps

Hybrid apps and PWAs can be said to be taking opposite approaches: one brings the web to an app and the other puts an app in the web.

Hybrid offers slightly better performance and can mimic OS conventions for a more predictable and familiar user experience.

However, PWAs don’t need wrappers. They come closer to the “write once, run everywhere” philosophy, meaning their development costs are lower.

Both have similar offline capabilities.

Mobile web pages

Progressive web apps are the clear winner here. PWAs offer far more functionality and options to users than mobile pages.

Companies have increased load times by as much as 90% by switching to PWAs.

Making the Call

Mobile strategy, like all digital decisions, should be informed by business needs. PWAs can be developed quickly and on a tight budget.

They are the way to go if a company is fighting “app drop” and needs to encourage adoption.

However, if Apple users are the target market PWAs won’t be the right fit since they won’t run well on that OS.

Orlando Mobile App Development Company

Concepta, one of Orlando’s leading mobile development companies, works with clients of all sizes and budgets.

We know the value of a wide toolkit to help our partners overcome business challenges, grow sales, and improve internal processes.

For some businesses, Concepta recommends progressive web apps (PWAs).

We offer a good balance between ROI and customer experience- as long as the project is a good fit.

Is a PWA the right choice for your company? Schedule your free consultation to take advantage of Concepta’s 12 years of experience in powering digital strategies.

Request a Consultation

Maximize Availability with Progressive Web Apps

progressive web apps

Although consumers are spending more time in apps than ever, the number of new apps they adopt is shrinking. More than 65% of mobile users download less than one app each month. Getting attention for a new app is hard, and only 26.4% of people who do visit the store page go on to download it.

In the past creators have tried to get around this using web apps. Web apps don’t need to be downloaded at all. They’re accessed through a browser, and as such are mostly device agnostic (though each browser has its own quirks that may affect how the web app performs).

Traditional web apps have a lot of pitfalls, however. Performance is noticeably worse than with native or hybrid apps. There aren’t many features available when users are offline or in a low-service area. Even when they are online access to device utilities like the camera or gyroscope is severely limited. Web apps don’t offer nearly the same experience as a native app.

At least, that was the case.

The Web App Revolution

A major change is underway in how the mobile web works. The new breed of web apps- called progressive web apps or PWAs- have more in common with native applications than they do with mobile websites. They offer a broad range of features typically only found in native and hybrid apps without consumers being required to download anything.

Google’s VP of Product Management, Rahul Row-Chowdhury, compared PWAs to the paradigm-changing advent of AJAX some ten years ago, saying, “Progressive Web Apps are that same fundamental shift for the mobile Web.”

PWAs solve a lot of problems for creators. First, they save time and money by allowing developers to focus on one product. Native apps require a separate product for each platform while hybrid apps use platform-specific wrappers to function on different platforms. Progressive web apps just need a browser, so companies are freed from the burden of building and maintaining a handfull of codebases.

Most apps aren’t included in search engine results; prospective users have to visit the app store in order to find them. Creators get around this with the imperfect solution of a “landing page” with a link to the store. That lets them apply the SEO needed to help users find their app, but that adds steps to the process.

The more steps involved in doing something- even something a person is excited about- the less likely the user is to continue. Only 90% of those who download an app will use it, and every additional step knocks out up to 20% of potential users. This is the biggest advantage of progressive web apps. More users complete the app onboarding process because there are dramatically fewer obstacles between them and the content.

PWAs handle offline access (a limitation of traditional web apps) using Service Workers. Service Workers are asynchronous JavaScript files that run in the background of an app. They use APIs to store and retrieve application data in a persistent content stash. Fetch and Cache APIs intercept network requests and meet them using cached resources. This structure supports advanced features like background sync and push notifications. It also boosts mobile performance in low-signal areas or on budget-friendly devices, which broadens the prospective audience.

What Makes a Web app Progressive?

Progressive web apps aim to provide the same experience as native apps, or as close as possible. There’s a list of requirements a PWA has to meet to be considered progressive:

  • Progressive – It’s most important that PWAs take advantage of evolving browser features and device functions to provide a forward-facing experience. They should work on every browser, for every user.
  • App-like feel – PWAs need to be built on the app-shell model with few page refreshed, giving users the feel of an app as opposed to a mobile website.
  • Connectivity Independent – A progressive web app should work in low signal areas and offline.
  • Responsive – No matter how a user accesses it- via tablet, smartphone, etc.- a PWA’s UI needs to fit the device’s form factor.
  • Discoverable – PWAs should be as easy for search engines to find as websites are.
  • Installable – While PWAs don’t need to be downloaded, they should be able to be saved to a device’s homescreen for easy access.
  • Linkable – Like websites, PWAs need to be able to retain their state when shared via link or bookmarked.
  • Re-engageable – Re-engagement should be driven through native features such as push notifications.
  • Safe – Because they’re susceptible to “man-in-the-middle” attacks, PWAs should always be hosted over HTTPS.
  • Fresh – New content should be made immediately available to all users within network coverage, or as soon as they reenter coverage areas.

Development Concerns

Analysts call progressive web apps the app model of the future, but there are still valid concerns with the structure. While PWA components are W3C compliant, they aren’t supported by all browsers when integrated into a web app. This lack of universal support is the main issue limiting their popularity. Fortunately, major browsers like Google Chrome, Firefox, Opera and Samsung Internet already support progressive web apps and Edge has announced it will at some point. Safari is being vague about whether PWA component support is in the cards.

PWAs are more difficult to build properly. Since they’re an evolving format, the number of developers skilled in their creation is limited. That’s a serious problem when accessing device functions is as complex as it is. Progressive web apps can access most (not all) features ignored by their traditional cousins, but getting them to operate smoothly across all browsers is a demanding task. The need for more expertise seems to cause higher development costs per app. The total investment is lower since only one app is needed, though, so paying for a better developer still results in a net lower investment.

Some developers have criticized progressive web apps for not appearing in app stores. This isn’t necessarily a bad thing, however. PWAs are meant to be found through browser searches using SEO, not downloaded through an app store. Publishers are promoting them elsewhere. It’s an entirely different approach to attracting and holding users.

App store absence may not be a valid criticism, but the limitation on social media interactivity is. Plugins such as Facebook Login and Google Login can’t fetch data from apps, so users will have to log in separately. On top of that, major social media players are building their own PWAs. They’re interested in promoting their own options, which makes promoting progressive web apps on social media difficult.

PWAs in Action

Despite the complications of progressive web apps, some big companies have seen enough promise to adopt the technology.

Twitter

Twitter has a healthy user base for their downloadable app, but they wanted to create a responsive mobile presence as well. Developers aimed for a mobile experience that was indistinguishable from their existing native app. Their Twitter Lite Progressive Web App became the default mobile option for Twitter this past April.

In the few months since its release, it seems like Twitter Lite hit the right mark. They’ve experienced a 65% increase in pages per session and a 20% decrease in bounce rate. The Engineering Lead for Twitter Lite, Nicolas Gallagher, revealed another advantage of the app: “The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.”

Lancôme

Lancôme has a spread of small apps for the Android and Apple markets. When mobile traffic to their site passed desktop traffic last year, however, they needed to amp up their mobile presence. A progressive web app seemed like a better choice than competing for downloads.

The Lancôme PWA was released last October. It loads nearly three times faster than the old mobile site. The app is most popular with iOS users, where mobile sessions grew by 53%. Lancôme saw a 17% boost in conversion rates, but what really drove business were the push notifications and reminders. Lancôme was able to remind customers about items left in the shopping cart, and 7% of notifications resulted in a purchase.

AliExpress

E-commerce is a constantly growing field. AliExpress uses a native app for the absolute best user experience. Like many retailers, though, they had a problem with drawing new users. They saw their mobile web presence as a platform for attracting users to their app, and their mobile website was not meeting those needs. It gave users a substandard shopping experience that didn’t represent the brand well.

The AliExpress PWA has been a wild success. Conversion rates for new users has increased by 104%, with 92% conversion rates on Safari. Users across browsers spend 74% more time in the app per session and visit twice as many pages.

Looking Forward

Progressive web apps are still a young technology, but they have a lot of promise. They offer workable solutions for most of the biggest problems facing app development: customer engagement, availability, performance. The drawbacks should be worn down as technology becomes more standard.

Can a dynamic progressive web app work for your company? Concepta has the experienced developers to maximize your mobile performance!
Request a Consultation