Progressive Web Apps are a Game-Changer! Use Active Learning to Engage Students and Convert Any Website into a Mobile-Installable, Offline-Capable, Interactive App

  • Abstract
  • Literature Map
  • Similar Papers
Abstract
Translate article icon Translate Article Star icon

Learn how to design and create powerful new progressive web apps (PWA). This workshop introduces the computer science principles that enable modern web sites to be converted into installable apps. This course starts with an example web site (built with HTML/CSS/JavaScript) and shows in just two easy steps how to create an engaging app that can be installed on mobile devices, including Android phones, iPhones, iPads, tablets, and more. The course illustrates the principles by converting an open source, cloud-hosted, client-side app. It introduces manifest files and JSON, then introduces the powerful new JavaScript service workers. The course employs Google's free Workbox libraries and shows how service workers enable web apps to interact with device APIs and alter requests before and after sending. You can easily install (and uninstall) the apps on mobile devices - and even use an app while your device is offline. The course illustrates how engaging tools like Lighthouse provide critical feedback on performance, accessibility, best practices, and more. As a bonus, a PWA syllabus is provided that can be customized to your courses. Skills for developing these apps are in demand and quite accessible to students. Laptop Required. Presenters are most familiar with Windows, but another OS should be fine. Internet access and the ability to create and edit files is required. Chrome browser is required to run the Lighthouse audits. All software and libraries are free and open source.

Similar Papers
  • Research Article
  • Cite Count Icon 7
  • 10.36982/jiig.v12i2.1944
Analisis Performance Progressive Web Apps Pada Aplikasi Shopee
  • Dec 31, 2021
  • Jurnal Ilmiah Informatika Global
  • Dedi Haryanto + 1 more

Progressive web App is a web-based application development that includes the application of the latest technology from a browser that can be accessed quickly into one application without having to install. Progressive web applications can run like mobile applications in general, and the user interface is like using native applications. Progressive web app was invented in 1990. Progressive web App uses the latest Technology to produce web apps that provide a better User Experience and User Interface than mobile native. Progressive web app that is supported by a system called Service Worker, where the technology provides Offline Functionality, Notifications, Content Updates, Connectivity Changes and others. So that in a slow connection or an unstable connection you can access websites quickly and have the same appearance as the last time you opened the application via a Web Browser. This progressive web app can optimize web app performance to allow users to have an accessible experience with quickly and easily through browsers such as notebooks, personal computers or through mobile devices. This progressive web app is a service worker that allows a web app that can be run through all existing browsers and has a fairly simple and transparent process. So that the page that is opened, on the service worker site which is a proxy client that can be written in javascript, as well as being able to cache the assets needed for offline support which can determine certain events to activate the service worker such as push notifications, camera, and background sync. Keywords : Progressive Web Apps, Web, User Interface, Native Apps, User Experience

  • Research Article
  • Cite Count Icon 1
  • 10.29121/shodhkosh.v5.i6.2024.5977
A STUDY ON PROGRESSIVE WEB APPS: REVOLUTIONIZING USER EXPERIENCES AND REDEFINING WEB APPLICATIONS
  • Jun 30, 2024
  • ShodhKosh: Journal of Visual and Performing Arts
  • Abbin Joseph Thomas + 1 more

This study investigates the rise of Progressive Web Apps (PWAs) and their impact on the landscape of web applications. PWAs, built on standard web technologies, bridge the gap between traditional websites and native mobile apps by offering features like offline functionality, push notifications, and app-like user experiences. This research delves into the core functionalities of PWAs, exploring how they address the limitations of web apps and provide an enhanced user experience.The study aims to Analyze the key characteristics and capabilities of PWAs, Evaluate the impact of PWAs on user engagement and accessibility, Explore the potential benefits and challenges associated with PWA development and adoption for businesses and discuss the future potential of PWAs in shaping the evolution of web applications. By examining PWAs through these lenses, this study contributes to a deeper understanding of their potential to revolutionize user experiences and redefine the way we interact with web applications. Progressive online Apps (PWAs), which bridge the gap between conventional webpages and native mobile applications, represent a paradigm shift in online technology. This study intends to explore the complex world of PWAs, examining their features, benefits, history, and consequences for the digital environment.The paper starts with a thorough investigation of the fundamental ideas that guide PWAs. It outlines the fundamental characteristics that set these apps apart, including their solid security procedures, responsiveness on many devices, dependability under erratic network situations, and interaction through app-like experiences. These qualities serve as PWAs' cornerstones, allowing them to leverage the adaptability of web technologies to deliver immersive user experiences that compete with native applications.In addition, this research carefully analyzes the intrinsic benefits of PWAs. It clarifies their accessibility, removing the obstacles related to app downloads and guaranteeing their general availability via web browsers. One important factor that stands out is cost-effectiveness: PWAs eliminate the need for separate platform development initiatives, which reduces overhead and compatibility difficulties. Additionally, they are more visible in search results and load faster, which adds to their allure and increases user engagement and retention. Additionally, the study looks at how PWAs are changing a variety of businesses and use cases. Case studies from well-known companies like Flipkart, Starbucks, and Twitter Lite demonstrate the effectiveness of PWAs in providing customers with quicker, more interesting, and more accessible experiences. These practical applications highlight the observable advantages of PWAs and demonstrate how they may transform social networking, e-commerce, and service-oriented applications. The study also explores the technical foundations that support PWAs, highlighting the function of caching methods, HTTPS protocols, and service workers in guaranteeing robust security measures, faster loading times, and offline capability. It clarifies the best practices for development and architecture that make it possible to create PWAs, promoting a better comprehension of the technical aspects supporting these apps. This study concludes by promoting PWAs' transformational potential in transforming the digital landscape. It emphasizes their function as a driving force behind providing exceptional user experiences that combine the finest aspects of mobile and online applications. PWAs are positioned to change web development standards as they continue to develop and gain popularity. They provide organizations and users with an attractive alternative that puts accessibility, engagement, and efficiency first.

  • Conference Article
  • Cite Count Icon 54
  • 10.1109/mobilesoft.2017.7
Assessing the Impact of Service Workers on the Energy Efficiency of Progressive Web Apps
  • May 1, 2017
  • Ivano Malavolta + 3 more

Context. Mobile web apps represent a large share of the Internet today. However, they still lag behind native apps in terms of user experience. Progressive Web Apps (PWAs) are a new technology introduced by Google that aims at bridging this gap, with a set of APIs known as service workers at its core. Goal. In this paper, we present an empirical study that evaluates the impact of service workers on the energy efficiency of PWAs, when operating in different network conditions on two different generations of mobile devices. Method. We designed an empirical experiment with two main factors: the use of service workers and the type of network available (2G or WiFi). We performed the experiment by running a total of 7 PWAs on two devices (an LG G2 and a Nexus 6P) that we evaluated as blocking factor. Our response variable is the energy consumption of the devices. Results. Our results show that service workers do not have a significant impact over the energy consumption of the two devices, regardless of the network conditions. Also, no interaction was detected between the two factors. However, some patterns in the data show different behaviors among PWAs. Conclusions. This paper represents a first empirical investigation on PWAs. Our results show that the PWA and service workers technology is promising in terms of energy efficiency.

  • PDF Download Icon
  • Research Article
  • Cite Count Icon 10
  • 10.60087/jaigs.v6i1.269
Comprehensive Comparative Analysis of Mobile Apps Development Approaches
  • Dec 3, 2024
  • Journal of Artificial Intelligence General science (JAIGS) ISSN:3006-4023
  • Maher Gerges + 1 more

Growing use of the cell phones and tablets over the computer for humans’ daily life has increased the development of mobile apps. Different paradigms have been introduced to develop a mobile app. Up till now, the major paradigms have been introduced are native apps, hybrid apps, web app and the new trend namely progressive web app (PWA). Each methodology has its pros and cons. This paper discusses about native development issues and how web app aimed to solve these problems. The hybrid apps will be discussed as a solution of cross-platform development problem of native apps. In addition, problems of web apps and the gap between web app and native apps will be introduced. PWA is supposed to bridge the gap between native apps and web apps. The main technologies –service worker- will also be discussed.

  • Research Article
  • 10.51582/interconf.19-20.08.2025.027
Comparative Performance and User Experience: PWAs Vs. Native Mobile Applications
  • Aug 20, 2024
  • InterConf
  • Murad Ahadli

This article analyzes and contrasts the use cases, Cultivation Methods, Tools, and User Experiences of Progressive Web Apps (PWAs) and Mobile Native Applications. It notes that since 2015, the use of PWAs has surged as a result of faster download times, offline usability, lower development costs, and enhanced engagement. Key PWAs For the Building of PWAs includes Service Workers, Web App Manifests and Responsive Web Design; the article showcases practical code examples for registering service workers, and handling notifications, as well as caching resources for a seamless user experience. Popular frameworks for PWA development includes Angular, React and Vue.js. For the user interface, Framework7, React Native, Ionic and Onsen UI provide a native user interface and feature design and offer enhanced usability. To empower PWAs, best practices include notifications and caching for heightened user reliability. Exercises in the article include tables showing the advantages and disadvantages of methods, tools sticks, and practices which outline the best routes for the developers. In essence, the article states that PWAs provide high-performance levels, are scalable, secure, and user-engaging, thus going through the same competition as native applications besides maintaining development and maintenance costs to their lowest. As the browser capabilities advance, it will become an ever-important chair for modern web development.

  • PDF Download Icon
  • Research Article
  • Cite Count Icon 14
  • 10.3390/network2020022
Evaluating Progressive Web App Accessibility for People with Disabilities
  • Jun 8, 2022
  • Network
  • Konstantinos I Roumeliotis + 1 more

App development is a steadily growing industry. Progressive web apps (PWAs) constitute a technology inspired by native and hybrid apps; they use web technologies to create web and mobile apps. Based on a service worker, a caching mechanism, and an app shell, PWAs aim to offer web apps with features and user interfaces similar to those of native apps. Furthermore, technological development has created a greater need for accessibility. An increasing number of websites, even government ones, are overlooking the need for equal access to new technologies among people with disabilities. This article presents, in a systematic review format, both PWAs and web accessibility and aims to evaluate PWAs’ effectiveness as regards the corresponding accessibility provided.

  • Conference Article
  • Cite Count Icon 14
  • 10.1109/iccomm.2018.8430158
Analysis of Cache in Service Worker and Performance Scoring of Progressive Web Application
  • Jun 1, 2018
  • Abhi Gambhir + 1 more

Mobile software development is an emerging technology and so are the strategies to build them. This paper focuses on the budding technology i.e. Progressive Web Apps (PWAs), which bridges the gap between web and native mobile apps. Service Worker is the backbone of any PWA. It enables caching of memory, offline access, and other gem features. To prove that caching memory improves the performance, tests have been performed. Taking the advantage of Google's Lighthouse (beta) tool, metrics have been calculated and solutions to improve them are suggested. We has demonstrate the service worker and its impact on cross platform approaches and compare android, iOS and PWA performance growth.

  • Conference Article
  • Cite Count Icon 21
  • 10.1145/3184558.3188742
What is in a Web View
  • Jan 1, 2018
  • Thomas Steiner

Progressive Web Apps (PWA) are a new class of Web applications, enabled for the most part by the Service Workers APIs. Service Workers allow apps to work offline by intercepting network requests to deliver programmatic or cached responses, Service Workers can receive push notifications and synchronize data in the background even when the app is not running, andtogether with Web App Manifestsallow users to install PWAs to their devices' home screens. Service Workers being a Web standard, support has landed in several stand-alone Android Web browsersamong them (but not limited to) Chrome and its open-source foundation Chromium, Firefox, Edge, Opera, UC Browser, Samsung Internet, andeagerly awaitediOS Safari. In this paper, we examine the PWA feature support situation in Web Views, that is, in-app Web experiences that are explicitly not stand-alone browsers. Such in-app browsers can commonly be encountered in chat applications like WeChat or WhatsApp, online social networks like Facebook or Twitter, but also email clients like Gmail, or simply anywhere where Web content is displayed inside native apps. We have developed an open-source application called PWA Feature Detector that allows for easily testing in-app browsers (and naturally stand-alone browsers), and have evaluated the level of support for PWA features on different devices and Web Views. On the one hand, our results show that there are big differences between the various Web View technologies and the browser engines they are based upon, but on the other hand, that for Android the results are independent from the devices' operating systems, which is good news given the problematic update policy of many device manufacturers. These findings help developers make educated choices when it comes to determining whether a PWA is the right approach given their target users' means of Web access.

  • Book Chapter
  • Cite Count Icon 2
  • 10.1007/978-981-19-4193-1_55
Progressive Web Apps (PWAs)—Alternate to Mobile and Web
  • Sep 29, 2022
  • Sarwar Ali + 2 more

With the advancement in technology in each counting second new solutions to new problems comes into the picture and PWA are one of them which came as an alternative to the current leading technologies like android and Web, combining features of both the technology and overcoming the shortcoming of both the technologies. Progressive Web Apps are web apps that are built using the Service Workers API which can work offline by intercepting HTTP requests and delivering cached responses. The concept of progress is an approach that takes advantage of the capabilities of the environment instead of having rigid requirements. PWA is built without requiring the installation of a native app and works seamlessly across various platforms. Many Android Web browsers support Service Workers, which is a standard component of the PWA landscape. This paper aims to analyze the current state of support for PWA features in Web Views and how it fits into the overall web experience.KeywordsProgressive web appsInstall abilityIn-app browsersInformation technologyService workerApp ShellNative android application

  • Research Article
  • Cite Count Icon 3
  • 10.21275/ms241022095359
Progressive Web Apps (PWAs): Enhancing User Experience through Modern Web Development
  • Oct 5, 2024
  • International Journal of Science and Research (IJSR)
  • Bangar Raju Cherukuri

Progressive Web Apps or PWAs can be described as the next big advancement in site design and building, as they give web application - like functionality within a web browser without the need for app downloads. This paper discusses how PWAs build the path between normal mobile applications and web applications using service workers; web application manifests, and contemporary JavaScript frameworks. PWAs have functionalities like offline capability, push notification, and background refresh that address the users' engagement; scalability and dependability of web application that facilitate the functionality of the PWAs. The given features enable PWAs to provide an unbroken and captivating interface to individuals, even during certain circumstances when one has intermittent or no Internet connection. The research aims to evaluate the increasing engagement of users with the help of PWAs and what parameters should be involved: time to loading, interactivity, and re - engagement rates. The paper assesses the development of PWAs and measures how organizations such as Twitter, Uber, and Flipkart have adopted PWAS to increase their profits, client satisfaction, and performance based on research studies. This research gathers data from PWA developers to understand the motivation and barriers to its use. Studies show that applying PWAs yields significant performance enhancements as they cache data and do not require a constant Internet connection. In addition, the study shows how push notifications and background sync features help enhance user engagement since clients are reminded to be active without having to install an application. However, the various benefits of this research bring some understanding and realization of certain drawbacks like technical difficulties, support from only a limited number of browsers, and perceived impressions, which may slow its uptake.

  • Conference Article
  • Cite Count Icon 13
  • 10.1109/icacce.2018.8441715
Analysis of Cache in Service Worker and Performance Scoring of Progressive Web Application
  • Jun 1, 2018
  • Abhi Gambhir + 1 more

Mobile software development is an emerging technology and so are the strategies to build them. This paper focuses on the budding technology i.e. Progressive Web Apps (PWAs), which bridges the gap between web and native mobile apps. Service Worker is the backbone of any PWA. It enables caching of memory, offline access, and other gem features. To prove that caching memory improves the performance, tests have been performed. Taking the advantage of Google's Lighthouse (beta) tool, metrics have been calculated and solutions to improve them are suggested. We has demonstrate the service worker and its impact on cross platform approaches and compare android, iOS and PWA performance growth.

  • Research Article
  • 10.37365/jti.v10i2.329
KOMPARASI HARGA TERHADAP HARGA APLIKASI OJEK ONLINE
  • Nov 30, 2024
  • Infotech: Journal of Technology Information
  • Johanes Fernandes Andry + 4 more

The development of digital technology has changed people's habits, including in the use of online transportation. Innovation in online transportation services makes it easier for consumers and drivers to find each other's locations find out the driver's identity, vehicle type, and save time. However, competition between online transportation applications often makes consumers compare prices from one platform to another manually. This is time-consuming and makes consumers prefer applications that offer cheaper prices, even though it requires more effort. This study is a price comparison system based on Progressive Web Apps (PWA) that allows consumers to compare prices from several online transportation applications more efficiently. This PWA-based system can be accessed via desktop or mobile devices, providing greater ease of access. In developing this system, the Waterfall method is used, where users are involved from the early stages to provide feedback so that the system can be adjusted to their needs. Comparative analysis is carried out to find similarities and differences in prices between online transportation applications. This study focuses on two main problems: how to design a website that is connected to various online transportation applications, and how the price comparison system works efficiently. The purpose of this study is to provide a solution for consumers who often compare prices between platforms manually, as well as to form a PWA-based price comparison system that facilitates access via mobile devices. The benefits of this research include increasing efficiency for consumers in choosing online transportation services, as well as encouraging healthier competition between online transportation companies through more competitive price offers. The implementation of responsive PWA to compare prices in real-time, provides a better and more efficient user experience. ABSTRAKPerkembangan teknologi digital telah mengubah kebiasaan masyarakat, termasuk dalam penggunaan transportasi online. Inovasi dalam layanan transportasi online memudahkan konsumen dan pengemudi dalam saling menemukan lokasi, mengetahui identitas pengemudi, jenis kendaraan, serta menghemat waktu. Namun, persaingan antar aplikasi transportasi online sering kali membuat konsumen membandingkan harga dari satu platform ke platform lainnya secara manual. Hal ini memakan waktu dan membuat konsumen lebih memilih aplikasi yang menawarkan harga lebih murah, meskipun membutuhkan usaha lebih. Penelitian ini mengembangkan sebuah sistem komparasi harga berbasis Progressive Web Apps (PWA) yang memungkinkan konsumen untuk membandingkan harga dari beberapa aplikasi transportasi online dengan lebih efisien. Sistem berbasis PWA ini dapat diakses melalui desktop maupun perangkat mobile, memberikan kemudahan akses yang lebih luas. Dalam pengembangan sistem ini, digunakan metode Waterfall, di mana pengguna terlibat sejak tahap awal untuk memberikan umpan balik sehingga sistem dapat disesuaikan dengan kebutuhan mereka. Analisis komparatif dilakukan untuk menemukan persamaan dan perbedaan harga antar aplikasi transportasi online. Penelitian ini berfokus pada dua masalah utama: bagaimana merancang sebuah website yang terhubung dengan berbagai aplikasi transportasi online, dan bagaimana sistem komparasi harga bekerja secara efisien. Tujuan penelitian ini adalah memberikan solusi bagi konsumen yang kerap kali membandingkan harga antar platform secara manual, serta membentuk sistem komparasi harga berbasis PWA yang memudahkan akses melalui perangkat mobile. Manfaat dari penelitian ini meliputi peningkatan efisiensi bagi konsumen dalam memilih layanan transportasi online, serta mendorong persaingan yang lebih sehat antar perusahaan transportasi online melalui penawaran harga yang lebih kompetitif. Penerapan PWA yang responsif untuk membandingkan harga secara real-time, memberikan pengalaman pengguna yang lebih baik dan efisien.

  • Research Article
  • Cite Count Icon 1
  • 10.56910/ictmt.v1i2.126
Collaboration of Progressive Web App (PWA) And Firebase Cloud Messaging (FCM) for Optimal Performance Mailing Software
  • Dec 31, 2023
  • INTERNATIONAL CONFERENCE ON DIGITAL ADVANCE TOURISM, MANAGEMENT AND TECHNOLOGY
  • Dwi Purnomo Putro + 2 more

The problem of correspondence cannot be separated from the ease, accuracy and speed of the processing process. In research from Riswandi Ishak and H. Trizaka, they proposed report management software as well as notification of disposition and monitoring of correspondence as a solution to correspondence problems. However, there are shortcomings in the notification process for the disposition of correspondence, which requires the software to be actively open. In research, P. Dwi proposed a notification solution with Firebase Cloud Messaging (FCM), so that it can send notifications as long as the browser is active and connected to the internet, even without opening the software. There is a problem currently when the software becomes unstable when the internet connection is bad or offline. Progressive Web Apps (PWA) offers the concept of web-based application development by implementing browser technology such as service workers and app manifests. PWA is capable of displaying pages offline but cannot save, change, or delete data in the database. The test results of this research used Lighthouse and showed an average score of 100 on the PWA criteria, 85 on the performance criteria, 97 on the accessibility criteria, and 100 on the best practices criteria. Additional results obtained by implementing PWA mean page loading times are 26.6% faster with cache and service workers. The PWA and FCM concepts provide the best experience in using Mailing Software even with minimal internet connection or offline. This strategy was chosen to still get a fast response when running the mail processing software.

  • Research Article
  • Cite Count Icon 2
  • 10.14489/vkit.2025.03.pp.003-011
PROGRESSIVE WEB APPLICATION DEVELOPMENT TECHNOLOGIES: ANALYZING AND EVALUATING EFFECTIVENESS
  • Mar 1, 2025
  • Vestnik komp'iuternykh i informatsionnykh tekhnologii
  • E Yu Klimenchenko + 3 more

The article examines the key components of Progressive Web Apps (PWA), including Service Workers, Web App Manifest, and HTTPS, which ensure performance, security, and usability. Particular attention is given to their role in optimizing the user experience and reducing the costs of application development and maintenance. The research methodology includes an analytical review of modern technologies, a comparative analysis of architectural solutions, and experimental testing that compared PWA and native applications. The experiment evaluated parameters such as loading speed, device resource consumption, ease of installation and updating, and offline functionality. Both objective metrics and subjective data reflecting user satisfaction were used in the analysis. The results demonstrated that PWA enables quick installation, efficient resource usage, and a high level of convenience comparable to native solutions. At the same time, the offline functionality of PWA slightly lags behind traditional applications. Modern development tools such as Google Lighthouse and Workbox, which contribute to optimizing PWA performance, are also discussed separately. These tools allow for the automation of testing processes, caching strategies configuration, and overall application performance improvement, significantly simplifying the creation and maintenance of web solutions. The findings indicate that the adoption of these technologies can profoundly influence the future of digital development due to their accessibility, cost efficiency, and high-quality user interaction.

  • Book Chapter
  • Cite Count Icon 9
  • 10.1007/978-3-030-74296-6_35
PWA vs the Others: A Comparative Study on the UI Energy-Efficiency of Progressive Web Apps
  • Jan 1, 2021
  • Stefan Huber + 2 more

Developing the same mobile app for multiple platforms is a prominent challenge for practitioners in mobile software development. When starting an app project, practitioners are faced with a plethora of development approaches to choose from. Progressive Web Apps (PWAs) are a novel and promising approach for mobile cross-platform development (MCPD). As mobile devices are limited regarding battery capacity, the energy footprint of a mobile app should be kept as low as possible. Thus, the aim of this study is to analyze the difference in energy consumption of PWAs and other mobile development approaches with a focus on UI rendering and interaction scenarios. For this, we implemented five versions of the same app with different development approaches and examined their energy footprint on two Android devices with four execution scenarios. The results show that the used development approach influences the energy footprint of a mobile app. Native development shows the lowest energy consumption. PWAs, albeit not the lowest energy consuming mobile development approach, are a viable alternative to other MCPD approaches. Moreover, the web-browser engine used to execute the PWA has a significant influence on the energy footprint of the app.

Save Icon
Up Arrow
Open/Close
Notes

Save Important notes in documents

Highlight text to save as a note, or write notes directly

You can also access these Documents in Paperpal, our AI writing tool

Powered by our AI Writing Assistant