The Web is my API

மைக்கேல் மாஹெமோஃப் இணையத்தின் சாத்தியங்களைப் பற்றி எனக்கு நிறைய கற்றுக்கொடுத்தார். மைக்கில் நான் பணியாற்றுவதற்கு முன்னர், இணையத்தளத்தில் கட்டப்பட்டது மற்றும் இணைத்தல் மற்றும் கண்டுபிடிப்பு போன்ற நன்மைகளைப் புரிந்து கொண்டேன்.

மைக் சொன்னது ஒன்று "வலை என் API" ஆகும், மைக்ரோ வடிவங்கள் மற்றும் பிற கட்டமைக்கப்பட்ட தரவுகள் வழியாக உங்கள் தளத்தையும் உங்கள் தரவையும் ஒரு பக்கத்தில் அம்பலப்படுத்த முடிந்ததைப் பற்றி பேசினார், ஒரு எளிய XMLHttpRequest மற்றும் CORS API ஐப் பயன்படுத்தி இன்னொரு மற்றொரு உலாவி சூழல்:

Anyway, what’s cool about this is you can treat the web as an API. The Web is my API. "Scraping a web page" may sound dirtier than "consuming a web service", but it’s the cleaner approach in principle. A website sitting in your browser is a perfectly human-readable depiction of a resource your program can get hold of, so it’s an API that’s self-documenting. The best kind of API. But a whole HTML document is a lot to chew on, so we need to make sure it’s structured nicely, and that’s where microformats come in, gloriously defining lightweight standards for declaring info in your web page. There’s another HTML5 tie-in here, because we now have a similar concept in the standard, microdata.

அதே சமயத்தில் நான் வலை இண்டெண்ட்ஸ் இல் வேலை செய்ய ஆரம்பித்தேன், இது ஆவி & mdash; பயனர்கள் தரவு மற்றும் சேவைகளை மற்றொரு தோற்றத்திலிருந்து அணுகுவதற்கு & mdash; ஆனால் அது மிகவும் சிக்கலாக இருந்தது. நான் சேவைகளை கண்டுபிடித்து பின்னர் அந்த பக்கங்களை தொடர்பு கொள்ள வேண்டும். தரவு மற்றும் சேவைகளுக்கான அணுகலை வழங்குவதற்காக மைக் இணையத்தை இயக்க விரும்பினார். அது என்னுடன் ஒட்டிக்கொண்டது. அசல் பண்புகளை மறந்துவிட்டாலும்.

நான் சமீபத்தில் நார்டிக் JS க்கான ஒரு பேச்சு செய்தேன், அங்கு நாம் உண்மையில் ட்ரூலி இணையம் ஒன்றிணைந்த சேவைகளை இணையத்தில் கட்டமைக்கக் கூடாது என்று வலியுறுத்தியுள்ளோம், மேலும் நாங்கள் சர்வரில் பரஸ்பர சர்வரில் ஒரு சேவையகத்தை மாற்றியமைக்கிறோம். இது ஒரு வலைத் தளம், 3 வது கட்சி சேவையுடன் தொலைதொடர்பு சேவைக்கு தங்கள் சேவையகத்தின் மூலம் அனைத்து API கோரிக்கைகளையும் திசைதிருப்பவும், அதனுடன் வரும் சிக்கல்களை நிர்வகிக்கும்.

இது வேலை செய்கிறது, நாங்கள் முழு இணையத்தோடு கட்டப்பட்டிருக்கிறோம், ஆனால் நீங்கள் நம்பகத்தன்மை, அங்கீகாரம், போக்குவரத்து நெறிமுறைகள் மற்றும் மாறுபட்ட RPC முறைகள் (REST, Graphql போன்றவை) கருத்தில் கொள்ளும்போது நம்பமுடியாத சிக்கலானதாக இருக்க முடியும். மைக் மிகவும் ஏதோ நேர்த்தியான ஒன்றை முன்மொழிந்து, CORS செயல்படுத்தப்பட்ட தளங்கள் மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றைக் கொண்டு, தளத்தைப் பயன்படுத்தி தொலைநிலை சேவையுடன் நேரடியாகப் பேசலாம்.

இடையில் முடுக்கிவிட்ட இரண்டு விஷயங்கள் உள்ளன. முக்கிய பிரச்சினை உலாவியில் CORS பரவலாக ஆதரவு இருந்தாலும், டெவெலப்பர்கள் அதை அரிதாகவே பயன்படுத்துகின்றனர். CORS என்பது இணையத்தில் நமக்கு தேவைப்படும் ஒரு பாதுகாப்பாகும், ஆனால் இது அமைக்க மற்றும் பிழைத்திருத்தம் செய்வது கடினம், மற்றும் "ஏபிஐ போன்ற இணையம்" உண்மையில் மிகவும் தள்ளப்படவில்லை.

வாடிக்கையாளர்களிடமிருந்து வாடிக்கையாளர்களில் JS கள் மற்றும் அமர்வுகள் மற்றும் பயனீட்டாளர்களுடனான தளங்கள் உருவாக்கப்படும் தளங்களை நாங்கள் உலகிற்கு நகர்த்துகிறோம்.

எங்கள் தளங்களில் இருந்து ஒரு தொலைநிலை சேவையுடன் தொடர்புகொள்வதற்கான திறனை இன்னும் எங்களுக்குத் தேவைப்படுகிறது, மேலும் பிற தளங்களுடனும் பயன்பாடுகளுடனும் எங்கள் ஒருங்கிணைப்புகளை நாம் சீரமைக்க வேண்டும் என்று நான் உறுதியாக நம்புகிறேன், ஆனால் முதல் விஷயம், எங்களது தளங்களையும், பயன்பாடுகளையும் இணைக்க வேண்டும் அது ஒரு இணைப்புக்கு அப்பால் உள்ளது. பயனர்களின் கணினியில் உள்ள பிற சாளரங்களிடம் நேரடியாக தங்கள் திறன்களையும் செயல்பாடுகளையும் அம்பலப்படுத்த எங்கள் தளங்கள் தேவை.

ஒவ்வொரு வலைத்தளமும் தளத்தின் உரிமையாளர் மற்ற வாடிக்கையாளர்களுக்கு நேரடியாகக் கட்டுப்படுத்தக்கூடிய ஒரு API ஐ அம்பலப்படுத்த முடியும்.

நல்ல செய்தி இது ஏற்கனவே செய்ய முடியும் என்று, நாங்கள் குறைந்தது 7 ஆண்டுகள் (postMessage மற்றும் MessageChannel) மேடையில் முதன்மையானது மற்றும் எப்போதும் 'window.open` என்பதால், ஆனால் நாம் இந்த கருவிகளை நாம் ஏன் CORS ஐப் பயன்படுத்துவதில்லை போன்ற காரணங்களுக்காக வலைத்தளங்களுடன் தொடர்பு கொள்ளுதல்: கடினமானது மற்றும் எளிய மற்றும் நிலையான பயன்பாடு என்று ஒரு விவேகமான API ஐ வரையறுக்க கிட்டத்தட்ட சாத்தியமற்றது மற்றும் ஒவ்வொரு சேவையிலும் பெரிய மூன்றாம் தரப்பு நூலகங்களில் இழுக்கப்பட தேவையில்லை நீங்கள் தொடர்பு கொள்ள வேண்டும் என்று.

ஒரு தளத்தை நீங்கள் ஒரு ஏபிஐ உருவாக்க விரும்பினால், சேவையக உரிமையாளராக நீங்கள் விரும்பினால், நீங்கள் சில மாநிலங்களில் செய்திகளை வரிசைப்படுத்துகின்ற ஒரு அரச எந்திரத்தை உருவாக்க வேண்டும், அதற்கு பதிலளித்து, பின்னர் ஒரு செய்தியை கிளையன்ட் செய்த பின்னர், உங்கள் சேவையைப் பயன்படுத்துபவருக்கு டெவெலபர் செய்ய வேண்டிய நூலகத்தை உருவாக்க வேண்டும். இது நம்பமுடியாத சிக்கலான மற்றும் சுருக்கப்பட்டுள்ளது மற்றும் நான் belive நாங்கள் வலை தொழிலாளர்கள் மற்றும் வாடிக்கையாளர் பக்க API கள் இன்னும் தத்தெடுப்பு பார்த்ததில்லை ஏன் முதன்மை காரணங்கள் ஒன்றாகும்

எங்களுக்கு உதவும் ஒரு நூலகம் உள்ளது: Comlink.

Comlink என்பது ஒரு சிறிய ஏபிஐ ஆகும், இது 'MessageChannelமற்றும்PostMessage` API ஐ நீங்கள் ஒரு தொலைதூர வகுப்புகள் மற்றும் செயல்பாடுகளை உள்ளூர் சூழலில் உடனடியாக செயல்படுத்துவதைப் போல தோற்றமளிக்கும் ஒரு ஏபிஐ. உதாரணத்திற்கு:

இணையதளம்

// Set up.
const worker = w.open('somesite');
const api = Comlink.proxy(w);

// Use the API.
const work = await new api.Test();
const str = await work.say('Yo!');
console.log(str);

** வலைத் தொழிலாளி **

class Test {
  say() {
    return `Hi ${this.x++}, ${msg}`;
  }
}

// Expose the API to anyone who connects.
Comlink.expose({Test}, window);

சேவையில் ஒரு API ஐ நாங்கள் அம்பலப்படுத்துகிறோம், ஒரு ப்ராக்ஸி வழியாக கிளையன்ட்டில் ஏபிஐ பயன்படுத்துகிறோம்.

சிறந்த உதாரணம் இல்லையா?

நான் கட்டப்பட்ட ஒரு pubsubhubbub முடிவுக்கு சந்தாதாரர் என்று தளம் மற்றும் ஒரு பிங் recieves போது அது ஒரு JSON செய்தியை அனுப்புகிறது ஒரு பயனர் வரையறுக்கப்பட்ட endpoint. நான் இந்த சிறிய பயன்பாட்டிற்கான புஷ் அறிவிப்பு ஊடுருவலை நிர்வகிக்க விரும்பவில்லை, நான் கட்டப்பட்ட மற்றொரு தளம் (webpush.rocks) அனைத்தையும் செய்ய முடியும், நான் அந்த சேவையுடன் ஒருங்கிணைக்க பயன்படுத்த விரும்புகிறேன் ..

ஆனால் எனது தளத்திற்கு வலைப் புஷ் கிளையண்ட் கிளையண்டில் வைத்திருக்கும் சந்தா URL (நான் அறிவிப்புகளை அனுப்ப வேண்டிய தரவுகளின் துண்டு) எப்படி கிடைக்கும்?

நான் ஆரம்பத்தில் இந்த தளத்தை உருவாக்கிய போது, ​​நீங்கள் செய்யக்கூடிய அனைத்துமே பயனாளர் தளத்தைத் திறந்து, பக்கங்களுக்கு இடையில் URL ஐ நகலெடுத்து ஒட்டுக. எந்த தளத்தையும் பயன்படுத்தக்கூடிய ஒரு API ஐ மட்டும் ஏன் அம்பலப்படுத்தக்கூடாது? நான் என்ன செய்தேன்.

webpush.rocks என்பது 'PushManager' என்று அழைக்கப்படும் ஒரு API ஐ வரையறுக்கிறது, அது சந்தாஐடி என்ற ஒரு முறை உள்ளது. பக்கம் ஏற்றும்போது, ​​இந்த API ஐ பின்வருமாறு அம்பலப்படுத்துகிறது:

class PushManager {
  constructor() {
  }

  async subscriptionId() {
    //global var ick...
    let reg = await navigator.serviceWorker.getRegistration();
    let sub = await reg.pushManager.getSubscription();
    if(sub) {
        return `${location.origin}/send?id=${sub.endpoint}`;
    }
    else {
        return ``;
    }
  }
}

Comlink.expose({PushManager}, window);

API ஆனது DOM இல் உள்ள 'PushSubscriptionManager' API உடன் தொடர்புகொண்டு, அழைப்பு தளத்திற்கு தனிப்பயன் URL ஐ மீண்டும் கொடுக்கிறது. இங்கு முக்கியமான விஷயம் என்னவென்றால், ஒத்தியங்காமல் இயங்குவதால், செயல்திறன் (அல்லது) செய்ய விரும்பாத பயனர் சரிபார்ப்புக்காக காத்திருக்க முடியும்.

மீண்டும் அழைப்பு வாடிக்கையாளர் தளத்தில் (சந்தாவை பெற விரும்பும் பயன்பாடு). ஒரு பயனர் இணைப்பைக் கிளிக் செய்தால், நாங்கள் திறந்து, எங்கள் 'Comlink` ப்ராக்ஸியைத் திறந்து வைத்திருக்கும் விண்டோவிற்கு ஒரு குறிப்பைப் பெறுகிறோம். சேவையக ஏபிஐ இப்போது எங்கள் வாடிக்கையாளருக்கு வெளிப்படும், இது ஒரு உள்ளூர் சேவையாக இருப்பதால் 'PushManager' API ஐ உடனடியாகத் தருகிறது, ஆனால் அது மற்ற சாளரத்தில் தொலைநிலை சேவையுடன் தொடர்புகொள்கிறது.

let endpointWindow = window.open('', 'endpointUrlWindow');

let pushAPI = Comlink.proxy(endpointWindow);
let pm = await new pushAPI.PushManager();
let id = await pm.subscriptionId();

// Update the UI.
endpointUrlEl.value = id;

என்ன நடக்கிறது என்பதில் மிக விரைவான வீடியோ உள்ளது. மிகவும் எளிய மற்றும் இலகுவான தொடர்பு, அது சேவையைத் திறந்து, அதற்கு தேவையான ஐடி கிடைக்கிறது.

ஒரு சேவை வழங்குநராக நான் வேறு ஒரு தளத்திற்கு வாடிக்கையாளருக்கு மட்டுமே கிடைக்கும் ஒரு கட்டுப்படுத்தப்பட்ட செயல்திட்டத்தை அம்பலப்படுத்தியிருக்கிறேன், மேலும் தரவை மீண்டும் பயனருக்கு திருப்பிச் செலுத்துவதற்கு முன்னர் நான் அதை பாதுகாத்து, பயனர் ஒப்புதலுக்காக கேட்கிறேன், எல்லாவற்றையும் ஒரு எளிய ஏபிஐ பயன்படுத்த.

_ வலை என்பது API._

மிகவும் சரியானது, DOM அல்லது மற்றொரு தோற்றத்தின் மாநிலங்களை சரிபார்க்க அல்லது கையாள அனுமதிக்க மாட்டோம், ஆனால் உங்கள் தளத்தின் சேவைகள் மற்றும் செயல்பாட்டின் மீது நீங்கள் கட்டுப்பாட்டைக் கொண்டிருந்தால், அது எவ்வாறு பயனர்களுடன் ஈடுபடுகிறீர்கள் எனக் கூறினால், நீங்கள் மிக முக்கியமான தகவல்களை அம்பலப்படுத்தலாம் உங்கள் சேவையைப் பாதுகாப்பாக பயன்படுத்த விரும்பும் கிளையன்ட்டிற்கும் சேவைகளுக்கும் (நீங்கள் கட்டுப்பாட்டில் உள்ளீர்கள்) மற்றும் இது உங்களை அனுமதிக்கிறது:

  • நீங்கள் நல்லது என்ன என்பதை கவனத்தில் கொள்க. தளங்கள் மற்றும் பயன்பாடுகள் இடையே வேகமாக தரவு பரிமாற்றம் இது வாடிக்கையாளர் அனைத்து ஏனெனில். ஆஃப்லைனில் கூட * ஐபிசி.
  • தொடக்க சூழலில் குறியீடு இயக்கவும்

என்ன API இன் தளங்கள் அம்பலப்படுத்த வேண்டும்?

இது இன்னும் அதிகமாக ஆராய விரும்புகிறேன். நான் ஒரு புஷ் அறிவிப்பு சேவைக்கு சில அடிப்படை செயல்பாடு அம்பலப்படுத்தியது, ஏனெனில் அந்த தளத்தின் நோக்கம் தான், ஆனால் எனக்கு முக்கியமான துண்டு, நான் மற்ற டெவலப்பர்களுக்கு திரும்ப விரும்பும் டிஓஎம் பகுதியின் கட்டுப்பாட்டின் கீழ் இருந்தேன்.

ஒவ்வொரு தளமும் வாடிக்கையாளர்களுக்கு ஒரு நிலையான ஏபிஐ மற்றும் பிற செயல்பாடு மற்றும் சேவைகளைக் கண்டறிய ஒரு வழியை எங்கு வேண்டுமானாலும் பெற விரும்புகிறேன்.

ஒவ்வொரு தள உரிமையாளரும் CRUD அடிப்படையிலான செயற்பாடுகளை செய்ய முடியும் என்பதற்காக அவர்களின் சேவைக்கு முக்கிய அம்சத்தை மட்டுமே அம்பலப்படுத்த முடியும். சிக்கலான தொடர்புகளை நாம் கொண்டிருக்கலாம்.

நாம் ஒரு இணையத்தை எங்கு பெறமுடியும், அங்கு யூனிக்ஸ் போன்ற சேவைகள் ஒன்றும் நல்லது, ஒரு பயனர் வாடிக்கையாளர்களை குழுவாக இணைத்துக்கொள்கிறார்கள்.

ஒவ்வொரு தளமும் சேவை உரிமையாளரால் வரையறுக்கப்படும் பக்கத்தின் துணைக்குழுவினரால் VDOM ஐ அம்பலப்படுத்த முடியும், இதன்மூலம் DOM அடிப்படையிலான தரவுகளை பாதுகாப்பாக இடையில் நகர்த்துவதற்கு ஒரு நிலையான வழி உள்ளது.

பக்கத்திலுள்ள schema.org சார்ந்த பொருட்களையோ அல்லது மற்ற கட்டமைக்கப்பட்ட தரவையோ விரைவாக அணுகுவதற்கு நாங்கள் விரும்புவதாகக் கருதினால், மைக் தனது அசல் இடுகையில் செய்ததைப் போலவே (அவை மாறும் வகையில் உருவாக்கப்படும்).

Comlink பல ஆண்டுகளுக்கு மேலாக இருந்த மேடையில் முதன்மையானவற்றின் மேல் விரைவாகவும் எளிதாகவும் சேவைகளை அம்பலப்படுத்தவும் எடுத்துக்கொள்ளவும் நமக்கு வழியை வழங்குகிறது. இறுதியாக வலைகளை ஏபிஐ செய்வதற்கு அனுமதிக்கின்ற இடத்தில் நிறைய துண்டுகள் உள்ளன.

_ வலை என் ஏபிஐ ஆகும். அதை உன்னுடையதாக மாற்றவும்.

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.