Progressiivse veebirakenduse jagamise sihtkäsitleja: kohandatud jagamisandmete töötlemine

Web Share Target API võimaldab progressiivsetel veebirakendustel (PWA) sujuvalt integreeruda kasutajate seadmete loomulike jagamisvõimalustega. See lubab teie PWA-l vastu võtta teistest rakendustest jagatud andmeid, nagu tekst, pildid või URL-id, ja neid kohandatud viisil töödelda. See juhend süveneb jagamise sihtkäsitlejate loomisesse ja kasutamisse teie PWA-des, keskendudes kohandatud jagamisandmete töötlemisele parema kasutajakogemuse saavutamiseks.

Web Share Target API ja PWA-de mõistmine

Progressiivsed veebirakendused kasutavad kaasaegseid veebitehnoloogiaid, et pakkuda loomulike rakenduste sarnaseid kogemusi. Need on usaldusväärsed, kiired ja kaasahaaravad, võimaldades kasutajatel neile otse oma avaekraanilt juurde pääseda. Web Share Target API laiendab seda funktsionaalsust, muutes PWA-d veelgi mitmekülgsemaks, võimaldades neil toimida teistest rakendustest jagatud sisu sihtmärkidena.

Põhimõisted

• Veebirakenduse manifest: PWA süda, mis määratleb teie rakenduse kohta metaandmed, sealhulgas jagamise sihtmärgi konfiguratsiooni.
• Jagamise sihtkäsitleja: JavaScripti kood, mis püüab kinni ja töötleb teie PWA-le jagatud andmeid.
• Jagamisandmed: Jagavast rakendusest saadud teave, näiteks tekst, pildid või URL-id.
• Ulatus: Määratleb, milliste URL-ide jaoks PWA saab jagatud andmeid käsitleda.

Jagamise sihtmärgi seadistamine veebirakenduse manifestis

Esimene samm on oma jagamise sihtmärgi konfigureerimine veebirakenduse manifestis. See JSON-fail annab brauserile teavet teie PWA kohta, sealhulgas selle kohta, kuidas see peaks jagamistaotlusi käsitlema. Teie manifesti liige share_target on ülioluline.

            {
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "share_target": {
    "action": "/share-target-handler",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        {
          "name": "image",
          "accept": ["image/*"]
        }
      ]
    }
  }
}

            

              
                Copy
              
            
          

Selgitus:

• action: Teie PWA lõpp-punkti URL, mis käsitleb jagatud andmeid (nt /share-target-handler).
• method: Jagamistaotluse jaoks kasutatav HTTP-meetod (tavaliselt POST).
• enctype: Määrab, kuidas vormiandmed on kodeeritud (multipart/form-data on levinud failide üleslaadimisel).
• params: Kirjeldab oodatavaid andmeparameetreid. Siin deklareerite, milliseid andmetüüpe te jagavast rakendusest ootate.
• title: Jagatud sisu pealkiri.
• text: Jagamise tekstisisu.
• url: Jagamisega seotud URL.
• files: Failispetsifikatsioonide massiiv, mida kasutatakse jagatud piltide või muude failide käsitlemiseks. name on see, kuidas te faili oma käsitlejas tuvastate. accept määrab lubatud failitüübid (nt image/* mis tahes pildi jaoks).

Jagamise sihtkäsitleja ehitamine (JavaScript)

Kui olete oma manifesti konfigureerinud, loote JavaScripti koodi, mis töötleb jagatud andmeid. See hõlmab tavaliselt POST-päringu käsitlemist, mis saadetakse teie action URL-ile. Seda saab teha serveripoolselt raamistikuga nagu Node.js või kliendipoolselt teenusetöötajas, kui loote väga väikest ja lihtsat käsitlejat.

Põhiline teksti ja URL-i käsitlemise näide

Siin on põhiline näide serveripoolse lähenemisviisiga (Node.js koos Expressiga), mis püüab teksti ja URL-e:

            
// server.js (Node.js koos Expressiga)
const express = require('express');
const multer = require('multer'); // multipart/form-data käsitlemiseks
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' }); // Konfigureeri multer failide üleslaadimiseks
const port = 3000;

app.use(express.static('public')); // Serveeri staatilisi varasid

// Parsige URL-kodeeritud kehasid
app.use(express.urlencoded({ extended: true }));


app.post('/share-target-handler', upload.any(), (req, res) => {
    // Juurdepääs jagatud andmetele req.body-st
    const title = req.body.title;
    const text = req.body.text;
    const url = req.body.url;

    console.log('Jagatud pealkiri:', title);
    console.log('Jagatud tekst:', text);
    console.log('Jagatud URL:', url);

    // Töötle jagatud andmeid vastavalt vajadusele (nt salvesta andmebaasi, kuva lehel)
    res.send(`
        
Jagamine vastu võetud!
        
Pealkiri: ${title || 'Puudub'}
        
Tekst: ${text || 'Puudub'}
        
URL: ${url || 'Puudub'}
    `);
});

app.listen(port, () => {
    console.log(`Server kuulab pordil ${port}`);
});

            

              
                Copy
              
            
          

Selgitus:

• Kasutame Node.js serverit koos Expressiga, et luua lihtne rakendus, mis kasutab `multer` teeki multipart/form-data jaoks.
• Marsruut `/share-target-handler` käsitleb `POST`-päringuid.
• Käsitleja eraldab päringu kehast parameetrid `title`, `text` ja `url`.
• Seejärel logib kood andmed konsooli ja kuvab need lihtsal HTML-lehel.

Piltide käsitlemise näide

Täiustame oma käsitlejat pildifailide töötlemiseks. Muutke serveri koodi järgmiselt:

            
// server.js (Node.js koos Expressiga, laiendatud)
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' }); // Konfigureeri multer failide üleslaadimiseks
const port = 3000;

app.use(express.static('public')); // Serveeri staatilisi varasid, sealhulgas uploads kausta.

// Parsige URL-kodeeritud kehasid
app.use(express.urlencoded({ extended: true }));

app.post('/share-target-handler', upload.any(), (req, res) => {
    const title = req.body.title;
    const text = req.body.text;
    const url = req.body.url;
    const files = req.files; // Juurdepääs üleslaaditud failidele

    console.log('Jagatud pealkiri:', title);
    console.log('Jagatud tekst:', text);
    console.log('Jagatud URL:', url);
    console.log('Jagatud failid:', files);

    let imageHtml = '';
    if (files && files.length > 0) {
        files.forEach(file => {
            const imagePath = path.join('/uploads', file.filename);
            imageHtml += ``;
        });
    }

    res.send(`
        
Jagamine vastu võetud!
        
Pealkiri: ${title || 'Puudub'}
        
Tekst: ${text || 'Puudub'}
        
URL: ${url || 'Puudub'}
        ${imageHtml}
    `);
});

app.listen(port, () => {
    console.log(`Server kuulab pordil ${port}`);
});

            

              
                Copy
              
            
          

Olulised muudatused:

• Nüüd impordime `multer` paketi, mis vastutab mitmeosaliste vormiandmete (sh failide) parsimise eest.
• `multer` konfiguratsioon salvestab üleslaaditud failid `uploads` kausta (veenduge, et see kaust oleks teie projektis olemas). Tee argument `dest: 'uploads/'` määratleb kohaliku asukoha, kuhu failid salvestatakse.
• `req.files` omadus, mille täidab `multer`, sisaldab failiobjektide massiivi, kui faile jagati.
• Piltide käsitlemise jaotis itereerib läbi üleslaaditud failide ja renderdab iga pildi jaoks `img` sildi. Funktsioon `path.join()` konstrueerib õige tee üleslaaditud piltideni.
• Oluline on, et me kasutame `app.use(express.static('public'));`, et serveerida staatilisi varasid meie uploads kaustast. See tagab, et üleslaadimised on avalikult kättesaadavad.

Selle testimiseks peaksite jagama pildi teisest rakendusest (nt oma seadme fotogaleriist) oma PWA-le. Jagatud pilt kuvatakse seejärel vastuse lehel.

Teenusetöötaja (Service Worker) integreerimine (kliendipoolne töötlemine)

Keerukamate stsenaariumide või võrguühenduseta võimaluste jaoks saab jagamise sihtkäsitlemist rakendada teenusetöötajas. See lähenemine võimaldab PWA-l toimida ka ilma aktiivse võrguühenduseta ja annab suurema kontrolli andmetöötlusloogika üle. See näide eeldab, et teil on juba registreeritud teenusetöötaja.

            
// service-worker.js
self.addEventListener('fetch', (event) => {
  // Kontrolli, kas päring on meie jagamise sihtkäsitlejale
  if (event.request.url.includes('/share-target-handler') && event.request.method === 'POST') {
    event.respondWith(async function() {
      try {
        const formData = await event.request.formData();
        const title = formData.get('title');
        const text = formData.get('text');
        const url = formData.get('url');
        const imageFile = formData.get('image'); // Juurdepääs üleslaaditud pildifailile

        console.log('Jagatud pealkiri (SW):', title);
        console.log('Jagatud tekst (SW):', text);
        console.log('Jagatud URL (SW):', url);
        console.log('Jagatud pilt (SW):', imageFile); // Käsitle pildifaili vastavalt vajadusele

        // Töötle jagatud andmeid (nt salvesta IndexedDB-sse)
        // Näide: Salvesta IndexedDB-sse
        if (title || text || url || imageFile) {
          await storeShareData(title, text, url, imageFile);  // Eeldame, et see on defineeritud.
        }

        return new Response('Jagamine vastu võetud ja töödeldud!', { status: 200 });
      } catch (error) {
        console.error('Viga jagamise käsitlemisel:', error);
        return new Response('Viga jagamise töötlemisel.', { status: 500 });
      }
    }());
  }

  // Muu fetch sündmuste käsitlemine (nt vahemällu salvestamine, võrgupäringud)
  // ...
});

async function storeShareData(title, text, url, imageFile) {
    const dbName = 'shareDataDB';
    const storeName = 'shareStore';
    const db = await new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, 1);

        request.onerror = (event) => {
            reject(event.target.error);
        };

        request.onsuccess = (event) => {
            resolve(event.target.result);
        };

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            if (!db.objectStoreNames.contains(storeName)) {
                db.createObjectStore(storeName, { autoIncrement: true });
            }
        };
    });

    const transaction = db.transaction(storeName, 'readwrite');
    const store = transaction.objectStore(storeName);

    const data = {
        title: title,
        text: text,
        url: url,
        timestamp: Date.now()
    };

    if (imageFile) {
        const reader = new FileReader();
        reader.onload = (event) => {
           data.image = event.target.result;
           store.add(data);
        };

        reader.onerror = (event) => {
            console.error("Viga pildifaili lugemisel:", event.target.error);
        };
        reader.readAsDataURL(imageFile);
    } else {
        store.add(data);
    }

    await new Promise((resolve, reject) => {
        transaction.oncomplete = resolve;
        transaction.onerror = reject;
    });
}

            

              
                Copy
              
            
          

Selgitus:

• Teenusetöötaja püüab kinni fetch sündmused.
• See kontrollib, kas päring on POST teie jagamise sihtkäsitleja URL-ile (/share-target-handler).
• Teenusetöötaja kasutab jagatud andmete parsimiseks event.request.formData().
• See eraldab andmeväljad (pealkiri, tekst, URL ja pilt). Faili käsitletakse kui Blobi.
• Jagatud andmeid töödeldakse seejärel teenusetöötajas endas. Selles näites salvestatakse andmed IndexedDB-sse.
• Kood pakub funktsiooni storeShareData() (mis võib asuda mujal teie koodibaasis), et salvestada jagamisandmed IndexedDB-sse.

Olulised kaalutlused teenusetöötajatega:

• Asünkroonsed operatsioonid: Teenusetöötajad töötavad asünkroonselt, seega tuleb kõik operatsioonid (nagu IndexedDB juurdepääs) käsitleda async/await või lubadustega.
• Ulatus: Teenusetöötajatel on ulatus ja kõik juurdepääsetavad ressursid peavad olema selle ulatuse piires (või olema kättesaadavad CORS-i kaudu, kui allikas on väline).
• Võrguühenduseta funktsionaalsus: Teenusetöötajad võimaldavad PWA-del toimida võrguühenduseta. Jagamise sihtmärke saab endiselt kasutada ka siis, kui seadmel puudub võrguühendus.

Kasutajakogemuse kohandamine

Võimalus kohandada, kuidas jagatud andmeid töödeldakse, avab uksed rikkalikuma kasutajakogemuse loomiseks. Siin on mõned ideed, mida kaaluda:

• Sisu koondamine: Võimaldage kasutajatel koguda linke või tekstilõike erinevatest allikatest oma PWA-s. Näiteks uudiste koondaja võiks lasta kasutajatel jagada artikleid otse oma lugemisnimekirja.
• Pilditöötlus ja -täiustamine: Pakkuge põhilisi pilditöötlusfunktsioone pärast pildi jagamist teie rakendusse, võimaldades kasutajatel pilte muuta enne nende salvestamist või edasijagamist. See võib olla kasulik pildipõhistele rakendustele, mis võimaldavad kasutajatel pilte annoteerida või vesimärgistada.
• Sotsiaalmeedia integratsioon: Võimaldage kasutajatel eeltäita sotsiaalmeedia postitusi oma PWA-s jagatud sisuga. Seda saab kasutada artiklite jagamiseks või piltide jagamiseks sotsiaalmeedia platvormidele.
• Võrguühenduseta salvestamine: Salvestage jagatud andmed lokaalselt (nt kasutades IndexedDB-d), et kasutajad saaksid neile juurde pääseda ka ilma internetiühenduseta. See on hindamatu väärtusega kasutajatele piiratud ühenduvusega piirkondades.
• Kontekstipõhised toimingud: Pakkuge kasutajale konkreetseid toiminguid või soovitusi vastavalt jagatud andmete tüübile. Näiteks kui jagatakse URL-i, võiks PWA pakkuda selle lisamist lugemisnimekirja või soovitada seotud sisu.

Erinevate jagamistüüpide käsitlemine

Manifesti params võimaldab teil määrata erinevaid accept tüüpe erinevate failivormingute jaoks. Siin on mõned näited:

• Pildid: "accept": ["image/*"] aktsepteerib kõiki pilditüüpe.
• Spetsiifilised pilditüübid: "accept": ["image/png", "image/jpeg"] aktsepteerib ainult PNG ja JPEG pilte.
• Video: "accept": ["video/*"] aktsepteerib kõiki videotüüpe.
• Audio: "accept": ["audio/*"] aktsepteerib kõiki helitüüpe.
• PDF: "accept": ["application/pdf"] aktsepteerib PDF-dokumente.
• Mitu tüüpi: "accept": ["image/*", "video/*"] aktsepteerib nii pilte kui ka videoid.

Teie jagamise sihtkäsitleja peab olema kirjutatud nii, et see töötleks kõiki teie määratud tüüpe. Kui teie käsitleja ei käsitle kõiki jagamistüüpe, ei pruugi jagav rakendus korrektselt töötada. Peate lisama loogika iga failitüübi vastavaks käsitlemiseks. Näiteks võite kasutada erinevaid teeke vastavalt üleslaaditud faili tüübile.

Täiustatud tehnikad ja kaalutlused

Vigade käsitlemine

Rakendage alati robustset vigade käsitlemist. Jagamise sihtmärgi operatsioonid võivad ebaõnnestuda võrguprobleemide, valede andmete või ootamatute failivormingute tõttu. Pakkuge kasutajale informatiivseid veateateid ja käsitlege ebaõnnestumisi sujuvalt. Kasutage oma teenusetöötaja ja serveripoolses koodis `try...catch` plokke potentsiaalsete vigade haldamiseks. Logige vead konsooli silumise eesmärgil.

Turvalisuse kaalutlused

• Andmete valideerimine: Valideerige alati jagamistaotlustest saadud andmeid. Puhastage ja filtreerige sisendit, et vältida turvaauke nagu saidiülene skriptimine (XSS) rünnakud.
• Faili suuruse piirangud: Rakendage faili suuruse piiranguid, et vältida kuritarvitamist ja ressursside ammendumist. Konfigureerige faili suuruse piirangud oma serveripoolses koodis ja/või teenusetöötajas.
• Juurdepääsukontroll: Kui teie PWA käsitleb tundlikke andmeid, rakendage sobivaid juurdepääsukontrolli mehhanisme, et piirata, kes saab andmeid jagada ja kuidas neid töödeldakse. Kaaluge kasutaja autentimise nõudmist.

Kasutajate privaatsus

Olge teadlik kasutajate privaatsusest. Küsige ainult vajalikke andmeid ja olge läbipaistev selle kohta, kuidas te jagatud teavet kasutate. Hankige vajadusel kasutaja nõusolek ja järgige asjakohaseid andmekaitse-eeskirju (nt GDPR, CCPA).

Lokaliseerimine ja rahvusvahelistamine (i18n)

Arvestage globaalse publikuga. Veenduge, et teie PWA toetab mitut keelt ja piirkondlikke seadeid. Kasutage rahvusvahelistamise tehnikaid, nagu `Intl` API JavaScriptis, et kuupäevi, numbreid ja valuutasid korrektselt käsitleda. Tõlkige kogu kasutajale suunatud tekst oma rakenduses, sealhulgas veateated ja kinnitusviibad.

Testimine ja silumine

• Testimine eri seadmetes ja brauserites: Testige oma jagamise sihtkäsitlejat põhjalikult erinevates seadmetes ja brauserites, et tagada ühilduvus ja järjepidev käitumine.
• Brauseri arendaja tööriistad: Kasutage brauseri arendaja tööriistu võrgupäringute kontrollimiseks, JavaScripti koodi silumiseks ja probleemide tuvastamiseks.
• Teenusetöötaja silumine: Kasutage oma brauseri arendaja tööriistade teenusetöötaja silujat, et kontrollida teenusetöötaja tegevust, logida sõnumeid ja lahendada probleeme.
• Manifesti valideerimine: Valideerige oma manifesti fail, et veenduda selle korrektses vormingus. Saadaval on palju veebipõhiseid manifesti validaatoreid.

Näited kasutusjuhtudest üle maailma

• Piltide jagamine loovprofessionaalidele (Jaapan): Fototöötluse PWA võimaldab fotograafidel jagada pilte oma kaamerarullist otse redaktorisse, võimaldades neil kiiresti rakendada filtreid või teha muid kohandusi.
• Artiklite salvestamine lugejatele (India): Uudiste koondaja PWA võimaldab kasutajatel jagada artikleid veebibrauseritest otse lugemisnimekirja, lastes neil neid võrguühenduseta vaadata.
• Kiire märkmete tegemine haridusasutustes (Saksamaa): Märkmete tegemise PWA võimaldab õpilastel jagada tekstilõike või veebisaidi linke teistest rakendustest, et loengute ajal kiiresti märkmeid luua.
• Koostöö dokumentidega (Brasiilia): Koostööpõhine dokumenditöötluse PWA võimaldab kasutajatel jagada teksti ja pilte teistest rakendustest kiireks koostööks.

Kokkuvõte

Jagamise sihtkäsitlejate rakendamine oma PWA-s on võimas viis kasutajate kaasatuse suurendamiseks ja sujuvaks integreerumiseks kasutajate seadmete loomulike jagamisvõimalustega. Järgides esitatud juhiseid ja näiteid, saate ehitada PWA-sid, mis pakuvad paremat kasutajakogemust laias valikus seadmetes ja platvormidel üle maailma. Pidage meeles, et nende funktsioonide rakendamisel tuleb arvestada kasutajakogemuse, turvalisuse ja privaatsusega. Pidev testimine ja täiustamine kasutajate tagasiside põhjal on eduka rakendamise jaoks üliolulised.

Kasutades Web Share Target API eeliseid, saate luua tõeliselt köitvaid ja kasutajasõbralikke PWA-sid, mis paistavad silma rahvarohkes digitaalses maastikus. Edu ja head kodeerimist!