How to Test Progressive Web Apps on iOS devices.

Posted: August 2nd, 2019Author:

Starting with iOS version 11.3, Apple shipped basic support for PWA on iPhones and iPads, such as service workers and app manifest files. However, only some of the PWA features are supported right now on iOS. In future iOS updates (version 13.0), we expect much better support of PWA features.

Requirements to Run as a Progressive Web App on iOS

  • Website served fully via HTTPS
  • A Web App Manifest for the website with a name or short_name property
  • Service Worker registered with a fetch event handler
  • Display property set to standalone, fullscreen, and minimal-ui

Using Appery.io, you don’t need to worry about these settings as the Appery.io PWA feature supports all of this “out of the box.” For more information please visit our documentation on the feature.

Steps to Install and Test PWAs on iOS Devices

For iOS devices, PWA currently works only on Safari Browsers. Browsers like Chrome for iOS, Firefox Focus for iOS, Dolphin Ghostery, Opera Mini, and Adblock Browser don’t support PWA at the moment. Here are the steps.

  1. Make sure that you have cleared all browsing data.
  2. Visit the website that you have published using the Appery.io PWA feature.
  3. Tap the Share button (at the browser options menu).
  4. From the options, tap the Add to Home Screen option. You will notice an icon of the website or screenshot of the website added to your device home screen instantly.

    Add to Home Screen

  5. Tap the icon from Home Screen, after which the Progressive Web App of your website will be loaded. (You won’t see the Splash Screen and background color which you set upon Manifest right now, as both are not supported on iOS although we are working on bringing such support to Appery.io PWA on iOS.)
  6. In the PWA navigate through some of the web pages you like, then disconnect the Internet on your iOS device, and then close the web app.
  7. After that tap the web app icon again. You will notice that all the pages that you haven’t viewed will be shown by an Offline page that you set up in the service worker within the PWA App Settings.

There are a few limitations, like limited cache capacity (50MB) on iOS right now, but there’s enough for most sites to at least cache placeholder images along with the necessary HTML, CSS and JavaScript to drive a reasonable offline experience. If you need more storage you can build an intelligent caching system to leverage IndexedDB. This can give you up to 500MB of additional storage, which is available to service workers. Check out our tutorial on how to use IndexedDB in Appery.io.

Changes to Appery.io Tester App for iOS

Posted: March 29th, 2019Author:

Our Appery.io Tester App for iOS has been updated and now includes the new Cordova version.

Release Highlights:

  • Cordova iOS 4.5.5
  • Added Ionic 3 support
  • fix minor bugs

Update or re-install Appery.io Tester App on your device. In our upcoming Appery.io release, we will update both Android and iOS Cordova platforms versions.

What’s in the March 2019 Platform Update (Psssst… PWAs)

Posted: March 6th, 2019Author:

Our March platform update rolls out on March 10. It will be focused on support for progressive web apps (PWAs).

PWAs are a new software development technology. Like other hybrid solutions (Cordova, Electron, etc), PWAs work seamlessly on desktop, mobile, and tablets using a single source codebase.

“Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.” © Wikipedia

If you are still using a classic hybrid application, you have to  make a build for every platform you want to support and then distribute your application to an app market like Google Play or App Store. That means you need to register a developer account, buy platform-specific hardware and software, build and test your application for every platform, and then publish your application to the market. Once done, your application can be removed from the application market by a vendor if it doesn’t pass their review processes.

A PWA has the advantage that you are the only person who manages your application. All you need to publish your application is to be the host. If you are an Appery.io customer, you can do this in just a few clicks. Below, we describe how to do this.

Here is a checklist from the Google Developers site that walks you through how to convert existing apps to PWAs. With Appery.io, it’s not necessary to do this, but this is a helpful resource just in case.

We have added a PWA option for all project types supported by Appery.io. You don’t need to change any code in your existing app to make it a PWA.

Just open your app in the AppBuilder and configure the PWA settings like application name, icon, background color, etc.

The next step would be publishing your app.

PWA App Publishing.

Now, anyone who opens your app published in a web browser on a mobile device will be able to add it to the launch screen without installing it from the application market.

A Look Ahead: Ionic 3 App Builder Version in Appery.io

Posted: June 1st, 2018Author:

 

This summer we will introduce a beta version of Ionic 3 App Builder in Appery.io! This will be a huge step forward for us and we would like to ask You, our customers, to help us test this mobile app development framework version in our platform.

Ionic 3 will be compatible with Angular 4 and comes with many significant performance, usability, and feature improvements over past versions.

This beta version will include the Ionic 3 components and only basic Appery.io platform features. (More details about specific features will be announced in a follow-up to this post.)

Thanks for staying with us all this time, and we hope You will like our new Ionic 3 version.

API Express Now Available as a Standalone Version

Posted: March 23rd, 2018Author:

Today we are introducing a new way for enterprise customers to get the benefits of using our API Express backend services.

API Express allows enterprises to quickly “mobilize” existing systems by making it easier to add RESTful APIs so that theses systems can easily be accessed from other applications including mobile or desktop apps. This enables the modernization of legacy systems without re-writing them. This is highly beneficial as many enterprises are still constrained by legacy applications that are not mobile friendly.

With API Express Standalone, enterprises are now free to deploy this service behind their own firewall, while still taking advantage of the rest of the Appery.io platform in the cloud. Enterprise customers will now be able to install API Express on demand using a Docker container. For more details about the configuration process and about installing see our documentation.

Amazon AWS Updates for the Appery.io Development Platform

Posted: January 2nd, 2018Author:

Heads up! As the new year starts, we will have to take down the development platform (App Builder) for two maintenance windows (times US Pacific).

BeginEnd
Jan. 2, 11pmJan. 3, 5am
Jan. 5, 1amJan. 5, 5am

This is all due to Amazon AWS updates that have to be performed. We will try to minimize the Appery.io development platform’s downtime as much as we can, but the downtime could last through the whole window for each window. Remember, though, all our Backend Services will continue to work without interruption during this maintenance.

How to Use Geolocation in Your Mobile App

Posted: May 30th, 2017Author:

geolacation_map

 

Geolocation is one of the most widely used APIs in mobile apps today. From weather to Uber and Lyft, the device location is crucial information and many APIs use it to determine what services and products are available in a given location. When building a mobile app in Appery.io, using the Geolocation API is simple. Apache Cordova library is built-in in every new Appery.io app. Invoking Geolocation will return the latitude, longitude (and other) information which can then be passed to any REST API. The following two short videos show how to use and invoke Geolocation in an Ionic and jQuery Mobile apps:

Looking for more videos like that? Check out our YouTube channel for many more videos.

How to Validate an Email Field in a jQuery Mobile App Using a Regular Expression

Posted: September 21st, 2016Author:

pablo (45)

Validating an email entered on a form is one of the most fundamental requirements in any mobile app. In this blog post, we are going to show you how to validate an email input field using a regular expression. This blog post is a follow-up to How to Add JavaScript Form Validation to a Mobile App post.

Validating an email input field using a regular expression is very simple. Here is the code to perform email validation.

You can quickly add this code to any app inside a JavaScript file and reuse. Looking for more examples and how-tos? Check out YouTube channel for large number of short videos.

How to Add JavaScript Form Validation to a Mobile App

Posted: May 12th, 2016Author:

Validating user input is one of the most important requirements in a mobile app. The most common approach of form validation requires that you check the form fields before the form is submitted; this is to make sure that the required information is supplied. Today we will show you how you can validate the input fields in your app before submitting the information to the Appery.io Database.

In this example the app will have following simple design:

Form App design

Form app design

Read the rest of this entry »

How to Play a Custom Sound in Your Mobile App

Posted: October 15th, 2015Author:

Audio_with_JS

To make your app more interactive and stand out from the competition, one nice option is to play a nice sound file in the background when an event occurs.

You can easily add a custom sound to an app you are building in Appery.io and play it using the standard HTML5 Audio component. As you can always customize any app with custom JavaScript, you can start and stop playing the sound via JavaScript. I’m going to show you how to do this in your Appery.io app.
Read the rest of this entry »