Shortcut icon
بچه ها یه سوال دارم.
ببینید من وختی یبار واسه سایتم شرتکات ایکون میزارم اعمال میشه ولی وختی میخام تغییرش بدم نمیشه.
مثلا لینک عکس رو تغییر میدم ولی عکس بازم همون قبلیه.
حالا بگید شمام این مشکل رو دارید؟ یا من نوبم😂😂
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام. کش باید حذف بشه
بهترین کار اینه که یک فایل این شکلی درست کنی
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
بعد داخلش رو اینطوری بنویسی
{
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
],
}اینطوری میتونی هم برای دیوایس های مختلف ایکن بسازی هم برای pwa اش ایکن درست کنی (یعنی زمانی که توی مرورگر موبایل سایتت رو ذخیره کردن با ایکن باشه ) هم دردسرهای کش شدن رو نداره
لینک نمیخواد که
یه فایل کنار index.html ات درست کن
به نام manifist.json
برو سایت favicon generator لوگو رو بده برات ایکن با سایزهای مختلف بسازه
بعد کدهای بالا رو کپی کن توی فایل manifist.json که ساختی
بعد عکسهایی که تو کد بالا هستو بزار کنار فایل manifist.json ات. دیگه نیاز به هیچ تغییری نیست
بعد هم تو صفحه html ات اینو اینطوری صدا میزنی
<link rel="manifest" href="manifest.json" />
روشی که @kazemi اشاره کردند اگر چه شاید اصولی تر باشه، اما اگر فعلا به هر دلیلی نخواسته باشید خیلی گسترده اش کنید و صرفا می‌خواهید کارتون راه بیفته میشه با روش ساده تری هم انجام داد.
اولا اینکه مفهوم Cache یعنی اینکه مرورگر شما بصورت اتومات برای آدرس هایی مثل تصویر و فایل css و js وقتی یکبار اون ها رو دانلود می‌کنه برای سایر درخواست ها دیگه سراغش رو از سرور نمی‌گیره و از همون نسخه ای که قبلا دانلود کرده بود استفاده می‌کنه و این کار فواید خیلی زیادی داره.
تنها مشکلش اینه که اگر ما فایل رو در سرور تغییر دادیم باید یک جوری به مرورگر بفهمونیم که نباید از نسخه کش شده استفاده کنه و باید دوباره درخواست جدید بفرسته و فایل جدید رو دانلود کنه.
برای این کار یا کافیه Ctrl+F5 بزنید یا سایت رو در حالت incognito باز کنید که هر دو این ها باعث میشن کش های قبلی نادیده گرفته بشوند.
اما چون نمی‌تونیم به همه کاربرانمون بگیم شما هم این کار رو انجام بدید روش دیگری باید استفاده کنیم. مثلا باید نام فایل رو تغییر بدیم:
<link rel="shortcut icon" href="/img/sample.ico">
//تغییر کنه به:
<link rel="shortcut icon" href="/img/sample-2.ico">
اما چون این کار سختی های خودش رو داره، یک روش ساده تر اینه که یک پارامتر از نوع query string به انتهای آدرس اضافه کنیم. مهم نیست عنوان و مقدارش چی باشه. فقط مهم اینه که با نسخه قبلی یک تفاوتی داشته باشه. یک روش مرسوم برای این کار هم استفاده از لیبلی مثل version هست:
<link rel="shortcut icon" href="/img/sample.ico">
//تغییر کنه به:
<link rel="shortcut icon" href="/img/sample.ico?version=2">
<link rel="shortcut icon" href="/img/sample.ico?version=3">
<link rel="shortcut icon" href="/img/sample.ico?version=3.1">
...با اعمال این تغییرات در بخش href می‌بینید که تصویر جدید صرفا با یک رفرش ساده نمایش داده میشه.
و اما اگر خواسته باشید یک پله بالاتر برید و حرفه ای تر هم کار کنید ساز و کارها و روش هایی وجود داره که کل این عملیات رو بصورت اتومات بعد از هر تغییری برای شما انجام بده. کافیه با کلیدواژه Cache Busting سرچ کنید تا باهاش آشنا بشید.