{"id":218025,"date":"2023-03-22T16:46:39","date_gmt":"2023-03-22T15:46:39","guid":{"rendered":"https:\/\/www.noitech.net\/?p=218025"},"modified":"2023-10-20T15:42:07","modified_gmt":"2023-10-20T13:42:07","slug":"progressive-web-app-una-nuova-frontiera-per-lo-sviluppo-delle-applicazioni","status":"publish","type":"post","link":"https:\/\/www.noitech.net\/en\/progressive-web-app-a-new-frontier-for-application-development\/","title":{"rendered":"Progressive Web App (PWA) Development \u2013 A new frontier for application development"},"content":{"rendered":"

What is a Progressive Web Apps<\/strong>? When we talk about PWA<\/strong>, we refer to web applications developed and loaded like normal web pages, but which can be used and installed on mobile devices, behaving similarly to native applications.<\/p>\n\n\n\n

The development of Android and IOS apps, especially in recent years, is therefore combined with the PWA technique which, in some cases, could prove to be the most effective for your business.<\/p>\n\n\n\n

This is also why it is essential to rely on companies that create apps professionally, such as Noitech<\/strong>.
We will be able to evaluate and direct you towards the best choice and entrust the App creation phase to our expert developers.<\/p>\n\n\n\n

Meanwhile, between the development of IOS Apps, the creation of Apps for Android systems, and web apps, in this article we will focus a lens on Progressive Web Apps.<\/p>\n\n\n\n

PWA: the art of combining two paths <\/strong><\/h2>\n\n\n\n

There are two paths commonly followed today by App developers: Web App or Android and IOS App development for their digital stores.<\/p>\n\n\n\n

The first of the two has considerable advantages.<\/p>\n\n\n\n

A Web app is first and foremost easy to share<\/strong> via link, which can circulate via social media, messaging or even word of mouth.<\/p>\n\n\n\n

If you are wondering how to install PWA, the answer will be short. You don't need to install anything<\/strong>. A big advantage in light of recent statistics that speak of users who are increasingly less accustomed to installing new apps on their devices. The transition, if necessary, occurs only after being conquered by the App.<\/p>\n\n\n\n

Another plus point lies in the fact that a Web App can truly define itself multiplatform<\/strong>. This is because it can be easily used not only from mobile devices, such as smartphones and tablets, but also from PC or Mac.<\/p>\n\n\n\n

The real and only advantage of creating traditional applications, or developing Apps for digital stores, lies in the possibility that these are installed on your smartphone and tablet<\/strong>.<\/p>\n\n\n\n

In other words, the development of Android and IOS apps allows users to always carry them with them on mobile devices.<\/p>\n\n\n\n

A Progressive Web App, however, combines the two worlds.<\/strong><\/p>\n\n\n\n

Its characteristic is in fact that of being a Web App, but can also be installed on mobile devices. In this way, the user can evaluate the App by using it in its Web version, and then decide later whether to install it on their smartphone or tablet.<\/p>\n\n\n\n

How PWAs work<\/h2>\n\n\n\n

Ultimately, the Progressive Web Apps<\/strong> sono applicazioni web progettate per fornire un’esperienza utente simile a quella di un’applicazione mobile nativa, ma che possono essere utilizzate attraverso un browser web. <\/p>\n\n\n\n

Ci\u00f2 significa che gli utenti possono accedere all’applicazione senza doverla scaricare da uno store, rendendo le PWA pi\u00f9 leggere, veloci da caricare e facili da usare.<\/p>\n\n\n\n

PWAs use advanced web technologies such as Service Workers<\/strong>, che consentono all’applicazione di funzionare offline e di inviare notifiche push. Inoltre, le PWA sono progettate per essere reattive, quindi si adattano automaticamente alle diverse dimensioni dello schermo dei dispositivi utilizzati dagli utenti.<\/p>\n\n\n\n

For PWAs to work correctly, however, the browser on which they run must support them. Currently, most modern browsers support PWAs<\/strong>, ma ci sono ancora alcune eccezioni. Inoltre, alcune funzionalit\u00e0 avanzate come l’accesso alle API del sistema operativo potrebbero non essere supportate su tutti i dispositivi.<\/p>\n\n\n\n

Web App and Progressive Web App development: main differences<\/h2>\n\n\n\n

There are two distinct approaches behind the development of web apps and progressive web apps (PWAs).<\/p>\n\n\n\n

A traditional web app<\/strong> \u00e8 essenzialmente un’applicazione web progettata per essere utilizzata su un browser. Pu\u00f2 essere accessibile tramite un URL e richiede una connessione Internet per funzionare correttamente. <\/p>\n\n\n\n

Web apps can be developed using technologies such as HTML<\/strong>, CSS <\/strong>And JavaScript<\/strong>, e possono offrire funzionalit\u00e0 come l’interazione con database, l’elaborazione di dati e l’accesso alle API.<\/p>\n\n\n\n

D’altra parte, le progressive web apps<\/strong> sono un tipo di web app che utilizza tecnologie web moderne per fornire un’esperienza utente pi\u00f9 ricca e simile a quella di un’app nativa. <\/p>\n\n\n\n

Le PWA possono essere installate sul dispositivo dell’utente e avere accesso a funzionalit\u00e0 come notifiche push, accesso offline e accesso al dispositivo (come la fotocamera o il sensore di posizione). Sono progettate per essere responsive e possono adattarsi a diverse dimensioni di schermo.<\/p>\n\n\n\n

Un elemento chiave delle PWA \u00e8 il concetto di “service workers<\/strong>“, ovvero uno script che viene eseguito in background e pu\u00f2 gestire eventi come notifiche push, sincronizzazione dei dati e caching. Questo consente alle PWA di funzionare offline o con connessioni di rete instabili, offrendo agli utenti un’esperienza pi\u00f9 fluida.<\/p>\n\n\n\n

Inoltre, le PWA offrono la possibilit\u00e0 di inviare notifiche push agli utenti, anche quando l’app non \u00e8 aperta. Questo pu\u00f2 essere un significant advantage for companies<\/strong> che desiderano raggiungere gli utenti in modo proattivo e mantenere l’engagement.<\/p>\n\n\n\n

Another advantage of PWAs is that they can be developed only once and distributed on different platforms<\/strong>, inclusi dispositivi desktop e mobili. Ci\u00f2 semplifica il processo di sviluppo e riduce i costi, poich\u00e9 non \u00e8 necessario creare un’app separata per ogni piattaforma.<\/p>\n\n\n\n

The advantages of Progressive Web Apps<\/h2>\n\n\n\n

There are 4 fundamental advantages for choosing to develop a Progressive Web App, which constitute some of the main PWA features: <\/p>\n\n\n\n

– No risk of ban from stores<\/strong>. Your PWA cannot be deleted from the digital store overnight, as there is no need to publish it on the same stores. It can be downloaded through your site.<\/p>\n\n\n\n

– No implementation constraints<\/strong>. To develop Android and IOS Apps, the stores impose specific implementation methods with respect to some functions of your App. This happens, for example, with the login functions or with the payment methods in the App.<\/p>\n\n\n\n

– All profits remain with you<\/strong>: No fees to pay to digital stores for all payments received through your App. The 100% of earnings therefore enters your pocket;<\/p>\n\n\n\n

– Simplicity and cost-effectiveness of production<\/strong>. Developing a Web App is cheaper both in the development and maintenance phases. On the programmer side, there is no need to use dedicated hardware, pay subscriptions, or learn to use proprietary languages of different platforms. <\/p>\n\n\n\n

Progressive Web Apps versus Native Apps and Hybrid Apps<\/h2>\n\n\n\n

Why choose create a PWA<\/strong> instead of a native App or a hybrid App? We will explain it to you by comparing the main differences.<\/p>\n\n\n\n

PWA vs Native App<\/h3>\n\n\n\n

Installation<\/strong>: le PWA non devono essere scaricate dallo store di app, ma possono essere aggiunte alla schermata home del dispositivo. Le app native, d’altra parte, devono essere scaricate e installate dallo store di app.<\/p>\n\n\n\n

Access to devices<\/strong>: PWAs do not have full access to devices, such as camera or storage, like native apps. However, some features such as geolocation and push notifications are available in PWAs.<\/p>\n\n\n\n

Dimension<\/strong>: PWAs tend to be lighter and faster than native apps, as they are designed to run on any device and use fewer resources.<\/p>\n\n\n\n

Updates<\/strong>: le PWA sono aggiornate automaticamente, senza richiedere all’utente di scaricare l’aggiornamento come avviene per le app native.<\/p>\n\n\n\n

PWA vs Hybrid Apps<\/h3>\n\n\n\n

Architecture<\/strong>: le PWA sono applicazioni web sviluppate utilizzando le tecnologie web, come HTML, CSS e JavaScript, e utilizzano le API web per fornire funzionalit\u00e0 avanzate come la geolocalizzazione e le notifiche push. D’altra parte, la creazione di app ibride passa dall’utilizzo di tecnologie web all’interno di un framework nativo, come Ionic o React Native, che permette di accedere alle funzionalit\u00e0 del dispositivo tramite API native.<\/p>\n\n\n\n

Distribution<\/strong>: le PWA possono essere utilizzate direttamente dal browser web, senza dover scaricare e installare un’applicazione. Le app ibride, invece, devono essere scaricate dallo store di app e installate sul dispositivo.<\/p>\n\n\n\n

Functionality<\/strong>: le PWA e le app ibride possono offrire funzionalit\u00e0 simili, come l’accesso offline, la geolocalizzazione e le notifiche push. Tuttavia, le app ibride possono accedere alle funzionalit\u00e0 del dispositivo in modo pi\u00f9 completo rispetto alle PWA.<\/p>\n\n\n\n

User experience<\/strong>: le PWA possono offrire un’esperienza utente simile a quella delle app native, con una grafica e un layout responsive. Le app ibride, d’altra parte, possono offrire un’esperienza utente ancora pi\u00f9 simile alle app native, grazie alla maggiore accessibilit\u00e0 alle funzionalit\u00e0 del dispositivo.<\/p>\n\n\n\n

PWA vs mobile website<\/h3>\n\n\n\n

User experience<\/strong>: Le PWA offrono un’esperienza utente simile a quella delle applicazioni native, con funzionalit\u00e0 avanzate come l’accesso offline, le notifiche push e l’accesso alle funzionalit\u00e0 del dispositivo. I siti web mobile, invece, si limitano a fornire un’esperienza web ottimizzata per i dispositivi mobili.<\/p>\n\n\n\n

Offline functionality<\/strong>: Le PWA sono progettate per funzionare offline grazie alla tecnologia di caching, il che significa che l’utente pu\u00f2 accedere all’app anche senza una connessione internet. I siti web mobile richiedono invece una connessione internet costante.<\/p>\n\n\n\n

Push notifications<\/strong>: Le PWA possono inviare notifiche push all’utente, proprio come le applicazioni native. I siti web mobile non possono inviare notifiche push.<\/p>\n\n\n\n

Access to device features<\/strong>: Le PWA offrono l’accesso alle funzionalit\u00e0 del dispositivo, come la fotocamera, il microfono e il GPS. I siti web mobile hanno un accesso limitato a queste funzionalit\u00e0.<\/p>\n\n\n\n

Startup icon<\/strong>: Le PWA possono essere salvate come icone di avvio sullo schermo home del dispositivo dell’utente, per un accesso rapido. I siti web mobile non hanno questa funzionalit\u00e0.<\/p>\n\n\n\n

Some success stories<\/h2>\n\n\n\n

Millions of users around the world already use Progressive Web Apps that companies from different sectors have decided to implement for various reasons.<\/p>\n\n\n\n

In some cases the reason was to make the application "lighter" in terms of space occupied on the devices. In other cases we wanted to focus on the better performance of PWAs compared to native apps. Finally, another reason is precisely the economic one, relating to the high commissions that the stores retained compared to some Apps.<\/p>\n\n\n\n

The most famous examples of Progressive Web Apps<\/strong>:<\/h3>\n\n\n\n

– Whatsapp Web;
– Starbucks;
– Uber;
– Spotify;
– Pinterest;
– Youtube. <\/p>\n\n\n\n

The latter is added to the list of PWAs that the giant Google has chosen to develop only in the last 3 years<\/strong>:<\/p>\n\n\n\n

– Youtube Music (da ottobre 2019);
– YouTube TV (da gennaio 2020);
– Google Stadia (da dicembre 2020);
– Google Duo (da giugno 2020);
– Google Chat (da maggio 2020); Google Drive (da gennaio 2020);
– Google Photos (da giugno 2018).<\/p>\n\n\n\n

To define the vastness of the areas of application, here is also a list of PWA for different industries<\/strong>:<\/p>\n\n\n\n

– PWA for ecommerce<\/strong>: AliExpress – Flipkart – Lanc\u00f4me;
– PWA for blogging<\/strong>: Medium – Forbes – The Washington Post;
– PWA for tourism<\/strong>: Airbnb – Booking.com – Kayak;
– PWA for financial services<\/strong>: TransferWise – Revolut – N26;
– PWA for online gaming<\/strong>: Gamepix – HTML5 Games – Instant Games.<\/p>\n\n\n\n

Progressive Web App development<\/h2>\n\n\n\n

Relying on professionals is imperative to obtain a functional PWA suited to your specific needs. To understand why, just think that the process of Progressive Web App development<\/strong> passes through at least 6 different phases, and requires specific skills:<\/p>\n\n\n\n

    \n
  1. Progettazione dell’interfaccia utente<\/strong>: La progettazione dell’interfaccia utente deve tenere conto della compatibilit\u00e0 con dispositivi mobili e desktop, dell’accessibilit\u00e0 e dell’esperienza utente.<\/li>\n\n\n\n
  2. Creating a Web App Manifest<\/strong>: Il Web App Manifest \u00e8 un file JSON che definisce l’aspetto dell’icona dell’applicazione, il nome dell’applicazione, la descrizione e altre informazioni sull’applicazione. Questo file viene utilizzato per installare l’applicazione sulla home screen del dispositivo dell’utente.<\/li>\n\n\n\n
  3. Implementation of Service Workers<\/strong>: Service Workers are JavaScript scripts that allow PWAs to work offline, manage resource caching, and send push notifications. Developers need to write code for the Service Worker, register it in the browser, and test it to make sure it works correctly.<\/li>\n\n\n\n
  4. Performance optimization<\/strong>: Le PWA devono essere veloci da caricare e reattive per fornire un’esperienza utente ottimale. Gli sviluppatori possono utilizzare tecniche come la compressione delle risorse, l’utilizzo di immagini ottimizzate e la riduzione del numero di richieste di rete per migliorare le prestazioni.<\/li>\n\n\n\n
  5. Testing<\/strong>: Una volta che l’applicazione \u00e8 stata sviluppata, gli sviluppatori devono testarla per verificare che funzioni correttamente su diverse piattaforme e dispositivi. Ci\u00f2 include il testing su diversi browser e la simulazione di diverse condizioni di rete.<\/li>\n\n\n\n
  6. Distribution<\/strong>: Dopo il testing, la PWA pu\u00f2 essere distribuita agli utenti. Gli utenti possono accedere all’applicazione tramite il browser e installarla sulla home screen del proprio dispositivo.<\/li>\n<\/ol>","protected":false},"excerpt":{"rendered":"

    PWAs combine two paths, that of creating apps for the digital stores of mobile devices and that of focusing on applications that can be used via browser. Find out why they are the best solution<\/p>","protected":false},"author":1,"featured_media":218026,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-218025","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","no-featured-image-padding","resize-featured-image"],"_links":{"self":[{"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/posts\/218025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/comments?post=218025"}],"version-history":[{"count":9,"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/posts\/218025\/revisions"}],"predecessor-version":[{"id":220202,"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/posts\/218025\/revisions\/220202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/media\/218026"}],"wp:attachment":[{"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/media?parent=218025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/categories?post=218025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.noitech.net\/en\/wp-json\/wp\/v2\/tags?post=218025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}