👌🏻 🏟️ 🏨 खुद AppStor 🧖🏾 🔖 🧑🏾

हब्रोस्टेरोज़िली सिंक्रोनाइज़ वॉच को याद कर सकते हैं, जिसकी चर्चा पहले ही एक बार हैबे पर हो चुकी थी।

विचार पैदा होने के दिन से बहुत सारा पानी बह गया है: घड़ी स्क्रीन सेवर और विजेट दोनों को एक शब्द में, कई पुनर्जन्मों के माध्यम से देखने में कामयाब रही।

मोबाइल प्लेटफॉर्म पर आने की बारी आई। एक तरीका या दूसरा, लक्ष्य आईओएस था।

जैसा कि आप जानते हैं, इस मंच का आधुनिक तरीका Xcode और AppStore के माध्यम से है, जिसमें कुछ भावनात्मक और वित्तीय निवेशों की आवश्यकता होती है।

हालांकि, अगर हम ऐप्पल कंपनी से पहली (या, अधिक सटीक रूप से, दूसरी) "पीडीए" रिलीज़ के अस्पष्ट समय को याद करते हैं (बस मामले में, हम आईफोन 1 के बारे में बात कर रहे हैं), तो हम इस बारे में एक गर्म चर्चा को याद करेंगे कि अनुप्रयोगों के लिए यह कैसे संभव है और कुछ नहीं। साधारण वेब एप्लिकेशन - HTML / CSS / JS और पसंद का एक सामान्य ढेर। बस हमें क्या चाहिए!

शूटर

स्रोत डेटा:

index.html - मैं क्या कह सकता हूं, बस सादे HTML5;

sinchron.js - पूरे अनुप्रयोग का सार - सिंक्रोनस घड़ी, जिसे जावास्क्रिप्ट और कैनवस में लिखा गया है (एसवीजी पर एक संस्करण भी था)।

Index.html में शैलियाँ सेट की गई हैं, उनमें से कुछ हैं, इसलिए अलग CSS बनाने की कोई आवश्यकता नहीं है। हम उपर्युक्त sinchron.js कनेक्ट करते हैं, और पृष्ठ लोड करने के तुरंत बाद घड़ी की शुरुआत लिखते हैं।

हम सफारी में खोलते हैं, हम परीक्षण करते हैं, हम देखते हैं: चाहे वह सब कुछ काम करे जैसा कि होना चाहिए।

आदेश! फिर हम पोर्टिंग के लिए पास होते हैं। एक पूर्ण आवेदन प्राप्त करने के लिए, आपको कई कदम उठाने चाहिए।

सबसे पहले, आपको इंटरनेट के बिना काम करने के लिए एप्लिकेशन की आवश्यकता है।

ऐसा करने के लिए, हम क्लाइंट पर डेटा संग्रहीत करने के लिए तंत्र का उपयोग करते हैं। हमें उन संसाधनों की एक सूची के साथ एक प्रदर्शन बनाने की आवश्यकता होगी जिन्हें एप्लिकेशन कैश में संग्रहीत करने की आवश्यकता है। इस तरह के एक एप्लिकेशन के पहले डाउनलोड के बाद, प्रकट में वर्णित संसाधनों को बाद में कैश से एक्सेस किया जाएगा, सर्वर तक पहुंच के बिना।

मैनिफ़ेस्ट के लिए कई आवश्यकताएँ हैं:

उन्हें टाइप टेक्स्ट / कैश-मेनिफ़ेस्ट (वेब सर्वर कॉन्फ़िगरेशन आवश्यक) होना चाहिए
पहली पंक्ति "CACHE MANIFEST" पाठ होनी चाहिए
निम्न पंक्तियाँ या तो आवश्यक संसाधनों के टिप्पणियाँ या URL हो सकती हैं
टिप्पणियाँ एक पंक्ति में होनी चाहिए और # से शुरू होनी चाहिए
URL पूर्ण या सापेक्ष हो सकता है
HTML फ़ाइल ही, जो प्रकट को परिभाषित करती है, स्वचालित रूप से एप्लिकेशन कैश में आ जाती है, इसलिए इसे जोड़ना आवश्यक नहीं है।

हमारा घोषणा पत्र:

CACHE MANIFEST 
      

        
        
        
      

     # five o'clock 
      

        
        
        
      

     sinchron.js

इसे "cache.manifest" में सेव करें, उसी जगह जहां हमारे पास बाकी फाइलें हैं।

किसी मैनिफ़ेस्ट को कनेक्ट करना सरल है:

<html manifest="cache.manifest">

तो, पहला कदम पूरा हो गया है। चलिए आगे बढ़ते हैं।

दूसरी बात, आइए देखें कि जब हम ब्राउज़र तत्वों को हर जगह देखते हैं तो यह किस प्रकार का अनुप्रयोग है। यह काम नहीं है, हम सुंदरता चाहते हैं!

सफारी कई मेटा टैग का समर्थन करती है, जो ब्राउज़र की उपस्थिति को भी निर्धारित करती है।

इन दिशानिर्देशों में से कुछ को हमारे HTML में जोड़ें:

एप्लिकेशन को "पूर्ण स्क्रीन मोड" में खोलें (एड्रेस बार और नेविगेशन बार से छुटकारा पाएं):

<meta name="apple-mobile-web-app-capable" content="yes" />

इसके बाद, हम आवेदन की मुख्य पृष्ठभूमि के साथ स्थिति बार बनायेंगे, और हमारे पास यह काला है।

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

यह उपयोगी है, हमारे मामले में, निश्चित रूप से, डिवाइस की स्क्रीन चौड़ाई के बराबर ब्राउज़र विंडो का आकार सेट करने के लिए।

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

हम यह सब (HTML, JS, Manifest) सर्वर पर अपलोड करते हैं। हम iPhone / iPad / iPod लेते हैं।

आइए देखें कि डिवाइस पर क्या हुआ। लेकिन कुछ भी नहीं! पहले की तरह, पता बार जगह में है, और यहां तक कि यह सफेद पैनल भी है। लेकिन परेशान होने की जल्दबाजी न करें। आपको केवल कहने की ज़रूरत है कि होम स्क्रीन पर वर्तमान पृष्ठ को जोड़ने के लिए सफारी है, जहां सभी एप्लिकेशन हैं (इसके लिए हम सफारी नेविगेशन बार पर एक तीर के साथ आइकन को नीचे की तरफ दबाते हैं)। नतीजतन, हमारा आवेदन की सूची में दिखाई देगा। हम खोलते हैं और आवाज करते हैं - वेब पेज का कोई संकेत नहीं, फुल स्क्रीन, ब्लैक स्टेटस बार, सब कुछ बड़े लोगों की तरह है!

हम हवाई जहाज मोड (इंटरनेट बंद) में जाते हैं और शुरू करते हैं ... यह काम करता है और इंटरनेट के लिए नहीं पूछता है!

बोनस

जैसा कि आप जानते हैं, स्क्रीन पोर्ट्रेट या लैंडस्केप ओरिएंटेशन में हो सकती है, ठीक है, हम समर्थन जोड़ते हैं। ऐसा करने के लिए, हम onorientationchange

घटना पर व्यवहार को लागू करते हैं।

window.onorientationchange = function() { 
      

        
        
        
      

     //    
      

        
        
        
      

     }

वह सब है।

एक अच्छा समय और दिलचस्प अनुप्रयोग है!

http://bit.ly/isinchron

खुद AppStor

शूटर

बोनस

संदर्भ

More articles: