[Barcode Plugin] Not working on PWA with iPhone 8
Forge component by OutSystems R&D

Hi team,

Thank you for delivering the high quality on this great plug-in.

I found it seems not working on PWA iPhone8, with iOS 13.3.1 and the latest Personal env.

Do you have any solution idea?


I just followed the typical Jump Start script to make a Product Catalog app.

Then scanned the QR code on the Distribute tab in the Solution Studio.

The app is working well as PWA, EXCEPT QR code scanning. No action will happen even though I clicked the QRCode icon.


(already Disable Web SQL is off. https://success.outsystems.com/Documentation/11/Delivering_Mobile_Apps/Early_Access_-_Distribute_as_a_progressive_web_app_(PWA)?utm_source=ost-outsystems%20tools&utm_medium=ost-servicestudio&utm_campaign=ost-docrouter&utm_content=ost-helpid-30231&utm_term=ost-contextualhelp#PWA_in_iOS)


ProductCatalog.oap

Solution

Hey Akira,

QR code scanner is not yet available for PWA. We're working on having a PWA compatible version soon, together with a location component.

Regarding PWA, you do not need to generate an IPA file. Those are two distribution channels. You can enable PWA distribution mode without generating a native build.

Regards,

Ricardo Alves

Ricardo Vaz Alves wrote:

Hey Akira,

QR code scanner is not yet available for PWA. We're working on having a PWA compatible version soon, together with a location component.

Regarding PWA, you do not need to generate an IPA file. Those are two distribution channels. You can enable PWA distribution mode without generating a native build.

Regards,

Ricardo Alves

 

Hi Ricardo, 

I was just wondering if there is an update regarding when the PWA-compatible version of the barcode plugin will be released?

Regards,

Alfio Esposito

mvp_badge
MVP

Hi Akira,


Are you sure your IPA generated correctly.
Could you please try again to regenerate the IPA.

Thanks,

Salman

Hi Salman! 

Thanks for your reply.

Just to be clear, you mean I need to build an ipa file even it’s a test as PWA, correct?

The right QR code is the uri to use the app as PWA, and seems it doesn't need to build ipa file.image.png

Thanks and Regards,

Solution

Hey Akira,

QR code scanner is not yet available for PWA. We're working on having a PWA compatible version soon, together with a location component.

Regarding PWA, you do not need to generate an IPA file. Those are two distribution channels. You can enable PWA distribution mode without generating a native build.

Regards,

Ricardo Alves

Ricardo Vaz Alves wrote:

Hey Akira,

QR code scanner is not yet available for PWA. We're working on having a PWA compatible version soon, together with a location component.

Regarding PWA, you do not need to generate an IPA file. Those are two distribution channels. You can enable PWA distribution mode without generating a native build.

Regards,

Ricardo Alves

 

Hi Ricardo, 

I was just wondering if there is an update regarding when the PWA-compatible version of the barcode plugin will be released?

Regards,

Alfio Esposito

Hi Ricardo,

Thank you for this update. It's clear!


Best Regards,

Akira

Hi Alfio,

We were able to change the location plugin to work with PWAs, but unfortunately we ended up with some technical challenges with this one. We had some success with QR codes in some devices (using https://github.com/zxing-js) but not barcodes. We'll probably have another go at it next year. In the meantime an alternative is to go a bit more low-level and explore this or other JS alternatives, use a service for that, or check out other forge components that let you do this on the client or on the server side. 

Cheers,
Tiago Simões

I have been looking for answers around internet, forums, community discussions, etc, to summarize what is Progressive Web App:

1.

In short, progressive web app (PWA) is a mobile app that runs on web browser that provides a native-like experience without having to distribute a native mobile app. Outsystems’s PWA generally refers to as a distribution mode for mobile apps.

https://success.outsystems.com/Documentation/11/Delivering_Mobile_Apps/Distribute_as_a_progressive_web_app

2.

To install PWA on mobile device is just add the icon on the home screen that access to the url address of the mobile app.

Android

iOS

3.

Why the PWA works is because the mobile app on outsystems is essentially web pages and the entire app can be access by visiting the homepage url. This is the same way as how we access the mobiles apps that we developed, using the Outsystems Now (native) mobile app, by entering the url address of the mobile app home page via “Access with URL” (or optionally access via scan QR code generated from Outsystems Studios Distribution tab).

Unfortunately Outsystems Now is taken out of our local store. Essentially PWA works about the same way as like  Outsystems Now.

https://www.outsystems.com/forums/discussion/62923/outsystems-now-discontinued/

4.

“PWA is becoming too big to ignore.” While PWA is not a new thing and we heard it a year or so ago, there are a number of articles that talk about PWA coming of age.

https://www.outsystems.com/blog/posts/how-to-build-progressive-web-apps/

https://www.outsystems.com/blog/posts/progressive-web-apps-pwa/

5.

While it may be true for outsystems PWA to work is just a flip of a toggle switch. This is true for if the mobile app we develop is purely just browser based, transactional, or data driven application, that consist of a couple web UIs, forms, etc without much complicating forge components. When flipping the switch at the distribution tab, Outsystems will automatically generate the needed resources and turn your app into a PWA.

https://www.outsystems.com/blog/posts/how-to-build-progressive-web-apps/

It is mentioned that Like native apps, PWAs can work offline, send push notifications, and access device hardware, such as cameras or GPS. This allows you to create user experiences similar to native apps on mobile and desktop devices. PWAs are built using standard web technologies such as HTML, CSS, and JavaScript.

6.

Not all forge components support PWA. If your mobile app is using one, while it generally may work (with all the web contents loaded correctly) but talking about functionality some may not work.

As of now, Outsystems official support is for this 2 components.

https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/Mobile_Plugins?_gl=1*40x66j*_ga*MTgxMDQ2ODMyMi4xNjE4OTQ3MTIy*_ga_ZD4DTMHWR2*MTYxODk5MDQxOS43LjEuMTYxODk5MzI3Mi40Nw..

Especially if your mobile app uses barcode scanner (Outsystems Barcode Plugin) you have an issue right now.

To understand why Cordova does not work, lets go backwards and visit what Cordova is about. Cordova is remnant of the now defunct Phonegap. As the mobile market of iOS and Android emerges, the idea of having cross functional platform to minimize concurrent/consecutive development efforts is founded. Phonegap is meant to be this bridging gap between Android/iOS. Independent of the mobile OS. Phonegap is browser based and works because of its ability to access native functionality of the mobile OS, such as GPS, Camera, sensors, audios, mic etc. Throughout the years, mobile OS itself evolves due to stringent privacy issues, blocking access and permissions which cross platforms have difficulties to breaking them. I have seen phonegap components working, but sometime later, it just stopped working, perhaps due to permissions access issue.

7.

While Outsystems promises to update its components to support PWA (at the point of the article dated Feb 2021, hopefully by end 2021 we will see a number of PWA supported components).

Even for Outsystems forge Camera Plugin, ChooseGallery is a functionality only accessible in native app, not in PWA. (perhaps due to difficulty by passing access restriction)

Workaround is available for example a common component for Barcode/QR code scanner would be as follows. Because QR code scanner is such a common functionality in mobile apps, there number of contributors who made this work for PWA. Unfortunately for Outsystems official forge component Barcode Plugin, this will take a while before being PWA supported, meanwhile we can use this alternative.

https://www.outsystems.com/forge/Component_Documentation.aspx?ProjectId=8160&ProjectName=qr-code-scanner

Another workaround is using ZXing Service which use ZXingLib, but may not always work.

https://www.outsystems.com/forums/discussion/55755/zxinlib-qr-decoder-does-not-always-work/

https://www.outsystems.com/forums/discussion/57619/barcode-plugin-requirements-for-pwa/

8.

I have attached an OWA mobile app configured for PWA to demonstrate the Outsystems Barcode Plugin alternative


Tested in iOS and Android

The Outsystems Barcode Plugin tested does not work in PWA. ZXing Plugin also does not work.

The Outsystems Camera Plugin, only the Take Picture works, as it prompts camera access properly.

This article is meant as a discussion, hopefully somebody can give some enlightenment, while i give credits to all the above originators of the mentioned post.

ContactTracing.oap

Correction point 3. (or optionally access via scan QR code generated from Outsystems Studios Distribution tab). - should be qr code generated when running the mobile app emulating on a browser.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.