search

dwyl / learn-progressive-web-apps

:green_book: Learn the ancient art of building websites/apps progressively for all devices!
20 stars 5 forks source link

Push Notifications #12

Open nelsonic opened 8 years ago

nelsonic commented 8 years ago

https://developers.google.com/web/fundamentals/getting-started/push-notifications/

Cleop commented 7 years ago

So you want to build a Progressive Web App?

Before you do, be aware that there are 3 types of mobile apps: Progressive Web Apps, Native Apps and Hybrid Apps.

To learn about how they work and the pros and cons of all 3 (including about notifications), watch this concise but clear 6 min video: https://www.youtube.com/watch?v=pYV9FicfRgY

Notifications

When dealing with notifications Progressive Web Apps can send:

Web apps cannot currently send:

Keyword: badge notifications are the red circles on app icons like this:

So what does this mean?

As of May 2017 47% of UK mobile users use Android devices. But what if you are concerned about the large share of the market on iOS?

What alternative means are there for getting push notifications on all mobile devices?

Native Apps Native apps can perform all kinds of notifications. However they bring with them other drawbacks that drastically impact time scales/scope:

Due to the time it takes to write an app in 3 separate languages, native apps are not a quick build for an MVP.

Hybrid Apps

Hybrid apps use middleware APIs, middleware APIs translate to be able to use the native APIs that a regular Progressive Web App wouldn't be able to access.

PhoneGap is a popular middleware, it is free for open repos upto 50MB in size. Here is the PhoneGap documentation on push notifications: http://docs.phonegap.com/develop/push-notifications/

Information on achieving Android push notifications: APIs required:

Further reading on push notifications: http://stackoverflow.com/questions/9156099/push-notification-facility-for-mobile-web-app https://developer.mozilla.org/en/docs/Web/API/Push_API https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/ https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/ https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API https://auth0.com/blog/introduction-to-progressive-web-apps-push-notifications-part-3/

Pushover does push notifications for web apps both on Android and iOS. However to achieve this each app user has to install their app and pay $4.99 for the privilege of doing so... a blocker me thinks! 😞

ronanyeah commented 7 years ago

@Cleop I LOVE my pure JS implementation of push notifications (which is largely a theft and rewrite of the source code of this) but it is not a simple process. There's the file you linked to, plus the zany front end code, and the service worker. And you have to make sure that user has given you permission. And after all that you still can't do this on Safari due to the lack of service worker support!!! So yeah, super cool, but not quite 'plug and play'.... :smile:

Cleop commented 7 years ago

@ronanyeah thanks so much for fleshing out your implementation a little, really helpful!

nelsonic commented 6 years ago

visiting: https://www.plusacumen.org/courses/introduction-human-centered-design image " Powered by PushCrew"