Reinventing Web Intents

Paul Kinlan
Available in: English (Original) Deutsch Español Français 日本語 मानक हिन्दी русский язык tiếng Việt bahasa Indonesia

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

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

கடந்த சில மாதங்களில் என் அணி மற்றும் இயன் கில்பாட்ரிக் மீது சர்கமா டிஸ்கெல்ஸ் ஏபிஐ ஒரு ஷிம் வேலை. பணித்தொகுப்பு ஏபிஐ இணையத்தில் ஒரு இலகு-எடை பலதரப்பட்ட API ஐ அனுமதிக்க வடிவமைக்கப்பட்டுள்ளது. ஒரு ES6 வகுப்பு ஒரு ‘பணியிடம்’ என அம்பலப்படுத்தப்படலாம் மற்றும் முக்கிய த்ரில்லை தடுக்காமல் அதை அழைக்கலாம் - UI இன் சிறந்தது. பணிமனையில் ஏபிஐ மிகவும் சுவாரஸ்யமானது, ஆனால் எனக்கு மிகவும் சுவாரஸ்யமான துண்டு ஒரு வலை பணியாளர் பயன்படுத்தி ஒரு Polyfill கட்டப்பட்டது மற்றும் தொழிலாளி வரையறுக்கப்பட்ட என்று ES6 வர்க்கத்தின் செயல்பாடு அம்பலப்படுத்த ஒரு வழி உருவாக்கப்பட்டது. அவர்கள் PostMessage ஏபிஐ சிக்கல்களை ஒரு சுத்தமான தொகுப்பு மற்றும் JS டெவலப்பர்கள் ஒரு விவேக மாதிரியாக சுருக்கமாக இருந்தது.

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

பாரம்பரிய தொழிலாளி

இது சிக்கலானது. நீங்கள் இரண்டு ஜன்னல்கள் ஒருவருக்கொருவர் தொடர்பு வேண்டும் என்றால் அது மோசமாக உள்ளது. நீங்கள் திறக்கும் சாளரம், நீங்கள் செய்திகளை அனுப்பத் தொடங்குவதற்கு முன், அது தயாராக இருக்கும் என்று ‘திறப்பதை’ மீண்டும் குறிக்க வேண்டும். TL; DR - window.open நீங்கள் வரையறுக்கும் URL க்கு செல்லும் முன்பற்றி: வெற்று திறக்கிறது.

சாளரம் postMessage அனுபவங்கள்

பல சாளரங்களிடமிருந்தும் அல்லது பிற சாளரங்களிடமிருந்தும் செய்திகளை அனுப்ப விரும்பும் போது இது மிகவும் சிக்கலானது.

இன்னும் சிக்கலானது ...

நான் கிளையன் பக்க ஏபிஐ’களை அம்பலப்படுத்துவதன் முக்கிய காரணங்களில் இதுவும் ஒன்று என்று நான் நினைக்கிறேன். இது மிகவும் கடினமானது.

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

இணையதளம்

const worker = new Worker('worker.js');
const api = Comlink.proxy(worker);
const work = await new api.HardWork();
const results = await work.expensive();

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

class HardWork {
  expensive() {
    for(let i = 0; i < 1e12; i++)
      sum += /* …omg so much maths… */
    return sum;
  }
}

Comlink.expose({HardWork}, self);

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

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

ஜன்னல்களுக்கிடையேயான அதே காரியம் செய்வது அவ்வளவு எளிதானது.

Comlink

ஆனால் எனக்கு இன்னொரு சிந்தனை இருந்தது … வலை இண்டெண்டெஸ்ஸின் ஒரு சிறிய பகுதியை நான் புதிதாக புதுப்பித்துக்கொள்ள முடியும்: சேவை கண்டுபிடிப்பை மேம்படுத்துங்கள் மற்றும் டெவலப்பர்கள் சேவைகளுடன் தொடர்பு கொள்ள எளிதாக்குங்கள்.

வலை எண்ணங்கள்?

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

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

  • ஒரு சேவை தளம் நடுத்தர மனிதரிடம் சொல்ல முடியும் “தரவு Y இல் வேலை செய்யும் சேவை X யையும் பக்கம் Z இல் வாழ்கின்ற சேவைகளையும் நான் வழங்குகிறேன்”
  • ஒரு கிளையண்ட் தளத்தை நடுத்தர மனிதரிடம் சொல்ல முடியும் “இந்த தரவு எக்ஸ் எதைச் செய்கிறது என்று எனக்கு சேவை செய்ய வேண்டும். உங்களுக்கு என்ன வேண்டும்?”

இது முரட்டுத்தனமான வடிவமைப்பிற்கு மாப்பிங் செய்வது, இரண்டு முறைகளை வெளிப்படுத்தும் ஒரு சேவையை எனக்கு வேண்டும்: பதிவு மற்றும்தேர்வு.

பதிவு, நடுத்தர நபருடன் சேவையைப் பதிவு செய்யும். மறுபுறம் பிக் கொஞ்சம் சற்று சுவாரஸ்யமானது மற்றும் சில படிகளில் அதை உடைத்துவிட்டேன்.

இணைக்கும் தளங்கள்

நீங்கள் அதை மூழ்கினால் ஓட்டம் மிகவும் சிக்கலாக இல்லை. நான் [ஒவ்வொரு சேவை மற்றும் கிளையன் பயன்பாடு உள்ளிட்ட நீங்கள் [அடிப்படை மடிப்பு] crated (0). மின்காந்தரை முதல் மின்தடையத்துடன் கையாளுகிறது மற்றும் ‘https://web-intents.glitch.me/pick' என்ற சேவையக தேர்வாளருக்கு ஒரு சாளரத்தை திறப்பதன் சிக்கல்களை போடுவதன் மூலம் சில அடிப்படை பணிச்சூழல்களை செய்வார்.

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

இடைமருவை நீக்குதல்

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

இது எவ்வளவு எளிது என்பதைக் காட்ட குறியீடில் விரைவான டைவ் உள்ளது.

** சேவை ** (டெமோ)

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

நாம் சேவையை மறுசீரமைப்பிற்கு டெஸ்ட் வகுப்பை அம்பலப்படுத்துகிறோம். இந்த சேவையின் திறனை பதிவு செய்வதற்கான வழியை வழங்குகிறோம்.

class Test {
  constructor() {}

  outputToPre(msg) {
    let output = document.getElementById('output');
    output.innerText += msg + '\n';
  }
}

let registry = new ServiceRegistry({ Test })
register.onclick = async () => {    
  let resolvedService = await registry.register('test-action','*', location.href);  
};

** வாடிக்கையாளர் ** (டெமோ)

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

இடைப்பட்டியிடம் தேர்ந்தெடுஇணைக்கிறது, மேலும் சேவையைத் தேர்ந்தெடுக்க பயனருக்காக காத்திருக்கிறது. பயனர் சேவையைத் தேர்ந்தெடுத்ததும், இடைத்தரகர் வாடிக்கையாளருக்கு வெளிச்செல்லும் API ஐ கடந்து செல்வார் (ServiceRegistry`). தொலைநிலை ஏபிஐ ஒரு உதாரணத்தை உடனடியாகத் திருத்தி, அதன் மீது முறைகள் செயல்படுத்தலாம்.

let registry = new ServiceRegistry();
let resolvedService = await registry.pick('test-action','image/*');
remote = await new resolvedService.Test();
remote.outputToPre('calling from window.');

நான் ஒரு பரிசோதனையுடன் இது மிகவும் மகிழ்ச்சி அடைகிறேன். மேலே உள்ள குறியீட்டின் சேவை கண்டுபிடிப்பு மற்றும் அழைப்பிதழின் வீடியோ இது.

{{<youtube 1igal-ehMB4>}}
இறுதியில் டெமோ முடிவடையும்

நீங்கள் என்ன நினைக்கிறீர்கள் என்று எனக்கு தெரியப்படுத்துங்கள். அதிகம்?

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium