Tutorialdock | Free Web Resources

Creare una Web App installabile per Chrome

| di:

launcher Creare una Web App installabile per Chrome

Google mette a disposizione di utenti e developer un Web Store di estensioni che permettono di collegare il proprio sito o applicazione web direttamente dalla pagina iniziale di Chrome.

Nel Chrome Web Store si possono reperire innumerevoli strumenti più o meno utili da avere sempre a portata di mouse.

Qual’è il vantaggio di avere un’estensione?

Grazie all’estensione tutti gli utenti possono accedere alla Web App con un solo click appena aprono il browser: inoltre con una Web App si può sfruttare il servizio di geolocalizzazione o l’utilizzo della webcam, l’utente dovrà dare il permesso alla Web App soltanto una volta.

Dal momento che la maggior parte delle Web App sono hostate, la nostra estensione consisterà in un’icona e in un link che rimanda ad esse. La nostra estensione riguarderà Google Calendar.

Per creare un’estensione sono necessari due file:

  • manifest.json
  • icon128x128.png
  • Manifest.json

    Questo è l’unico file, dei due, che non può essere chiamato in altro modo.

    Generiamolo in una directory che chiamiamo, per esempio, webapp. Lo apriamo con il nostro editor di testo (è sufficiente il Blocco Note) e scriviamo:

    {
      "name": "Great App Name",
      "description": "Pithy description (132 characters or less, no HTML)",
      "version": "0.0.0.1",
      "icons": {
        "128": "icon_128.png"
      },
      "app": {
        "urls": [
          "http://mysubdomain.example.com/"
        ],
        "launch": {
          "web_url": "http://mysubdomain.example.com/"
        }
      }
    }

    Al posto di "Great App Name" scriviamo "Google Calendar". In questo modo l’estensione verrà rinominata.
    Al posto di "Pithy description (132 characters or less, no HTML)" inseriamo una descrizione di non più di 132 caratteri, senza usare HTML poichè non viene riconosciuto. La versione rimane invariata.
    Analizziamo ora questo codice:

      "icons": {
        "128": "icon_128.png"
      },

    All’interno di queste due parentesi graffe si inseriscono i link alle icone, specificandone l’esatta path e la dimensione. 128px sono obbligatori se si vuole un’icona di buona qualità, poichè Chrome la visualizzerà in home di questa grandezza.

    Quindi noi scriveremo:

      "icons": {
        "128": "icon128x128.png"
      },

    Dato che abbiamo una sola icona, questa: 128 Creare una Web App installabile per Chrome, e che l’abbiamo salvata nella directory principale, la fatica è poca.

    Ora arriva la parte più importante dell’estensione: il link alla Web App.

     "app": {
        "urls": [
          "http://mysubdomain.example.com/"
        ],
        "launch": {
          "web_url": "http://mysubdomain.example.com/"
        }
      }

    Al posto di "http://mysubdomain.example.com/" scriveremo "https://www.google.com/calendar", in entrambi i casi, perchè l’applicazione google “lavora” soltanto in questo url e non si sposta mai dall’url in cui è stata lanciata. Se invece la nostra applicazione lavora anche su url diversi lo si deve specificare all’interno di "urls":[ ] così da far godere anche quegli url degli stessi privilegi della pagina principale.

    Il debug

    Effettuare il debug di una estensione è semplice:
    Si entra in CHROME TOOLS Creare una Web App installabile per Chrome Strumeti > Estensioni.
    Poi premiamo su “Modalità sviluppatore” e sul bottone

    Selezioniamo la nostra cartella.
    Se tutto è andato a buon fine dovremmo vedere nella pagina iniziale di Chrome questo:
    estensione calendar Creare una Web App installabile per Chrome
    Cliccandoci sopra dovrebbe aprirsi Google Calendar.

    Tags:


    L'Autore

    Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

    • Ethan G Jordan

      >_> penso che queste chrome app siano una grande cavolata >_> pero, se i sono anche le app vere e proprie mi ricredo (non lo gonosco bene) anche perché altrimenti non avrebbe senso pagarle!

    • http://www.facebook.com/matteomorrichini Mattew Mor

      solo una precisazione: bisogna aggiungere “manifest_version”: 2, con la virgola finale così come l’ho scritto….sennò non funziona.

      • http://www.facebook.com/matteomorrichini Mattew Mor

        ah….bisogna aggiungerlo prima della descrizione.

        • Giuseppe

          scusa, dove?

    Tips: abilitare Airdrop sui mac non supportati ufficialmente