JavaScript har under de senaste sju åren varit det mest populära programmeringsspråket. JavaScript har ständigt utvecklats, så har även webben. Detta har lett till att det är möjligt att utveckla webbsidor som liknar riktiga mobilapplikationer, även kallat progressiva webbapplikationer. I denna studie var syftet att identifiera, undersöka och jämföra olika JavaScript-ramverk som kan användas för att skapa progressiva webbapplikationer. För att uppnå detta har granskningen skett i tre steg. Det första steget var att identifiera ramverk som tydligt identifierade sig själva som ramverk och främst fokuserade på klientsidan. Under första steget insamlades information om elva ramverk som uppfyllde kraven. Nästa granskning i steg ett var att identifiera de ramverk som återgav information på sin officiella webbsida om hur en progressiv webbapplikation implementeras. Efter denna granskning återstod endast två ramverk, Angular och Vue.js. I steg två utvecklades en identisk webbapplikation i vardera ramverk. I det tredje och sista steget jämfördes ramverken baserat på 15 riktlinjer vid val av ramverk för att slutligen avgöra vilket ramverk som var att föredra vid utveckling av en progressiv webbapplikation. Resultatet visade att Vue.js var det ramverk som rekommenderas vid implementering av en progressiv webbapplikation. Detta baserades på att ramverket krävde färre kodrader samt att ramverket funnits längre på marknaden. Ytterligare en anledning var att ramverket är mest populärt bland utvecklare på GitHub.

Denna rapport redogör för ett projekt utfärdat av sju teknologer vid Linköpings univer-sitet som en del av kursen TDDD96 Kandidatprojekt i programvaruutveckling på uppdrag avföretaget EcCell Environmental. Ett system har utvecklats som möjliggör för avfallstekni-ker att enkelt bokföra avfallet de hanterar i sitt arbete samt underlätta sammanställningenav det. I detta arbete har en progressiv webbapplikation utvecklats med React, en backendutvecklad i Node.js och en tillhörande databas. Databasen och backend använder sig avmolntjänsten Firebase som erbjuder hostning av webbappen, inloggningsmöjligheter samtlagring av dokument och bilder. Resultatet av projektet är webbapplikationen Trace theWaste där rapporter kan skapas och skickas till databasen samt historik av gamla rapporterkan ses. I diskussionsdelen utvärderas arbetet, alternativa implementationssätt diskuteras samtvilka lärdomar gruppmedlemmarna tar med sig. Därefter dras slutsatser kring rapportensfrågeställningar. Rapporten avslutas med individuella delar från gruppmedlemmarna somär kopplade till projektet.

The report presents information about the development of an intern logbook made for the company Ångtvättbilen Västernorrland. The application is created with the goal and purpose to make the daily data management more effective and to gather all the coworkers information in one tool. The application is build up with the help of WordPress where the developer creates an own theme together with new post types, plugins and CRUD-functionalities. The project results in an working, responsive, progressive web application where the members can log in to their own personal account. In the app, the coworkers can save data from the work that they are doing or have done. When a member enters information about a work and saves it, the data gets available for all the coworkers to see in an table. The information is from there possible to both edit and delete. The webbapplication also includes a page for image upload where the members can submit images together with an text to the social media manager. The images is delivered by an automatic email. On the webpage there is also a page for a shoppinglist where all the members can add articles that need to be bought. The shoppinglist has all the CRUD-functionalities too. At last every coworker has their own member-profile where they can manage their own information and where they can upload an image of themself. All the personal-information is also visible to the other members on the site. The tools in the application is available from front-end and the coworkers does not have access to the WordPress administration. The goal and purpose of the project is achieved. / Examensrapporten innefattar utvecklingen av en intern företagsapplikation, i form av en loggbok som skapas till Ångtvättbilen Västernorrland. Applikationen skapas med syftet och målet att effektivisera företagets datahantering samt för att ge medarbetarna möjlighet att samla allas information på ett ställe. Applikationen, som blir en progressive web app byggs upp i WordPress genom att utvecklaren skapar ett eget tema samt egna post-typer, plugins och CRUD-funktionaliteter. Arbetet resulterar i en fungerande, responsiv webbapplikation med möjlighet för medarbetarna att, med ett eget konto logga in i applikationen för att därefter ha möjligheten att bland annat lagra data från arbeten som utförs och utförts. När en medarbetare lagrat information om ett arbete visas denna information, tillsammans med författarens namn upp i en tabell synlig för alla medlemmar. Informationen går därefter både att redigera och radera. Webbplatsen innehåller även en undersida för bilduppladdning där medarbetarna kan skicka in bilder tillsammans med bildtext till ansvarig för sociala medier som då får tillgång till datan genom att ett automatiskt mail skickas ut. På webbplatsen finns även en sida som innehåller en inköpslista där alla medarbetare kan fylla på med vad som ska beställas eller köpas in. Inköpslistan har också CRUD-möjligheter så att all data som skapas kan läsas ut, redigeras och raderas. Tillsist har även varje medarbetare en egen profil där de egna uppgifterna kan redigeras samt att alla medlemmar visas upp i en lista tillsammans med dess uppgifter. Alla verktyg på webbplatsen är tillgängliga från front-end och medarbetarna har inte tillgång till baksidan, det vill säga WordPress-gränssnittet.

With mobile usage on the rise developers are more than ever faced with the issue of developing for multiple platforms. With Google's introduction of Progressive Web Applications (PWA) it is possible to build app-like web applications that can run on any platform. This study aims to investigate if PWA is mature enough to replace an already developed native iOS application. Specifically it aims to investigate if a PWA can achieve the same functionality and security as a native application, as well as what technologies are needed to do so.  To verify this question an iOS application called iHug developed by a software company called Cloud Enablers was used as a reference point. With this reference a Minimum Viable Product (MVP) copy was developed as a PWA to verify that the functionality could be achieved. This PWA was not intended to replace the existing native application, but instead coexist with it. That means that the PWA must be able to communicate with the original application. In addition an investigation was done to see what measures needed to be taken to achieve security. The results showed that the same functionality was achievable, as was the security. Even though the results are promising, due to the native application not being developed with a PWA in mind there was a lot of extra work that had to be done to replicate certain functionalities and SDK choices. On this basis, while it is certainly possible to achieve the same functionality it is much harder to do so when the counterpart was not developed to be able to communicate with a PWA.

Developing an app for Android and iOS traditionally requires you to build two different versions. This is both costly and time consuming, which has led to the creation of many Cross-platform alternatives. One such alternative is to use a Progressive Web App (PWA). They are built like regular Web apps and include features previously unique to Native apps. Our focus is to compare PWAs to other Cross-platform solutions by measuring the performance of a PWA, Web app and Cordova app. Terms in the ecosystem are clarified due to inconsistencies, and the process of converting a Web app into a PWA is described. The measurements showed that the PWA and Cordova app had almost equal overall performance, and they were both faster than the Web app. This indicates that PWAs are a viable Cross-platform alternative, but more quantitative studies with performance in focus needs to be conducted due to the small scale of this work. Other aspects of PWAs also needs to be evaluated, such as app size and ease of development.

Idag finns det många olika metoder för att bygga appar. Det är möjligt att utveckla separata appar för samtliga plattformar eller att använda något av Cross Platform-ramverken. Då de olika metoderna har både för- och nackdelar är det av vikt att välja den bästa metoden för just sin app. Under detta arbete kommer en app att skapas med två olika metoder. En med Cross Platform-ramverket React Native samt en motsvarande webbaserad app, närmare bestämt en Progressiv Webb App (PWA) skriven i React. Därefter kommer en jämförelse av tre funktionaliteter (kamera, bluetooth-skanning och NFC-skanning) att utföras för att besluta vilken av dessa appar som gav det bästa resultatet samt arbetsbördan ur ett utvecklarperspektiv. De främsta problemen som uppstod var stylingproblem, kamerafunktionalitet samt att vissa webbmotorer inte tillåter bluetooth- och NFC-skanning. Detta innebar att dessa funktionaliteter inte fungerar på alla webbläsare. Resultatet indikerar att PWA har sina begränsningar när det kommer till hårdvarunära funktionalitet, men är i övrigt ett mycket bra sätt att bygga en app på. React Native är bättre när det kommer till hårdvarunära funktioner men kan leda till fler stylingproblem. / There are many different ways to create apps these days, one can choose to create separate apps for each platform or use a Cross Platform framework. Because different methods have different benefits and drawbacks, it is critical to find the best method for your specific app. This project will result in the development of two apps: a Cross Platform React Native app and a web-based app, dubbed a Progressive Web App (PWA) written in React. Following that, a comparison of three functions (camera, bluetooth scanning, and NFC scanning) will be carried out in order to determine which of these frameworks provided the best results and workload from an engineering perspective. The most serious issues that arose were styling issues, camera functionality, and the fact that some web browser engines do not support Bluetooth or NFC scanning, implying that these features do not work on all browsers. PWA has its limitations when it comes to native features, but it is still a very good way of building an app. When it comes to native features, React Native is better, but it can lead to more stylistic issues.

Web applications are often described as being cross-platform. They are accessible from a multitude of different web browsers, which in turn are running on a multitude of different operating systems. For a time now, developers have used many different tools to create cross-platform applications for mobile devices with web technologies. However, these applications fail to deliver when taken out of their native environment, and often do not feel native at all. Enter Progressive Web Applications, PWA. PWA’s are applications written for the web with web technologies, running in a browser,  but seasoned with some techniques that can make them behave like a native application when running on a mobile device. They are just ordinary web applications with native behaviour such as offline support, installability, and push notifications. The question that arises is - can this new type of web applications match Native Android Applications in performance, especially the response time when accessing the device's hardware? This report will try to answer that question

Allt fler personer i Sverige har tillgång till både Internet och smarttelefoner i en större utsträckning än någonsin förr. Det finns applikationer för det mesta, som tränings-, spel- och nyhetsappar. Utefter detta och vår samtids ökade fokus på miljön och återvinning valdes målet med detta projekt, en progressiv webbapplikation som använder sig av bildigenkänning med hjälp av maskininlärning som ska underlätta för människor att sortera och återvinna sina hushållsavfall. Slutresultatet är en applikation som kan köras likvärdigt på de flesta enheter (mobil, pc, surfplattor etc.), oavsett vilken modell eller vilket operativsystem den har. Applikatio- nen används för att identifiera hushållsavfall genom en bildigenkänningstjänst. Denna rapport behandlar de teknologier som använts för att bygga applikationen och implementationsprocessen av den. Slutligen diskuterar vi resultatet av utvecklingen och några utvalda personer fick testa appen, svara på några frågor och säga vad de tyckte. / More and more people in Sweden have access to both the Internet and smartphones to a greater extent than ever before. There is an application for almost everything, such as training-, games- and news applications. Based on this and the increasing interest for the environment in general and recycling, the goal was set for this project. A progressive web application with the use of image recognition with the help of machine learning that will make it easier for people to sort and recycle their household trash. The final result is an application that can be run equally on most devices (mobile, PC, tablets, etc.), regardless of model or operating system. The application is used to identify household waste through an image recognition service. This report addresses the technologies used to build the application and implementation process of it. Finally we discuss the results of the development and some selected people got to test the app and answer some questions and voice their opinions.

Progressive Web Apps (PWA) is a concept of enhanced web apps which aim to erase the difference between web and native apps. The concept of PWA introduces several benefits, including simpler distribution and development, which makes web apps a viable option for many businesses. The installation process of a PWA is different from native apps and this study aims to understand whether or not it has an impact on the users will to install the PWA. PWA:s are installed directly from the browser, rather than an app marketplace. Said installation process is suspected to be unknown to many which might influence the impact. In this study, several papers on the topic are studied. A PWA is developed from scratch which is used as a platform for a user test, hosting a brief introduction of the topic as well as guiding participants through the installation process. In conjunction with the user test a survey is conducted to collect the impressions from their experience in the user test. The result of the survey shows indications that the suspected lack of knowledge and experience was correct, and that the installation process is not to complicated.Additionally, results show that many probably will not bother to install a PWA, even if it is available. Therefore, I argue that the installation process does have an impact in its current form. Alternatives to the installation process used in this study do exist and are discussed in this paper.

This thesis compares a native Android application with two different classes of cross-platform applications, an interpreted application developed in React Native and a Progressive Web-Application (PWA). The main contribution of the thesis is a comparison table, placing application features on the y-axis and the evaluated frameworks on the x-axis. This table in conjunction with the cost analysis provide clear framework selection guidance. The evaluated applications were created to evaluate the frameworks' fulfillment of the enumerated features. A user study was performed to learn if there was any discernible difference between the evaluated applications. Qualitative data obtained from a think-aloud in the user study, indicates a slight preference for the PWA, despite a smaller feature set. However, quantitative analysis from a User Experience Questionnaire (UEQ) failed to show any systematic UX performance difference over the evaluated applications. Therefore, it is concluded that cross-platform applications are able to both emulate and even outperform a native experience in some regards, with the added advantage of significantly offsetting both development and maintenance costs. Finally, we recommend using a cross-platform mobile application framework if it provides all the features required by the intended application. / Denna rapport jämför en “Native Android”-applikation med två olika klasser av plattformsoberoende applikationer, en “Interpreted”-applikation utvecklad i React Native och en “Progressive Web”-Applikation (PWA). Det största bidraget från denna rapport är en jämförelsetabell, där applikationsfunktioner placeras på y-axeln och de utvärderade ramverken på x-axeln. Denna tabell, i konjunktion med en kostnadsanalys, förser läsaren med en tydlig guide vid val av ramverk. De utvärderade applikationerna skapades för att utvärdera ramverkens tillgänglighet till de uppräknade funktionerna. En användarstudie utfördes för att utreda huruvida det existerade någon märkbar skillnad mellan de utvärderade applikationerna. De kvalitativa data som erhölls från en “think-aloud” i användarstudien indikerar en liten preferens för PWA:n, trots att den har tillgång till färre funktioner. Den kvantitativa analysen från ett “User Experience Questionnaire” (UEQ) misslyckades med att visa någon systematisk skillnad i UX mellan de utvärderade applikationerna. Slutsatsen är därför att plattformsoberoende applikationer både kan emulera, och till och med överträffa, en naturlig upplevelse i vissa avseenden, med en ytterligare fördel av att både utvecklings- och underhållskostnader väsentligt minskar. Slutligen rekommenderar vi användandet av ett plattformsoberoende applikationsramverk förutsatt att det har tillgång till alla funktioner som krävs för den avsedda applikationen.