How to Transform a Web App into a Mobile App with SecurePWA
Learn how to build a Secure PWA (progressive web app) using Appdome. With Appdome SecurePWA™, anyone can build an Android and iOS app from any web app – in seconds without code or coding. The only thing you need to create a mobile app is a reachable URL of any website. Appdome’s Secure Progressive Web App converts any website, web app or cloud app into a secure mobile apps that runs on any Android or iOS device.
This Knowledge Base article explains how developers or non-developers can build a secure Progressive Web App (PWA) in just a few minutes, without writing a single line of code.
What is a Progressive Web App (PWA)?
TechTarget defines a progressive web app (PWA) as a website that looks and behaves as if it is a mobile app. According to freecodecamp, Wikipedia and many other sources, PWAs deliver great performance and address key functional enhancements missing from traditional hybrid apps, such as offline access, push notifications, and access device sensors and other native OS functions. These all contribute to delivering mobile users a richer mobile experience similar to natively built apps. The benefits are summarized below:
Speed: PWAs deliver snappier experiences, faster page loads, and overall better performance than their hybrid/web app cousins. From the moment a user downloads an app to the moment they start interacting with it, the performance and responsiveness of the UI are excellent. Because PWAs have robust data caching capabilities, pages loads and re-loads are much faster, and content streams to the UI instantaneously. Even app restarts occur faster, often without any network delay.
Integrated user experience: PWAs feel and behave like native apps. They sit in a user’s home screen, send push notifications like native apps, support persistent offline access, and can access more native OS functions and hardware elements than hybrid web apps or other non-native apps. The combination of these enhancements makes the overall user experience more seamless and integrated.
Reliable experience: With the help of service workers, PWAs can reliably render UI elements on a user’s screen even when the network has failed.
Engaging: Push notifications enable high levels of user engagement and interactivity
About Appdome SecurePWA
Appdome SecurePWA is a no-code mobile development tool that enables anyone to build secure Android and iOS progressive web apps (PWAs) that run on iOS, Android or cross-platform – instantly, with no code or coding. The only requirement needed to create a Secure PWA is the URL of any existing website, web app, or cloud app. Developers or non-developers use Appdome’s ‘click to build’ service to build a PWA from scratch instantly and also add a wide variety of mobile security, SDKs, and APIs to their newly created Android and iOS app within the same workflow.
The end result is a brand new iOS, Android or cross-platform app built entirely from scratch, which contains the customer or developer’s chosen security model – all in minutes. Customers select their choice of Appdome mobile app security features and build their custom security model directly into the app – all within the same no-code workflow.
How to Convert Any Website Into a Secure Progressive Web App (PWA)
Follow these step-by-step instructions to convert any website into a PWA.
From the Add App tab, Select Create SecurePWA™
Enter the website address (please validate that the website address is correct and reachable).
Choose your App Name
Choose the App platform: iOS, Android or both
For the iOS platform – upload the Provisioning Profile.
(optional) Add an icon (if you want to replace the default generated icon)
(optional) Favicon Settings: add a favicon and adjust its size and position
(optional) Dev settings – configure the app version and version code
SiteTrust – (included by default) protects non-public resources by restricting access/navigation to the home domain only.
Secure Download (included by default) – securely download, store, and share files with other apps.
Secure Upload (included by default) – securely upload content to the web service.
Local Notifications (included by default) – present alerts and notifications sent by the web service natively
(optional) Authentication domain – To enable access to protected resources, specify a URL to serve as the entry point to your authentication flow. This can be an IP address, a company portal, or an authentication cloud service.
(optional) Add Biometric Authentication such as Fingerprint, FaceID, and Pincode to your app.
(optional) Enterprise SSO – securely store, cache, and share credentials between protected apps (for shared authentication state between apps)
In-App Navigation (included by default) – natively navigate between web services and content
(optional) Use Nav Button – Add a navigation button (home button)
Click Convert To App
Congratulations! You now have converted your website to a progressive web app. You can find your PWA in your Appdome account (left navigation menu) with all the other app binaries that you’ve previously added to your account.
After Building Your PWA
After you have converted your website to a PWA, you need to move your PWA through the Appdome workflow. Just like with any other app that you build and secure using Appdome, click on the newly created PWA in your account, then select the services and security features you wish to implement in your PWA. Then click Build My App.
The minimum set of services required to secure your PWA is ONEShield by Appdome. (Appdome’s no-code App shielding/hardening solution). ONEShield prevents tampering, malicious reverse engineering, debugging and any other unauthorized changes to your new PWA. After building ONEShield into your app, you will now have a Secure PWA.
After you finish building your SecurePWA on Appdome, there are a few additional steps needed to complete your project, including signing your app.
Distribute through any app store. This includes public app stores (Apple App Store and Google Play Store) or private/enterprise app stores of your choice.
SecurePWA behaves like a native app:
Stores app content on the device and enables offline access for mobile users.
Leverages the device’s location information and other native OS functions
Can request mobile permissions to get access to the camera, microphone, address book, calendar, etc.
Secure by Design
Comprehensive layered security via Appdome Mobile Security Suite, including code obfuscation, anti-tampering, anti-reversing, data encryption, MiTM prevention, certificate pinning, jailbreak/root prevention and more.
Offer the full suite of Appdome services, which can be integrated at any time to deliver new capabilities to your SecurePWA in seconds.
How To Learn More?
Visit the following KB articles for complete and in-depth descriptions of each of the SecurePWA features and options.
Protects non-public resources by restricting access/navigation to the home domain only.
When enabled, the app will only be able to access trusted domains and sites.
To enable access to protected resources, see the AUTHENTICATION section for advanced authentication services
Secure Download: Securely download, store and share files with other apps.
Secure Upload: Securely upload content to the web service.
Local Notifications: Present alerts and notifications sent by the web service natively.
Enable the app to authenticate to additional domains (for secure access to protected resources)
Specify a URL to serve as the entry point to your authentication flow. This can be an IP address, a company portal or an authentication cloud service.
Add in-app secure authentication on a per app basis, using native OS controls for the relevant OS (fingerprint, FaceID, TouchID for Android and iOS).
When Biometric Authentication is enabled, encryption keys access will require a successful application unlock
EnterpriseSSO: for secure shared authentication state among protected apps
SharedSignIn: Saved and cached credentials are automatically encrypted and stored securely in a non-shared storage area.
SecuredCredentials: Saved and cached credentials can be securely shared between protected apps.
In-App Navigation: Natively navigate between web services and content.
Use Nav Button: (optional) Place an Action button to enable users to access advanced app functionality.
Customize Color: (optional) Select your choice color for the background color of your action button