𝗖𝗵𝗿𝗼𝗺𝗲 𝗪𝗼𝗿𝗸𝗲𝗱. 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝗙𝗮𝗶𝗹𝗲𝗱.
મેં બે બ્રાઉઝરમાં એક જ પેજ બાજુ-બાજુમાં જોયું.
Chrome માં: પેજ બરાબર ચાલતું હતું. તેમાં ઈમેજીસ, બટન્સ અને પરિણામોની સંપૂર્ણ યાદી હતી.
Firefox માં: પેજ ખાલી હતું. તેમાં કોઈ ઈમેજ વગરના પ્લેસહોલ્ડર કાર્ડ્સ અને '0 results found' એવો સંદેશ દેખાતો હતો.
કોડ સમાન હતો. URL સમાન હતું. સર્વર બરાબર હતું.
સમસ્યા બ્રાઉઝરમાં હતી.
Firefox 'Enhanced Tracking Protection' નો ઉપયોગ કરે છે. ઘણા વપરાશકર્તાઓ uBlock Origin જેવા સાધનોનો પણ ઉપયોગ કરે છે. આ સાધનો એવા ડોમેન્સ પરની વિનંતીઓ (requests) ને બ્લોક કરે છે જેને તેઓ ટ્રેકર માને છે.
મારું એપ Supabase ડોમેન પરથી ડેટા ફેચ (fetch) કરતું હતું. Firefox માટે, તે ડોમેન થર્ડ-પાર્ટી ટ્રેકર જેવું લાગતું હતું. બ્રાઉઝરે મશીન છોડતા પહેલા જ તે વિનંતીને બ્લોક કરી દીધી.
ફેચ (fetch) નિષ્ફળ જવાથી, મારા કોડે ફોલબેક સ્ટેટ (fallback state) બતાવ્યું. તે ક્રેશ થયું નહીં. તેણે કન્સોલમાં કોઈ એરર બતાવી નહીં. તેણે ફક્ત એક ખાલી પેજ બતાવ્યું.
આનાથી બેવડો બ્લાઈન્ડ સ્પોટ (blind spot) સર્જાયો:
- મારું ડેવલપમેન્ટ બ્રાઉઝર (Chrome) બરાબર ચાલતું હતું. મેં ક્યારેય બગ (bug) જોયો જ નહીં.
- મારા એનાલિટિક્સ પણ તે જ ડોમેનનો ઉપયોગ કરતા હતા. જે વપરાશકર્તાઓ કન્ટેન્ટ જોઈ શકતા નહોતા, તેમને ટ્રેક પણ કરી શકાતા નહોતા. તેઓ અદ્રશ્ય હતા.
મેં થર્ડ-પાર્ટી વિનંતીને બદલે ફર્સ્ટ-પાર્ટી વિનંતીનો ઉપયોગ કરીને આ સમસ્યા સુધારી.
વેન્ડર ડોમેનને સીધું કોલ કરવાને બદલે, મેં રિવર્સ પ્રોક્સી (reverse proxy) નો ઉપયોગ કર્યો. મેં API ને મારા પોતાના ડોમેન દ્વારા રૂટ કર્યું.
પહેલા: mysite.com xxxx.supabase.co ને કોલ કરે છે (બ્લોક થયેલું) હવે: mysite.com mysite.com/sb-api ને કોલ કરે છે (વિશ્વાસપાત્ર)
હવે, બ્રાઉઝર તેને 'same-origin' વિનંતી તરીકે જુએ છે. તે ડેટા કોલને સાઇટના જ એક ભાગ તરીકે ગણે છે.
જો તમે આવી સમાન સમસ્યાઓનો સામનો કરો છો, તો આ ત્રણ બાબતો યાદ રાખો:
• તમારા websockets પર ધ્યાન આપો. સાદા પાથ રીરાઈટ્સ (path rewrites) રિયલ-ટાઇમ કનેક્શન તોડી શકે છે. • તમારી auth storage keys ને પિન કરો. URL બદલવાથી બ્રાઉઝર લોગિન સેશન્સ કેવી રીતે સ્ટોર કરે છે તેમાં ફેરફાર થઈ શકે છે. • તમારા કન્ટેન્ટને પ્રી-રેન્ડર (Prerender) કરો. તમારા પેજને સંપૂર્ણપણે JavaScript પર આધારિત ન રાખો. જો બ્રાઉઝર તમારી સ્ક્રિપ્ટને બ્લોક કરે, તો પણ વપરાશકર્તાએ HTML માં મુખ્ય કન્ટેન્ટ જોવું જોઈએ.
એવું માનવાનું બંધ કરો કે જો તે Chrome માં કામ કરે છે, તો તે દરેક માટે કામ કરશે. પ્રાઇવસી એક્સ્ટેન્શન ચાલુ રાખીને ટેસ્ટ કરો.