A Comparison of User Experience in Progressive Web Apps and Cross-platform Framework Apps: Performance, Appearance and Functionality of a React Progressive Web App and a React Native App
2024 (English)Independent thesis Basic level (degree of Bachelor), 10 credits / 15 HE credits
Student thesisAlternative title
En jämförelse av användarupplevelsen i progressiva webbappar och appar skapade med multiplattformsramverk : Prestanda, utseende och funktionalitet i en progressiv webbapp gjord i React och en React Native-app (Swedish)
Abstract [en]
In mobile app development, cross-platform approaches have emerged as an alternative to maintaining separate codebases for each target platform. A number of different cross-platform frameworks are available, which allow developers to build a single app targeting multiple platforms. A less used approach is the progressive web app, a type of web app which is installable and available offline. Progressive web apps achieve cross-platform support by running in the browser, but they appear like regular apps to the user. When building a cross-platform app, stakeholders may face the decision between using a cross-platform framework or developing a progressive web app. This study aims to compare the differences in user experience between cross-platform framework apps and progressive web apps, by comparing performance and evaluating functional and visual differences. Specifically, launch time, battery usage, app size, and feature load times were measured, and the appearance and functionality of the camera, sharing, notifications and authentication features was evaluated. To achieve this, two apps were developed: one progressive web app using React, and one cross-platform framework app using React Native, both containing the same functionality. The performance, appearance and functionality of these apps was evaluated on Android and iOS. The results indicate that on lower end phones, React Native apps generally outperform progressive web apps, and their appearance and functionality is also more native-like. However, the differences are often small, and progressive web apps can be a valid alternative for cross-platform development.
Abstract [sv]
Inom mobilapputveckling har plattformsoberoende utveckling blivit ett alternativ till att underhålla en separat kodbas för varje platform där appen ska vara tillgänglig. Ett antal olika multiplattformsramverk finns tillgängliga, vilka tillåter utvecklingen av en app för flera olika plattformar. En mindre vanlig metod är progressive webbappar, en typ av webbappar som kan installeras och är tillgängliga offline. Progressiva webbappar är plattformsoberoende eftersom de körs i webbläsaren, men de ser ut som vanliga appar för användaren. Under utvecklingen av plattformsoberoende appar kan ett val mellan att använda ett multiplattformsramverk eller utveckla en progressiv webbapp bli aktuellt. Denna studie syftar till att jämföra skillnader i användarupplevelsen mellan multiplattformsramverksappar och progressiva webbappar, genom att jämföra prestanda och evaluera utseende och funktionalitet. Starttid, batterianvändning, appstorlek och funktioners laddningstid mättes, och utseende och funktionalitet av kamera-, delnings-, notis-, och autentiseringsfunktioner utvärderades. För att uppnå detta utvecklades två appar: en progressiv webbapp med React, och en app med multiplattformsramverket React Native, båda med samma funktionalitet. Prestandan, utseendet och funktionaliteten av apparna utvärderades sedan på Android och iOS. Resultatet indikerar att React Native-appar generellt presterar bättre än progressiva webbappar på telefoner med lägre prestanda. Utseendet och funktionaliteten i React Native-appar är också mer likt operativsystemets egna funktionaliteter. Skillnaderna är däremot oftast små, och progressiva webbappar kan utgöra ett godtagbart alternativ för platformsoberoende utveckling.
Place, publisher, year, edition, pages
Stockholm: KTH Royal Institute of Technology , 2024. , p. 56
Series
TRITA-EECS-EX ; 2024:479
Keywords [en]
Mobile app development, Progressive Web App, Cross-platform development, User Experience, React, React Native, Android, iOS
Keywords [sv]
Mobilapputveckling, Progressiv webbapp, Multiplattformsramverk, Användarupplevelse, React, React Native, Android, iOS
National Category
Computer Sciences Computer Engineering
Identifiers
URN: urn:nbn:se:kth:diva-351597OAI: oai:DiVA.org:kth-351597DiVA, id: diva2:1887938
Educational program
Bachelor of Science in Engineering - Computer Engineering
Presentation
2024-06-03, via Zoom https://kth-se.zoom.us/j/66758547151, Isafjordsgatan 22 (Kistagången 16), Stockholm, 11:00 (English)
Supervisors
Examiners
2024-09-232024-08-092024-09-23Bibliographically approved