Super Progressive Web Apps

Descrizione

Progressive Web Apps (PWA) è una nuova tecnologia che combina il meglio del Web mobile e la migliore delle app mobili per creare un’esperienza Web mobile di qualità superiore. Sono installati sul telefono come una normale app (web app) e sono accessibili dalla schermata principale.

Gli utenti possono tornare al tuo sito web lanciando l’app dalla schermata principale e interagire con il tuo sito web attraverso un’interfaccia simile a un’app. I visitatori di ritorno sperimenteranno tempi di caricamento quasi istantanei e godranno dei grandi vantaggi prestazionali del tuo PWA!

Le app Web Super Progressive semplificano la conversione istantanea del tuo sito Web WordPress in un’app Web progressiva!

Una volta installato SuperPWA, gli utenti che navigano sul tuo sito Web da un dispositivo mobile supportato visualizzeranno un avviso “Aggiungi alla schermata Home” (dalla parte inferiore dello schermo) e potranno “installare il tuo sito web” nella schermata iniziale della loro dispositivo. Ogni pagina visitata viene archiviata localmente sul proprio dispositivo e sarà disponibile per la lettura anche quando sono offline!

SuperPWA è facile da configurare, ci vuole meno di un minuto per configurare la tua Progressive Web App! SuperPWA esegue una disinstallazione pulita rimuovendo tutte le voci di database e i file creati. Infatti, nessuna delle impostazioni predefinite viene salvata nel database finché non la si salva manualmente la prima volta. Vai avanti e provaci.

E la parte migliore? Se ti blocchi, siamo qui per guardarti le spalle! Apri un ticket di supporto se hai una domanda o hai bisogno di una funzione. Siamo davvero entusiasti di ascoltare il tuo feedback e vogliamo davvero aiutarti a creare la migliore app web progressiva per il tuo sito Web WordPress!

Demo veloce?

  • Apri SuperPWA.com in un dispositivo supportato.
  • Aggiungi il sito Web alla schermata iniziale dal prompt Aggiungi alla schermata iniziale (Chrome per Android) o dal menu del browser.
  • Apri l’app dalla schermata Home e vedrai la schermata iniziale.
  • Disattiva i dati e la connessione Wi-Fi per andare offline e aprire l’app. Potrai comunque vedere l’app e sfogliare le pagine che hai già visitato.
  • Accedi a una pagina che non hai mai visitato prima. Verrà visualizzata la pagina offline.

Grazie agli appassionati di PWA!

Siamo umiliati dal feedback della community. Grazie a tutti coloro che hanno creduto in noi e hanno provato il nostro plugin. Il tuo feedback è stato inestimabile e abbiamo imparato molto dalla tua esperienza. Grazie per il vostro amore e supporto e speriamo di restituire l’amore sforzandoci di offrirvi il miglior plug-in Progressive Web Apps per WordPress!

Cosa c’è nella scatola

Ecco le caratteristiche attuali di Super Progressive Web Apps:

  • Genera un manifest per il tuo sito web e aggiungilo alla testa del tuo sito web.
  • Imposta l’icona dell’applicazione per la tua Progressive Web App.
  • Imposta il colore di sfondo per la schermata iniziale della tua Progressive Web App.
  • Il tuo sito web mostrerà la notifica “Aggiungi alla schermata home ” quando si accede a un browser supportato.
  • Caching aggressivo delle pagine usando CacheStorage API.
  • Le pagine una volta memorizzate nella cache vengono pubblicate anche se l’utente è offline.
  • Imposta pagina offline personalizzata: seleziona la pagina che desideri venga visualizzata dall’utente quando si accede a una pagina non presente nella cache e l’utente è offline.
  • Novità della versione 1.2: supporto per la proprietà meta del colore del tema. Cambia il colore della barra degli indirizzi del browser di Chrome, Firefox OS e Opera per abbinare i colori del tuo sito web.
  • Novità della versione 1.2: ora è possibile modificare il nome dell’applicazione e il nome breve dell’applicazione.
  • Novità della versione 1.2: imposta la pagina iniziale del tuo PWA.
  • Novità della versione 1.2: Imposta la versione accelerata delle pagine mobili (AMP) della pagina iniziale. Plugin supportati: AMP per WordPress, AMP per WP, Better AMP, AMP Supremacy, WP AMP.
  • Novità della versione 1.3: Aggiunto il supporto per la schermata iniziale di alta qualità. Ora puoi impostare l’icona 512×512 per la schermata iniziale della tua Progressive Web App.
  • Novità della versione 1.3: le app Web Super Progressive ora tengono conto degli aggiornamenti dei contenuti e aggiornano la cache man mano che si aggiorna il sito Web.
  • Novità della versione 1.3: Miglioramento della gestione degli aggiornamenti dei servizi di manutenzione nel browser.
  • Novità della versione 1.4: ora puoi impostare l’orientamento predefinito del tuo PWA. Scegli tra “qualsiasi ” (Segui orientamento dispositivo), “Ritratto ” e “Paesaggio “.
  • Novità della versione 1.4: ora è possibile impostare la proprietà theme_color nel manifest.
  • Novità della versione 1.5: integrazione di OneSignal per le notifiche push.
  • Novità della versione 1.6: compatibilità di rete multisito WordPress.
  • Novità della versione 1.7: ecco i componenti aggiuntivi per SuperPWA! Spedisce con UTM Tracking Add-On per tracciare le visite provenienti dal tuo PWA.
  • Novità della versione 1.8: i problemi di compatibilità con OneSignal sono ora risolti!
  • Novità della versione 1.8: Nuovo componente aggiuntivo: Icone Apple Touch che imposta le icone delle tue app come icone Apple Touch.
  • New in version 2.0: SuperPWA is now compatible with WordPress installed in a sub-folder.
  • New in version 2.0: You can now set display property from SuperPWA settings.

Funzioni imminenti:

  • Avviso Indicatore Offline.

Requisiti minimi dell’applicazione Web progressiva

Le Web App progressive richiedono che il tuo sito Web WordPress sia fornito da un’origine sicura, vale a dire che il tuo sito web deve essere HTTPS e non HTTP. Se il tuo sito web non è HTTPS, ti preghiamo di contattare l’host in merito. Puoi anche chiederci se hai bisogno di aiuto.

Supporto per dispositivi e browser per PWA

Le app web progressive necessitano di browser che supportano manifest e service worker. Attualmente Google Chrome (versione 57+), Chrome per Android (62), Mozilla Firefox (57), Firefox per Android (58) sono i principali browser che supportano PWA.

L’elenco è in rapida crescita e sarà probabilmente supportato nella maggior parte dei principali browser entro la fine di quest’anno.

Come convertire il tuo sito Web WordPress in un’applicazione Web progressiva

Installazione di WordPress

  • Visita Admin WordPress & gt; Plugin & gt; Aggiungere nuova
  • Cerca “Super Web Progressive App”
  • Fare clic su “Installa ora ” e quindi su “Attiva ” applicazioni Web super progressive

Installare manualmente:

  • Carica la cartella super-progressive-web-apps nella directory /wp-content/plugins/ sul tuo server
  • Vai a Admin WordPress & gt; plugin
  • Attiva il plugin Super Progressive Web Apps dall’elenco.

Personalizzazione della tua app Web progressiva

La tua app Web progressiva dovrebbe essere pronta a testare con le impostazioni predefinite all’attivazione. Puoi personalizzarlo ulteriormente e renderlo veramente tuo.

  • Vai a Admin WordPress & gt; SuperPWA
  • Impostare un colore di sfondo per la schermata iniziale da visualizzare quando il PWA viene aperto su un dispositivo mobile.
  • Imposta l’icona dell’applicazione. Questa sarà l’icona del tuo PWA quando viene aggiunta alla schermata iniziale in un dispositivo mobile. L’icona deve essere un’immagine PNG e di dimensioni esattamente 192 x 192 pixel.
  • Imposta la pagina offline. Questa pagina verrà visualizzata se l’utente è offline e la pagina richiesta non è già memorizzata nella cache. Idealmente dovresti creare una pagina WordPress dedicata e impostarla qui. All’interno della pagina che crei, puoi aggiungere una nota che legge, “Sembra che tu sia offline e che la pagina richiesta non sia disponibile al momento. Ricontrolla di nuovo una volta che sei online. “.
  • Fai clic su “Salva impostazioni “.

Test della tua app Web progressiva

  • Apri un browser supportato in un dispositivo supportato (ad esempio: Chrome per Android (62 o versione successiva) in un telefono Android)
  • Inserisci il tuo sito Web e aspetta che si carichi completamente
  • Dovresti vedere una finestra popup con l’icona dell’applicazione e un pulsante che legge “AGGIUNGI ALLA SCHERMATA HOME “.
  • Fare clic su di esso e il tuo PWA verrà aggiunto alla schermata iniziale. Attendere il completamento dell’installazione.
  • Vai alla schermata iniziale e apri il tuo PWA. Cerca in alcune pagine se vuoi. Chiudi l’app.
  • Disconnettiti da Internet e apri di nuovo il tuo PWA. Dovresti essere in grado di vedere tutte le pagine che hai precedentemente sfogliato.
  • Prova a visitare una pagina che non hai visitato prima. Dovresti vedere la pagina che hai impostato come “Pagina Offline ” nelle impostazioni di SuperPWA.

Risoluzione dei problemi della tua app Web progressiva

Uh Oh. Il tuo PWA non ha funzionato come previsto? Non vedi la notifica “Aggiungi alla schermata Home “?

  • Assicurati che sul tuo sito web sia installato un certificato SSL. vale a dire il tuo sito web dovrebbe essere https anziché http (come in https://your-domain.com).
  • Assicurati di utilizzare un dispositivo supportato e un browser supportato. Fare riferimento all’elenco di “Supporto per dispositivi e browser per PWA ” sopra.
  • Assicurati che l’icona dell’applicazione e l’icona della schermata iniziale siano di formato PNG e 192px X 192px e 512px X 512px rispettivamente.
  • Cancella la cache del browser e riprova. In Chrome per Android, vai in Impostazioni & gt; Privacy & gt; “Cancella dati di navigazione”.
  • Se l’icona dell’applicazione non viene aggiornata dopo la prima installazione, eliminare PWA dal telefono, svuotare la cache del browser e installarla di nuovo. (Stiamo lavorando per renderlo migliore).
  • Crea un nuovo ticket di supporto e condividi un link al tuo sito web. Daremo un’occhiata e capiremo per voi.

Richieste di funzionalità, problemi, richieste di pull

Ecco il nostro repository su GitHub . Inviaci le tue richieste di pull, richieste di funzionalità o problemi, se presenti.

Chi siamo

Siamo un duo che si è entusiasmato per l’idea. La nostra missione è semplice: aiutaci a creare un fantastico PWA che i tuoi utenti vorranno avere sulla loro schermata iniziale.

Quando abbiamo sentito parlare di PWA per la prima volta, volevamo imparare tutto su di esso. Abbiamo trascorso infinite ore ad apprendere e vogliamo condividerlo con il mondo.

Vi preghiamo di darci il vostro feedback e supporto costruttivo.

Screenshot (schermate di esempio)

  • Pagina Impostazioni in Amministratore di WordPress & gt; SuperPWA & gt; impostazioni

Installazione

Per installare questo plugin:

  1. Installa il plugin attraverso l’interfaccia di amministrazione di WordPress o carica la cartella del plugin in /wp-content/plugins/ tramite FTP.
  2. Attiva il plugin attraverso la schermata ‘Plugin’ in WordPress.
  3. Vai a Admin WordPress & gt; SuperPWA

FAQ

Se hai domande, ti preghiamo di chiedere al forum di supporto .

Le app Web progressive funzionano su dispositivi iOS?

A partire da Safari per iOS 11.3, i dispositivi Apple offrono un supporto parziale per PWA. Tuttavia, non esiste ancora una richiesta di schermata iniziale da aggiungere alla schermata iniziale. Puoi aggiungere la tua app toccando il pulsante “Aggiungi alla schermata Home ” nel menu di condivisione del browser (cerca l’icona quadrata con una freccia in primo piano).

Proprio come te, attendiamo con impazienza le prossime versioni e speriamo di vedere una migliore compatibilità nei prossimi mesi.

Come personalizzare la schermata iniziale

Puoi facilmente modificare l’icona e il colore di sfondo in SuperPWA & gt; Impostazioni.

Ulteriori personalizzazioni non sono disponibili al momento, non a causa di alcuna limitazione di SuperPWA, ma perché non sono disponibili nella tecnologia PWA. Quando in futuro arriveranno altre opzioni, le aggiungeremo a SuperPWA.

Come tenere traccia delle visite originate dalla tua app Web progressiva

Puoi monitorare le visite dal tuo PWA nel tuo software di analisi (ad esempio Google Analytics) utilizzando l’add-on UTM Tracking di SuperPWA. Vai a SuperPWA & gt; Add-on e attivazione del tracciamento UTM. Quindi in SuperPWA & gt; Traccia UTM, è possibile impostare i parametri UTM secondo necessità. Si prega di fare riferimento alla documentazione per ulteriori informazioni.

Conformità al GDPR

SuperPWA non raccoglie o archivia i dati dell’utente, né imposta cookie o memorizza i dati di tracciamento. Il contenuto visitato dagli utenti dal tuo PWA è memorizzato nel dispositivo dell’utente stesso, nella cache del browser. Questo è molto simile al modo in cui i browser moderni memorizzano nella cache i contenuti offline per una navigazione più veloce.

Con l’add-on di monitoraggio UTM, sarai in grado di differenziare le visite provenienti dal tuo PWA nel tuo software di analisi. Potrebbe essere necessario includere questo nella vostra politica sulla privacy. Tieni presente che SuperPWA non traccia le visite, ti aiutiamo solo ad aggiungere i parametri UTM all’URL della Pagina iniziale della tua app in modo che gli strumenti di analisi di terze parti possano differenziare le visite.

Sentiti libero di metterti in contatto in caso di domande.

Recensioni

Agosto 20, 2019
Haven't coded a website for a long while so Super PWA saved me from a crash course in some of the new tech available today, which has kept me rather busy catching up. It's important for my wordpress site to reflect my apps and Super PWA makes this possible without having to learn PWA coding from scratch. I was even able to quickly implement it on a single page design. Super job team! Love your work! <3
Luglio 18, 2019
Wow! Well done to the developers of the app. It is super easy to install and works like a charm! Awesomely nifty!!! THANK YOU!
Leggi tutte le recensioni di 128

Crediti e riconoscimenti

“Super Progressive Web Apps” è un software open source. Le persone che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito.

Collaboratori

“Super Progressive Web Apps” è stato tradotto in 11 lingue. Grazie ai traduttori per i loro contributi.

Traduci “Super Progressive Web Apps” nella tua lingua.

Ti interessa lo sviluppo?

Esplora il Codice segui il Repository SVN iscriviti al Log delle Modifiche. Puoi farlo tramite RSS con un lettore di feed.

Changelog (registro delle modifiche)

2.0.2

  • Date: 16.January.2019
  • Bug Fix: Fix fatal error in PHP versions prior to PHP 5.5. “Cant use function return value in write context”.

2.0.1

  • Date: 15.January.2019
  • Enhancement: Added compatibility for setups where dynamic files are not supported.

2.0

  • Date: 28.December.2018
  • Tested with WordPress 5.0.2.
  • Enhancement: Dynamic service worker and manifest.
  • Enhancement: SuperPWA is now compatible with WordPress in a sub-folder.
  • Enhancement: Added UI to set Display property in the web app manifest.
  • Enhancement: Limit short_name to 12 characters to meet Lighthouse recommendation.
  • Enhancement: Added PHP CodeSniffer to stick to “WordPress-Extra” coding standards. Thanks Daniel for the work.
  • Enhancement: SuperPWA is available in 12 languages now, thanks to the awesome translators! Translators are credited in the release note.

1.9

  • Date: 25.July.2018
  • Tested with WordPress 4.9.7.
  • Enhancement: Added compatibility with Google Chrome 68 Mini Info-Bar.
  • Enhancement: Added support for tagDiv AMP Plugin which ships with Newspaper theme and Newsmag theme. If you use this theme, you can now use AMP version of the start page.
  • Enhancement: Added support for images in offline page. Images added to offline page are now cached during service worker activation.
  • Enhancement: Improved the service worker installation routine to handle invalid entities in the service worker dependencies.
  • Enhancement: SuperPWA is now translated to French, thanks to @romainvincent and Spanish, thanks to @arkangel.
  • Bug Fix: Fixed issue where translation files in /languages/ folder was not being loaded.

1.8.1

1.8

  • Date: 31.May.2018
  • Tested with WordPress 4.9.6.
  • New Add-On: Apple Touch Icons. Set the Application Icon and Splash Screen Icon as Apple Touch Icons for compatibility with iOS devices.
  • Enhancement: Added support for Add to Home Screen prompt for Chrome 68 and beyond.
  • Enhancement: Better add-on activation and deactivation by hooking onto admin_post action.
  • Enhancement: Attempt to generate manifest and service worker automatically on visiting the SuperPWA settings page after adjusting root folder permissions.
  • Enhancement: Generated a .pot file with all strings for translation. You can also translate SuperPWA to your language by visiting translate.wordpress.org
  • Bug Fix: Compatibility issues with OneSignal are resolved for single installs.
  • Bug Fix: Updated plugin action links and admin notices with the correct admin menu link.

1.7.1

  • Date: 05.May.2018
  • Bug Fix: Fix fatal error in PHP versions prior to PHP 5.5. “Cant use function return value in write context”.

1.7

  • Date: 03.May.2018
  • Minimum required WordPress version is now 3.6.0 (previously 3.5.0).
  • New Feature: Add-Ons for SuperPWA is here!
  • New Feature: SuperPWA is now a top-level menu to accommodate for the Add-Ons sub-menu page.
  • New Feature: Add UTM Tracking parameters to the Start URL with the UTM Tracking Add-On.
  • Enhancement: Service worker URLs are now relative to accommodate for domain mapped Multisites.
  • Bug Fix: Incorrect start_url when WordPress is installed in a folder, or when inner pages are used as start_url.
  • Bug Fix: Incorrect manifest and service worker URLs when WordPress is installed in a folder.

1.6

  • Date: 23.April.2018
  • New Feature: WordPress Multisite Network Compatibility. One of the most requested features for SuperPWA is now here! Thanks @juslintek for doing a major share of the heavy lifting.
  • New Feature: Added description to the manifest. You can now include a brief description of what your app is about.
  • Enhancement: Moved manifest to the very top of wp_head for better compatibility with some browsers.
  • Enhancement: Improved the file and folder naming, organization, and inline documentation for better readability.
  • Enhancement: Force https:// on all assets and dependencies solving the problem of http:// URLs in manifest and service worker once and for all.
  • Enhancement: Relative URL for manifest for out of the box compatibility with CDN’s.
  • Enhancement: Removed forcing of trailing slash on manifest and service worker URLs for better compatibility.

1.5

  • Date: 18.March.2018
  • New Feature: OneSignal integration for Push notifications.
  • Enhancement: Moved manifest to the top of wp_head for easier detection by browsers.
  • Enhancement: Added support for custom AMP endpoints for AMP for WordPress and AMP for WP.
  • Enhancement: Added UI notice when using AMP for WordPress to warn user not to use the AMP version of start page if the start page is the homepage, the blog index, or the archives page.

1.4

  • Date: 21.February.2018
  • New Feature: Added UI for default orientation of your PWA. Orientation can now be set as “any”, “portrait” or “landscape”. Feature request from @doofustoo.
  • New Feature: Added UI for theme_color property in manifest. Feature request from @krunalsm.
  • Enhancement: Improved compatibility with all major Accelerated Mobile Pages (AMP) plugins.
  • Enhancement: Improved handling of external resources.

1.3.1

  • Date: 15.February.2018
  • Enhancement: Improved how Start Page url is handled in the service worker to be compatible with plugins that force SSL.
  • Enhancement: Improved how start_url is handled in the manifest.
  • Enhancement: Better handling of external resources.

1.3

  • Date: 10.February.2018
  • Nuova funzionalità: aggiunto il supporto per la schermata iniziale di alta qualità. Ora puoi impostare l’icona 512×512 per la schermata iniziale della tua Progressive Web App.
  • Miglioramento: le app Web Super Progressive ora tengono conto degli aggiornamenti dei contenuti e aggiornano la cache man mano che si aggiorna il sito Web.
  • Miglioramento: migliorata la gestione degli aggiornamenti del servizio di assistenza in-browser.
  • Miglioramento: Aggiunto aggiornamento automatico di manifest e service worker sull’upgrade del plugin.
  • Bug Fix: Only GET requests are served from the cache now. Fixes this.

1.2

  • Date: 06.February.2018
  • New Feature: Support for theme-color.
  • New Feature: Now you can edit the Application Name and Application Short name.
  • New Feature: Set the start page of your PWA.
  • New Feature: Set AMP version of the start page. Supported plugins: AMP for WordPress, AMP for WP, Better AMP, AMP Supremacy, WP AMP.
  • UI Improvement: Better organization of plugin settings. More intuitive with inline help.
  • UI Improvement: Added admin notice with a link to settings page on plugin activation.
  • UI Improvement: Added checks for manifest, service worker and HTTPS and display the status neatly in the UI.
  • Bug Fix: Fix a parse error that showed up only on PHP 5.3.

1.1.1

  • Date: 30.January.2018
  • Bug Fix: Fix fatal error in PHP versions prior to PHP 5.5. “Cant use function return value in write context”. PHP manual says “Prior to PHP 5.5, empty() only supports variables; anything else will result in a parse error.”

1.1

  • Date: 28.January.2018
  • New Feature: Aggressive caching of pages using CacheStorage API.
  • New Feature: Pages once cached are served even if the user is offline.
  • New Feature: Set custom offline page. Select the page you want the user to see when a page that isn’t in the cache is accessed and the user is offline.

1.0

  • Date: 22.January.2018
  • First release of the plugin.