PWA feature v1

[srenault-meeds]

Rationale

Meeds Hubs can be accessed using mobile browser. Fully responsive, the platform provides a mobile experience to its users.

However, end-users and market request to get an app to:

• list the app in the mobile stores
• receive push notifications
• ease the access to the platform (instead of leaving opened a browser tab)

Providing a native app came as a reference for a long time to reach these output. Yet, it requires:

• presence on both platform (iOS and Android). Thus, it duplicates the development efforts and therefore, we need different skill sets
• maintenability versus devices' versions

Progressive Web Apps (PWA) has emerged the last few years and it has been improved a lot to answer these concerns without losing native apps advantages:

• performance
• user experience
• push notifications
• store listing
• offline functionalities

Based on different reading, including this one

1. Functional Requirements

Top User Stories

#### Installing the app from a browser access ❓ Why?

This is one of the key option provided by PWA. It eases the process for users to add the app without looking for it. And product teams like it as it eases the process to reach users.

You share a link somewhere on the web The user clicks to it, starts using it He is invited to install the app He receives notifications and maybe he will come back see the product again

💡 What?

When accessing the platform, and once logged in, suggest to install the app

Option still possible from the browser settings if needed

Same option can be proposed using desktop browser

Once installed, it is listed on the device as any other app

From the user settings, a user can scan a QR code from his user settings. Doing it install the app directly

#### Branding ❓ Why?

Theme, colors, logo, tagline can be added by administrators to make the platform identifiable for its community and users It is highly expected by community leader to inheritate these items when installing the app Users can also easily recognize their platform thanks to this

💡 What?

• Branding Favicon is used to create the app logo once installed
• Branding Mobile Name is used to label the app in the app list on the device (item to add on branding administration)

#### Notifications ❓ Why?

• Getting an app without receiving notifications is not relevant
• Indeed, notifications and push messages ensure users can get notified when needed, based on its preferences

💡 What? -A new channel for notification is created to enable users to set their preferences "Mobile Notifications"

• Notification can be sent automatically to help the user accept

• Notifications are sent 

• Notifications badge on device

🧐 Questions

We need to make sure notifications can be received even when the platform is provided in a secured and internal network (not public web) Precision: no use of google services like firebase is a must-have

#### User experience / Access to the platform ❓ Why?

• Experience between mobile browser usage and PWA must be the same

💡 What?

• Make sure we can use the platform when using the PWA App
• Performance, access to options, to features must be consistent and checked

More information here

Impacts

Gamification

NA

Notifications

• Notifications and push using PWA technology

Analytics

• Installation of the app (with device OS identification)

Unified Search

NA

2. Technical Requirements

• TODO: Service Workers caching to enable when PWA installed app only
• TODO: Make JS œ CSS served with an id identified by its MD5 hash (determined when retrieved first time) instead of a common Asset version
• TODO: Change images caching for 1 year instead of 3 days
• TODO: enable again the portlets content caching and Fetch caching with a background sync (Define an API fetchAndSync that can re-execute the .then next the fetch periodically to enable auto refreshing)

Expected Volume & Performance

The browser caches storage will be used to offer offline feature. Thus a browser caches consumption has to be monitored and cleaned when possible in order to decrease storage consumption. The Browser navigation performances shouldn't be affected by PWA apps and offline feature, thus the service worker isn't expected to be used in a browser mode.

Security

N/A

Extensibility

The Manifest has to be dynamic and should inherit its properties from Branding Options and Public site as made on Deed Hub Card characteristics synchronization. Each DAO Member has to be able to define its own Manifest by extension.

Configurability

Property Name	Default Value	Functional Behaviour
pwa.backgroundSynchronization.period	60 seconds	A property has to be possible to set in order to allow chossing PWA Background Synchronization periodicity, value in seconds

Upgradability

N/A

Existing Features

The existing features shouldn't be affected by the PWA feature which will allow to install applications in multiple type of devices without changing existing features.

Feature Flags

Property Name	Default Value	Target Audience	Functional Behaviour
pwa	true	ALL	This flag will allow to enabled/disable PWA features. Use full especially to test the feature on production

Other Non Functional Requirements

The portlets rendering has to change to use REST Endpoint in order to allow easily to handle offline mode of applications. This endpoint has to be available in each portlet Web Application.

3. Software Architecture

Knowing that this new feature will rely on previously existing feature, wome change will be brought again into product from previous commits:

• https://github.com/Meeds-io/platform-ui/pull/170
• https://github.com/Meeds-io/gatein-portal/pull/90
• https://github.com/Meeds-io/social/pull/386
• https://github.com/Meeds-io/gamification/pull/86
• https://github.com/Meeds-io/kudos/pull/45
• https://github.com/Meeds-io/perk-store/pull/24
• https://github.com/Meeds-io/wallet/pull/31
• https://github.com/Meeds-io/app-center/pull/174
• https://github.com/Meeds-io/meeds/pull/47

Security

N/A

Access

The offline mode has to be offered in applications by the new Page Layout Framework design and not application by application. Thus the fetch API will be polyfilled in order to add more features about background synchronization and periodic updates. A service worker has to be added in order to manage all types of content:

• I18N resource bundles caching
• Images
• CSS
• JS
• HTML

• REST calls

  The JS & CSS handling has to evolve to optimizing caching of resources. In fact, currently, when passing from a CI/CD version to another, all the JS & CSS & I18N resources are reloaded systematically. To avoid this and enahnce static resources caching, the Resources fetching has to evolve in order to retrieve the content using its MD5 content in URLs instead of a global assets version parameter.

Services & processing

The web notification channel or push notifications from Notification Service (will depend on Needed Fucntional Behavior) may be used in order to periodically retrieve the notifications to display in Application Badge (exactly same as Web Notif Badge by example) and the push/desktop notification content (same Image and content as the web notification by example). The same REST endpoint of Web notifications can be used this way to ensure the Background synchronization, even when the application isn't running.

Data and persistence

N/A

Clustering

N/A

Multitenancy

N/A

Integrations

N/A

Migration strategy

N/A

5. Annexes

• Reasoning that explain the technical choices
• Impacts
• References

[rdenarie]

Hello If we add a new channel for "Browser notifications", what about "Push Notifications" channel ? Should we remove it ? keep it ? If we keep it, in which case it will be used ? As I understand, even you install from the playstore, you install the PWA, right ? So you will have "browser notifications".

If we remove "Push notif", for "Browser notif", it seems to be a simple "replacement", right ?

[srenault-meeds]

Yes indeed, this has to be studied. I didn't add any reference to push notif as we don't provide it with Meeds. Still, it is a good question

[rdenarie]

I see 2 options :

• bring push notif in meeds, and transform it in browser notif
• create a new browser notif, and drop push notif

You're right, to study

[srenault-meeds]

Will be worked later for now:

#### Usage of service worker ❓ Why?

• To enable offline access to platform and its content

💡 What?

• Provide a way so users can access the platform depending on their cache
• Once connected, their actions are updated

#### Installing the app from a store ❓ Why?

• Better audience reach & visibility. Users usually looks for an app using app stores.

💡 What?

• Google created the PWA technology. Thus, their playstore is PWA-friendly
• Process is the same: submit the app, pass all the requirements, publish the solution
• iOS is know as more restricted BUT change is coming and a tool like PWA builder can help us publishing our app to the App store. This tool can be used BTW to publish to any other app store.

Informations here

🧐 Questions If using different hubs, then how to manage it? Suggested answer for now:

• No access to multi platform for now
• The option to install the app from the browser must answer these concerns

[srenault-meeds]

@margondicco to check please :)

[margondicco]

Hello ok for me

[boubaker]

IMO, no need to remove existing "Push Notifications" channel, we can replace it to be used even in Mobile App. We may need to support both type of notifications for a while until we replace completely the old Mobile Push Notifications with PWA Push Notifications coupled with Background Synchronization API

[boubaker]

For the record and a possible code copying, the previous PRs to introduce PWA with its Manifest file and Service wokers on 6.1:

• https://github.com/Meeds-io/platform-ui/pull/170
• https://github.com/Meeds-io/gatein-portal/pull/90
• https://github.com/Meeds-io/social/pull/386
• https://github.com/Meeds-io/social/pull/390/files
• https://github.com/Meeds-io/gamification/pull/86
• https://github.com/Meeds-io/kudos/pull/45
• https://github.com/Meeds-io/perk-store/pull/24
• https://github.com/Meeds-io/wallet/pull/31
• https://github.com/Meeds-io/app-center/pull/174
• https://github.com/Meeds-io/meeds/pull/47

Which was removed progressively in 6.5 since the feature wasn't enabled since a while.

Those PRs allow to have an offline feature and installable app but not all of allowed features in PWA (See below for features overview)

[boubaker]

Ready for tech review by DAO Members (eXo: @rdenarie )