نحوه استفاده از Web Share Target API

Summarize this content to 400 words in Persian Lang
وب دارای API های بسیار جذابی است که مرز بین برنامه های بومی و وب را محو می کند. این عالی است زیرا می‌توانید با استفاده از این APIها، از مانع ورود کم برنامه‌های وب برای ارائه تجربیات عالی به کاربران خود استفاده کنید. شاید زمانی که این API های بومی رایج تر می شوند، هر برنامه ای به یک برنامه وب تبدیل شود.

در این مقاله، نگاهی به یک API بومی جدید خواهیم انداخت که اکنون در وب در دسترس است – API هدف اشتراک وب. ما در این آموزش یک برنامه وب پیشرونده نشانک X/Twitter (PWA) جالب می‌سازیم. این به تقویت مفاهیم کمک می کند و نشان می دهد که چگونه از API هدف اشتراک وب در تولید استفاده کنید.

Web Share Target API چیست

بیایید با بحث در مورد آنچه که API هدف اشتراک وب نیست شروع کنیم. اگر روی ویژگی اشتراک گذاری درون برنامه ای کار کرده باشید، احتمالاً با API اشتراک گذاری وب مواجه شده اید. این استفاده می کند navigator.share()، به برنامه وب شما اجازه می دهد متن، URL یا فایل ها را به اشتراک بگذارد با سیستم عامل. این برنامه وب شما را قادر می‌سازد تا داده‌ها را از طریق کشوی اشتراک‌گذاری اصلی با سایر برنامه‌ها به اشتراک بگذارد.

Web share target API برعکس عمل می کند. آی تی برنامه وب شما را به عنوان هدف اشتراک گذاری با سیستم عامل ثبت می کند و اجازه می دهد به اشتراک گذاری داده ها از سایر برنامه ها با برنامه وب شما. این قفل گردش کار بسیار جالب را برای برنامه های وب باز می کند. این را تصور کنید؛ من با دوربینم عکس می‌گیرم، سپس آن را در یک برنامه ویرایش عکس وب به اشتراک می‌گذارم و در نهایت عکس ویرایش شده را در اینستاگرام به اشتراک می‌گذارم. چقدر باحاله؟

گردش کار با استفاده از API هدف اشتراک وب

API هدف اشتراک وب مرا به یاد لوله کشی در یونیکس می اندازد. به اشتراک گذاری محتوا با برنامه های وب یک تغییر بازی است و موارد استفاده آنها را گسترش می دهد.

برای جلوگیری از سوء استفاده از این API، برنامه های وب برای داشتن این قابلیت باید چند الزام را داشته باشند. برنامه وب شما باید قابل نصب باشد و کاربر باید برنامه شما را نصب کرده باشد. این الزامات باعث می‌شود سایت‌ها به‌طور تصادفی خود را به کشوی اشتراک‌گذاری سیستم‌عامل اضافه نکنند. همچنین، این تضمین می کند که کاربران به طور خاص می خواهند با برنامه شما به اشتراک بگذارند.

نحوه استفاده از Web Share Target API: یک برنامه نشانک توییتر بسازید

برای مشاهده API هدف اشتراک وب در عمل، بیایید با هم یک پروژه ساده اما سرگرم کننده و مفید بسازیم. فید X/Twitter من گاهی اوقات توییت های جالبی دارد که می خواهم برای بعد ذخیره کنم. خیلی خوب است که یک برنامه مستقل داشته باشم که بتوانم توییت‌ها را نشانه‌گذاری کنم (آره، می‌دانم که X دارای نشانک‌گذاری داخلی است. فقط بازی کنید، خوب است؟).

URL کامل برنامه زنده (قابل نصب) و کد منبع در Github.

اگر دوست دارید با هم کدنویسی کنید، در اینجا پیوندی برای گرفتن کد شروع وجود دارد. همچنین، در اینجا مخزن Github برنامه تکمیل شده برای هر موردی است. این یک برنامه پشته JAM است و در صفحات Cloudflare میزبانی می شود. پس ادامه دهید، کد شروع را دانلود کنید و سریع اجرا کنید npm install در دایرکتوری پروژه برای راه اندازی یک سرور توسعه دهنده محلی، اجرا کنید npm start و مرورگر را به http://localhost:8788/ باز کنید.

برنامه را قابل نصب کنید (PWA)

اولین نیاز برای استفاده از وب هدف اشتراک گذاری API، نصب برنامه، به عبارت دیگر، یک PWA است. راه‌اندازی PWA چندان دشوار نیست، زیرا بیشتر به ایجاد یک نیاز دارید manifest.json فایل. همچنین مهم است که توجه داشته باشید که برنامه شما باید از طریق https در تولید ارائه شود.

باز کن manifest.json و کانفیگ زیر را به فایل اضافه کنید. نمادهای برنامه مورد استفاده در اینجا با Icon Kitchen تولید شده اند.

{
“name”https://dev.to/megaconfidence/: “xbmark”https://dev.to/megaconfidence/,
“short_name”https://dev.to/megaconfidence/: “xbmark”https://dev.to/megaconfidence/,
“description”https://dev.to/megaconfidence/: “Bookmark your fav X posts”https://dev.to/megaconfidence/,
“scope”https://dev.to/megaconfidence/: “https://dev.to/”https://dev.to/megaconfidence/,
“start_url”https://dev.to/megaconfidence/: “https://dev.to/”https://dev.to/megaconfidence/,
“display”https://dev.to/megaconfidence/: “standalone”https://dev.to/megaconfidence/,
“theme_color”https://dev.to/megaconfidence/: “#3367D6″https://dev.to/megaconfidence/,
“background_color”https://dev.to/megaconfidence/: “#3367D6″https://dev.to/megaconfidence/,
“icons”https://dev.to/megaconfidence/: [
{ “src”https://dev.to/megaconfidence/: “images/favicon.ico”https://dev.to/megaconfidence/, “type”https://dev.to/megaconfidence/: “images/x-icon”https://dev.to/megaconfidence/, “sizes”https://dev.to/megaconfidence/: “32×32″https://dev.to/megaconfidence/ },
{ “src”https://dev.to/megaconfidence/: “images/icon-192.png”https://dev.to/megaconfidence/, “type”https://dev.to/megaconfidence/: “images/png”https://dev.to/megaconfidence/, “sizes”https://dev.to/megaconfidence/: “192×192″https://dev.to/megaconfidence/ },
{ “src”https://dev.to/megaconfidence/: “images/icon-512.png”https://dev.to/megaconfidence/, “type”https://dev.to/megaconfidence/: “images/png”https://dev.to/megaconfidence/, “sizes”https://dev.to/megaconfidence/: “512×512″https://dev.to/megaconfidence/ },
{
“src”https://dev.to/megaconfidence/: “images/icon-192-maskable.png”https://dev.to/megaconfidence/,
“type”https://dev.to/megaconfidence/: “images/png”https://dev.to/megaconfidence/,
“sizes”https://dev.to/megaconfidence/: “192×192″https://dev.to/megaconfidence/,
“purpose”https://dev.to/megaconfidence/: “maskable”https://dev.to/megaconfidence/
},
{
“src”https://dev.to/megaconfidence/: “/images/icon-512-maskable.png”https://dev.to/megaconfidence/,
“type”https://dev.to/megaconfidence/: “images/png”https://dev.to/megaconfidence/,
“sizes”https://dev.to/megaconfidence/: “512×512″https://dev.to/megaconfidence/,
“purpose”https://dev.to/megaconfidence/: “maskable”https://dev.to/megaconfidence/
}
] }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

… و برنامه قابل نصب است. با استفاده از منوی مرورگر، کاربران می توانند برای نصب برنامه بر روی «افزودن به صفحه اصلی» کلیک کنند. اما ما می توانیم با چند خط جاوا اسکریپت تجربه نصب بهتری را ارائه دهیم. بیایید یک بنر درون برنامه ای سفارشی بسازیم که به طور یکپارچه از کاربر بخواهد برنامه را نصب کند.

برای انجام این کار، خطوط زیر را به آن اضافه کنید index.js:

let deferredPrompt;
const appHeader = document.querySelector(“https://dev.to/megaconfidence/h2″https://dev.to/megaconfidence/);
const installBtn = document.querySelector(“https://dev.to/megaconfidence/button”https://dev.to/megaconfidence/);

//auto-fired if app has a valid manifest.json
window.addEventListener(“https://dev.to/megaconfidence/beforeinstallprompt”https://dev.to/megaconfidence/, (e) => {
e.preventDefault();
deferredPrompt = e; //cache install prompt
installBtn.classList.remove(“https://dev.to/megaconfidence/hide”https://dev.to/megaconfidence/); //show install banner
appHeader.classList.remove(“https://dev.to/megaconfidence/fancy”https://dev.to/megaconfidence/); //only show basic app header UI
});

//when install banner is clicked…
installBtn.addEventListener(“https://dev.to/megaconfidence/click”https://dev.to/megaconfidence/, async () => {
deferredPrompt.prompt(); //prompt user for installation
const { outcome } = await deferredPrompt.userChoice; //did user install?
if (outcome == “https://dev.to/megaconfidence/accepted”https://dev.to/megaconfidence/) deferredPrompt = null; //delete cached prompt if installed
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فایل ها را پس از ویرایش ذخیره کنید و یک برگه مرورگر باز کنید تا این مورد آزمایش شود. متوجه خواهید شد که کاربران اکنون تجربه نصب بهتری دارند. این عالی است!

به عنوان هدف اشتراک ثبت نام کنید

کار عالی تا الان اکنون برنامه تمام الزامات استفاده از API هدف اشتراک وب را برآورده می کند. برای اینکه همه چیز روبه‌رو شویم، باید برنامه را به عنوان هدف اشتراک‌گذاری در سیستم عامل ثبت کنیم. خوشبختانه، انجام این کار نیز بسیار آسان است.

باز کن manifest.json و خطوط زیر را اضافه کنید:

“share_target”https://dev.to/megaconfidence/: {
“action”https://dev.to/megaconfidence/: “https://dev.to/”https://dev.to/megaconfidence/,
“method”https://dev.to/megaconfidence/: “GET”https://dev.to/megaconfidence/,
“enctype”https://dev.to/megaconfidence/: “application/x-www-form-urlencoded”https://dev.to/megaconfidence/,
“params”https://dev.to/megaconfidence/: {
“title”https://dev.to/megaconfidence/: “title”https://dev.to/megaconfidence/,
“text”https://dev.to/megaconfidence/: “text”https://dev.to/megaconfidence/,
“url”https://dev.to/megaconfidence/: “url”https://dev.to/megaconfidence/
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این به سیستم عامل می گوید که برنامه داده های اولیه مانند پیوندها و متن را می پذیرد. داده ها به عنوان یک به برنامه ارسال می شود GET درخواست در action مسیر. داده های به اشتراک گذاشته شده از برنامه منبع از طریق پارامترهای پرس و جو از طریق title، text، و url کلیدها به عنوان مثال، به اشتراک گذاری یک توییت از X، برنامه را در مسیر اصلی باز می کند و پیوند توییت را به text پرس و جو متوقف می شود

http://localhost:8788/?text=https://x.com/supabase/status/1800310892942487626

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توجه: اگر برنامه در منوی اشتراک‌گذاری نمایش داده نشد، آن را حذف و دوباره نصب کنید

اکنون با جادوی جاوا اسکریپت، می‌توانیم پیوند توییت را از جستجوی URL گرفته و آن را به عنوان نشانک روی برنامه اضافه کنیم. اما قبل از حرکت، خوب است توجه داشته باشید که API هدف اشتراک‌گذاری وب از داده‌های متنی بیشتر پشتیبانی می‌کند. شما می توانید فایل های به اشتراک گذاشته شده مانند تصاویر را با چند تغییر در مانیفست بپذیرید.

بازیابی محتوای مشترک

تجزیه پیوند توییت مشترک باید آسان باشد، زیرا به عنوان یک اضافه شده است text پارامتر پرس و جو بنابراین یک طرح دستمال کاغذی خشن می تواند به شکل زیر باشد:

صبر کنید تا برنامه بارگیری شود و URL توییت را از پارامتر query تجزیه و تحلیل کند.
اطلاعات واقعی توییت (یعنی متن توییت و تصویر کاربر) را واکشی کنید. این مرحله به سرور نیاز دارد.
توییت واکشی شده را به صورت محلی ذخیره کنید.
و توییت را در رابط کاربری نمایش دهید.

کدگذاری این طرح در index.js فایل:

//step 1
window.addEventListener(“https://dev.to/megaconfidence/DOMContentLoaded”https://dev.to/megaconfidence/, async () => {
const url = new URL(window.location);
const urlText = url.searchParams.get(“https://dev.to/megaconfidence/text”https://dev.to/megaconfidence/);
if (!urlText) return;
const [id, tweet] = await fetchTweet(urlText); //step 2
const tweets = saveTweet(id, tweet); //step 3
buildTweetsUI(tweets); //step 4
});

//step 2
async function fetchTweet(url) {
const id = url.match(/[0-9]{19}/)[0];
const res = await fetch(`/tweet/?id=${id}`); //⚠️⚠️⚠️ requires backend server. More info later…
const tweet = await res.json();
return [String(id), tweet];
}

//step 3
function saveTweet(id, tweet) {
let tweets = JSON.parse(localStorage.getItem(“https://dev.to/megaconfidence/tweets”https://dev.to/megaconfidence/)) || {};
tweets[id] = tweet;
tweets = Object.fromEntries(
Object.entries(tweets).filter(([_, v]) => v != null)
);
localStorage.setItem(“https://dev.to/megaconfidence/tweets”https://dev.to/megaconfidence/, JSON.stringify(tweets));
return tweets;
}

//step 4
function buildTweetsUI(tweets) {
const list = [];
for (let id in tweets) {
const t = tweets[id];
list.push(`

${t.img}” />

${t.text}
@${t.name} – ${time(new Date(t.date))}

${t.url}”>
${id}’)” src=”https://dev.to/megaconfidence/images/close.svg” />

`);
}
document.querySelector(“https://dev.to/megaconfidence/ul”https://dev.to/megaconfidence/).innerHTML = list.length
? list.join(“”https://dev.to/megaconfidence/)
: `👀 Looks like your don’t have any bookmarks yet. Share tweets to this app to get going!`;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

واکشی محموله توییت نیاز به استفاده از X's API دارد. درخواست‌های متقاطع به این API از مرورگرها مسدود می‌شوند، اما اگر توسط یک سرور انجام شوند، خوب کار می‌کنند. خوشبختانه، Cloudflare Pages از کد سمت سرور پشتیبانی می‌کند و به ما امکان می‌دهد برنامه‌های فول استک بسازیم. این بدان معنی است که ما نیازی به استقرار یک باطن جداگانه برای این برنامه نداریم.

باز کن _worker.js فایل و محتوای آن را با موارد زیر جایگزین کنید:

export default {
async fetch(request, env) {
const url = new URL(request.url);

switch (url.pathname) {
case “https://dev.to/megaconfidence//tweet/”https://dev.to/megaconfidence/: //fetch to the tweet endpoint
const id = url.searchParams.get(“https://dev.to/megaconfidence/id”https://dev.to/megaconfidence/); //grab tweet id
if (!id) return;

//make fetch request to Twitter API
const tweet = await fetch(
`https://cdn.syndication.twimg.com/tweet-result?id=${id}&token=0`,
{
headers: { “https://dev.to/megaconfidence/User-Agent”https://dev.to/megaconfidence/: “https://dev.to/megaconfidence/Chrome/125” },
}
).then((r) => r.json());

//return custom payload
return Response.json({
text: tweet.text,
name: tweet.user.screen_name,
date: tweet.created_at,
img: tweet.user.profile_image_url_https,
url: `https://x.com/${tweet.user.screen_name}/status/${id}`,
});

default: //else respond with static assets in public/
return env.ASSETS.fetch(request);
}
},
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با این کار، هر زمان که ما درخواستی به /tweets/ (همانطور که در مرحله 2 انجام دادیم)، این به باطن بدون سرور ما برخورد می کند. سپس، اطلاعات مربوط به توییت با استفاده از API رسمی توییتر واکشی می شود. تمام درخواست‌های دیگر به‌عنوان فراخوانی برای فایل‌های استاتیک در تلقی می‌شوند public پوشه

اکنون می‌توانیم مانند یک نسیم توییت‌ها را نشانه‌گذاری کنیم:

لمس نهایی

ما تقریباً تمام شده ایم. بیایید چند نکته تکمیلی اضافه کنیم.

در حال حاضر، نشانک‌های ذخیره‌شده هنگام راه‌اندازی برنامه نمایش داده نمی‌شوند. بیایید با اضافه کردن این آن را برطرف کنیم onload تابع به index.js:

window.onload = () => {
const tweets = JSON.parse(localStorage.getItem(“https://dev.to/megaconfidence/tweets”https://dev.to/megaconfidence/)) || {};
buildTweetsUI(tweets);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

همچنین، این تابع را برای حذف یک نشانک اضافه کنید:

window.deleteTweet = (id) => {
const tweets = saveTweet(id, null);
buildTweetsUI(tweets);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ذخیره، بارگیری مجدد و ما طلایی هستیم! در نهایت، می‌توانید برنامه را با اجرا در صفحات Cloudflare اجرا کنید npm run deploy. در اینجا نسخه من از برنامه، و همچنین یک لینک به کد منبع تکمیل شده در Github در صورت نیاز به آن است.

نتیجه

تا اینجا رسیدی؟ به سلامتی رفیق!

Web Share target API یک API بومی جالب برای وب است. این امکان را برای برنامه‌های وب فراهم می‌کند که در جریان‌های کاری چند برنامه‌ای شرکت کنند، و این عالی است. آیا قصد دارید از این API در پروژه بعدی خود استفاده کنید؟ من دوست دارم در مورد آن در نظرات بشنوم.

اگر همه چیزهای وب را دوست دارید، برای اطلاعات بیشتر من را در توییتر دنبال کنید. به سلامتی، خوش بگذره!

{
  "name"https://dev.to/megaconfidence/: "xbmark"https://dev.to/megaconfidence/,
  "short_name"https://dev.to/megaconfidence/: "xbmark"https://dev.to/megaconfidence/,
  "description"https://dev.to/megaconfidence/: "Bookmark your fav X posts"https://dev.to/megaconfidence/,
  "scope"https://dev.to/megaconfidence/: "https://dev.to/"https://dev.to/megaconfidence/,
  "start_url"https://dev.to/megaconfidence/: "https://dev.to/"https://dev.to/megaconfidence/,
  "display"https://dev.to/megaconfidence/: "standalone"https://dev.to/megaconfidence/,
  "theme_color"https://dev.to/megaconfidence/: "#3367D6"https://dev.to/megaconfidence/,
  "background_color"https://dev.to/megaconfidence/: "#3367D6"https://dev.to/megaconfidence/,
  "icons"https://dev.to/megaconfidence/: [
    { "src"https://dev.to/megaconfidence/: "images/favicon.ico"https://dev.to/megaconfidence/, "type"https://dev.to/megaconfidence/: "images/x-icon"https://dev.to/megaconfidence/, "sizes"https://dev.to/megaconfidence/: "32x32"https://dev.to/megaconfidence/ },
    { "src"https://dev.to/megaconfidence/: "images/icon-192.png"https://dev.to/megaconfidence/, "type"https://dev.to/megaconfidence/: "images/png"https://dev.to/megaconfidence/, "sizes"https://dev.to/megaconfidence/: "192x192"https://dev.to/megaconfidence/ },
    { "src"https://dev.to/megaconfidence/: "images/icon-512.png"https://dev.to/megaconfidence/, "type"https://dev.to/megaconfidence/: "images/png"https://dev.to/megaconfidence/, "sizes"https://dev.to/megaconfidence/: "512x512"https://dev.to/megaconfidence/ },
    {
      "src"https://dev.to/megaconfidence/: "images/icon-192-maskable.png"https://dev.to/megaconfidence/,
      "type"https://dev.to/megaconfidence/: "images/png"https://dev.to/megaconfidence/,
      "sizes"https://dev.to/megaconfidence/: "192x192"https://dev.to/megaconfidence/,
      "purpose"https://dev.to/megaconfidence/: "maskable"https://dev.to/megaconfidence/
    },
    {
      "src"https://dev.to/megaconfidence/: "/images/icon-512-maskable.png"https://dev.to/megaconfidence/,
      "type"https://dev.to/megaconfidence/: "images/png"https://dev.to/megaconfidence/,
      "sizes"https://dev.to/megaconfidence/: "512x512"https://dev.to/megaconfidence/,
      "purpose"https://dev.to/megaconfidence/: "maskable"https://dev.to/megaconfidence/
    }
  ]
}

let deferredPrompt;
const appHeader = document.querySelector("https://dev.to/megaconfidence/h2"https://dev.to/megaconfidence/);
const installBtn = document.querySelector("https://dev.to/megaconfidence/button"https://dev.to/megaconfidence/);

//auto-fired if app has a valid manifest.json
window.addEventListener("https://dev.to/megaconfidence/beforeinstallprompt"https://dev.to/megaconfidence/, (e) => {
  e.preventDefault();
  deferredPrompt = e; //cache install prompt
  installBtn.classList.remove("https://dev.to/megaconfidence/hide"https://dev.to/megaconfidence/); //show install banner
  appHeader.classList.remove("https://dev.to/megaconfidence/fancy"https://dev.to/megaconfidence/); //only show basic app header UI
});

//when install banner is clicked...
installBtn.addEventListener("https://dev.to/megaconfidence/click"https://dev.to/megaconfidence/, async () => {
  deferredPrompt.prompt(); //prompt user for installation
  const { outcome } = await deferredPrompt.userChoice; //did user install?
  if (outcome == "https://dev.to/megaconfidence/accepted"https://dev.to/megaconfidence/) deferredPrompt = null; //delete cached prompt if installed
});

    "share_target"https://dev.to/megaconfidence/: {
        "action"https://dev.to/megaconfidence/: "https://dev.to/"https://dev.to/megaconfidence/,
        "method"https://dev.to/megaconfidence/: "GET"https://dev.to/megaconfidence/,
        "enctype"https://dev.to/megaconfidence/: "application/x-www-form-urlencoded"https://dev.to/megaconfidence/,
        "params"https://dev.to/megaconfidence/: {
            "title"https://dev.to/megaconfidence/: "title"https://dev.to/megaconfidence/,
            "text"https://dev.to/megaconfidence/: "text"https://dev.to/megaconfidence/,
            "url"https://dev.to/megaconfidence/: "url"https://dev.to/megaconfidence/
        }
    }

http://localhost:8788/?text=https://x.com/supabase/status/1800310892942487626

//step 1
window.addEventListener("https://dev.to/megaconfidence/DOMContentLoaded"https://dev.to/megaconfidence/, async () => {
  const url = new URL(window.location);
  const urlText = url.searchParams.get("https://dev.to/megaconfidence/text"https://dev.to/megaconfidence/);
  if (!urlText) return;
  const [id, tweet] = await fetchTweet(urlText); //step 2
  const tweets = saveTweet(id, tweet); //step 3
  buildTweetsUI(tweets); //step 4
});

//step 2
async function fetchTweet(url) {
  const id = url.match(/[0-9]{19}/)[0];
  const res = await fetch(`/tweet/?id=${id}`); //⚠️⚠️⚠️ requires backend server. More info later...
  const tweet = await res.json();
  return [String(id), tweet];
}

//step 3
function saveTweet(id, tweet) {
  let tweets = JSON.parse(localStorage.getItem("https://dev.to/megaconfidence/tweets"https://dev.to/megaconfidence/)) || {};
  tweets[id] = tweet;
  tweets = Object.fromEntries(
    Object.entries(tweets).filter(([_, v]) => v != null)
  );
  localStorage.setItem("https://dev.to/megaconfidence/tweets"https://dev.to/megaconfidence/, JSON.stringify(tweets));
  return tweets;
}

//step 4
function buildTweetsUI(tweets) {
  const list = [];
  for (let id in tweets) {
    const t = tweets[id];
    list.push(`
        

            
${t.img}" />
            

                
${t.text}
                
@${t.name} - ${time(new Date(t.date))}
            
            

                ${t.url}">
                ${id}')" src="https://dev.to/megaconfidence/images/close.svg" />
            
        
    `);
  }
  document.querySelector("https://dev.to/megaconfidence/ul"https://dev.to/megaconfidence/).innerHTML = list.length
    ? list.join(""https://dev.to/megaconfidence/)
    : `
👀 Looks like your don't have any bookmarks yet. Share tweets to this app to get going!
`;
}

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    switch (url.pathname) {
      case "https://dev.to/megaconfidence//tweet/"https://dev.to/megaconfidence/: //fetch to the tweet endpoint
        const id = url.searchParams.get("https://dev.to/megaconfidence/id"https://dev.to/megaconfidence/); //grab tweet id
        if (!id) return;

        //make fetch request to Twitter API
        const tweet = await fetch(
          `https://cdn.syndication.twimg.com/tweet-result?id=${id}&token=0`,
          {
            headers: { "https://dev.to/megaconfidence/User-Agent"https://dev.to/megaconfidence/: "https://dev.to/megaconfidence/Chrome/125" },
          }
        ).then((r) => r.json());

        //return custom payload
        return Response.json({
          text: tweet.text,
          name: tweet.user.screen_name,
          date: tweet.created_at,
          img: tweet.user.profile_image_url_https,
          url: `https://x.com/${tweet.user.screen_name}/status/${id}`,
        });

      default: //else respond with static assets in public/
        return env.ASSETS.fetch(request);
    }
  },
};

window.onload = () => {
  const tweets = JSON.parse(localStorage.getItem("https://dev.to/megaconfidence/tweets"https://dev.to/megaconfidence/)) || {};
  buildTweetsUI(tweets);
};

window.deleteTweet = (id) => {
  const tweets = saveTweet(id, null);
  buildTweetsUI(tweets);
};