Add progressive web app play store/app store

Add progressive web app play store/app store

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?

Related:  Preference Activity on Preference Click Listener

Solutions/Answers:

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….

Solution 4:

You can easily package your PWA as ionic/Cordova app.

  1. No way to achieve web push on ios for now. Use Cordova.
  2. Background tracking is not possible. Consider a mix of periodic push notification & background sync to see if it’s of any help.
  3. On android all that the user needs to do is click on always the first time the link opens dont remember how its on ios.
  4. Push notifications allow you to specify the URL.

You can read this article to understand a bit more on how i have mixed cordova with PWA.

https://medium.com/awebdeveloper/pwa-is-future-of-mobile-how-to-tame-it-855dd42df0ec

References