Add progressive web app play store/app store

Question

Our PWA is completely build using new Angular. We have implemented all optimizations such as tree shaking, uglify, AOT, service worker, etc. It works very well and behaves as the mobile app. If users add it to their home screen it's hard to tell difference.

We are running into few big limitations with PWA:

• all notifications (crucial) for our business must be sent as SMS. This obviously has huge cost benefit. We did look into using "web" push notification on the Android although we do have many iOS users as well .
• We need ability to "track" geo location in "background" and HTML5 Geolocation API does not cut it.
• currently every time user navigates to the URL (send as SMS reminder) it tends to open new tab in the browser (depends on the phone). Even if user actually add the app into their home screen. This obviously increase the loading time and creates too many tabs. We would rather bring app in the foreground and navigate to particular route (or use push notifications)
• some of our active users can easily receive 10 notifications per day and they need easy way to navigate into the app.

We looked into NativeScript and Ionic. Both provides an ability to develop Angular app but they all "seems" to designed around writing apps specifically for mobile (...or starting from scratch with them).

I might have missed something but what would be the best practise when we just want to put wrapper around our progressive web app so it can be installed as "hybrid" app. The app simply navigates to our public URL, it supports service workers and also allows us to access some native functions.

I understand I might be missing the point of PWA here but writing another "native" app is not really option for us.

What would be the best way to expose our progressive web as an app in Google Play Store or Apple App Store?

Solution 1

A great place to get started with a Hosted Web App is PWABuilder.com. This tool can be used online or from the CLI. Part of it creates a service worker and stuff, but it also creates the Cordova projects for Android and iOS.

I have used PWABuilder just to create a starting point. Eventually combining the generated iOS and Android projects into one for iOS, Android and Windows. Because it is Cordova you can use plugins as well.

Solution 2

Update 2019

Now Google is open to PWA apps on Google Playstore,hence one could use tools like PWA2APK inorder to convert existing PWA's to Google Playstore ready Apps. The Android APK (PWApk) generated by the tool can be uploaded to Playstore.

This tool has been tweeted out by Alex Russel, one of the inventors of PWA.

https://twitter.com/slightlylate/status/1093681791297187840

Solution 3

you might want to search for deep linking.

https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen#android_intent_filters

The New and Improved Add to Home screen

Paul Kinlan By Paul Kinlan Paul is a Developer Advocate Chrome first introduced the "Add to Home screen" banners in Chrome 42. This was a big step for the web as it provided users the ability to easily keep a favorite site on their home screen, much like native apps. We've heard from developers like Alibaba that users re-engage 4 times more often with their site added to home screen. We've also seen that tuning the heuristics for add to home screen to prompt sooner yields to 48% more installs.

We are happy to share that the team has worked on an improved add to home screen experience that makes web apps first-class citizens of Android. Instead of simply being a shortcut icon, web apps will now be integrated with Android. This means that users that add a PWA to their home screen will be able to find it anywhere they see other apps (e.g. in the app drawer or searching for apps), and open the site from intents. We see this as the first step among a number of improvements to come and intend to make it the default experience for add to home screen in the coming months.

The improved add to home screen experience is already available in Chrome Canary and will be rolling out to Chrome 57 beta over the next few weeks.

Note: it has been rolled to all users on Chrome's stable channel as of Chrome 59. To test your site, visit your PWA. You can start install from the three dot menu > "Add to Home screen" or through the add to home screen banner.

This new experience is a huge improvement over the original version of add to home screen, but there are some differences between these installed Progressive Web Apps and Android Apps.

Updating your app's icon and name You now have the ability to update your Progressive Web App's icon and name and have it reflected to the user. Changing your icon or name in the manifest will update the icon on the home screen after the user has subsequently opened the site.

Android Intent Filters When a Progressive Web App is installed via this new improved add to home screen experience it will be registered with the system to be a target for the URL space for its domain. This means that the when a user clicks on a link that is contained within the scope of your Progressive Web App, your app will be opened instead of Chrome opening with your PWA running.

When you install a Progressive Web App, we look at your Web App Manifest and other meta-data and create an APK (Android Package Kit) that is installed on to the user's device, which may take a short moment the first time any user installs your Web App.

Note: Whenever the Web App Manifest changes we need to generate a new APK, it is thus not a good idea to have frequently updating manifests. It is especially important to ensure that you don't use user specific identifiers in the manifest (such as a custom start_url per user) as this generate an unique APK which means that your install time will be a lot longer than you expect. In that APK we define an Android Intent Filter that defines when your web application should be opened. For example, to open the https://airhorner.com app whenever that link is clicked, Chrome would create the following .

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:scheme="https"
    android:host="airhorner.com"
    android:pathPrefix="/" />
</intent-filter>

This is incredibly powerful, but not very flexible. This simply says when a link that is clicked or intercepted in Android for the entire domain of https://airhorner.com/ open the App.

But what if you don't want your PWA to open for all paths on your domain? That is where the scope web app manifest property comes in to play. The scope is a....

Comments

[Parth Ghiya]

create a plain cordova + Angular project ..!!!

[Adam Kundrat]

With Cordova, I noticed it's always about pointing to "local" folder where the HTML/JS/css content is. Pointing to remote URL is not going to cause any big problems? Is it recommended practise?

[Felix josemon]

PWA2APK tool is worth checking out. It works using TWA (Trusted Web Activities) and can convert any PWA's to APK file, which can be uploaded to Google Playstore.

[Adam Kundrat]

This is great help, thank you!! I also just recently discovered new flag on Android (enable-improved-a2hs) that allows the PWA to be installed as standard app within the android: developers.google.com/web/updates/2017/02/…