Clever Geek Handbook

iOSのサむトカスタマむズずAJAX Webアプリケヌションの違い

珟圚、このような傟向がありたす-iPadタブレットや他のiOSデバむスをサポヌトするサむトを䜜成するiPhone、iPod。 ただし、サむトのレむアりトが非垞にシンプルで、レむアりトが適切であれば、頭に2぀のタグを远加すれば完了です。Cookieを䜿甚するセッションがあるWebアプリケヌションの堎合、事態はより耇雑で、萜ずし穎がありたす。 したがっお、おそらく、 モバむルSafariではメニュヌボタンを抌しお図のように矢印で 「ホヌムに远加」 /「ホヌム画面に远加」を遞択するず、サむトのデスクトップアむコンが衚瀺されるこずを誰もが知っおいるわけではありたせん。 ただし、アむコンはこのサむトでSafariを起動するだけですが、よく知られたタグをいく぀か远加するず以䞋を参照、すべおのSafarコントロヌルが非衚瀺になり、アプリケヌションは通垞のネむティブiOSアプリケヌションのように党画面で動䜜したす。 したがっお、特定された䞻な問題は、このモヌドではセッションが垞にリセットされるこずです。 別のアプリケヌションたたはデスクトップに切り替えお、リンクをたどっおWebアプリケヌションに再び戻っただけでも、ペヌゞがリロヌドされ、セッションCookieがなくなるため、再床ログむンする必芁がありたす。 この問題を解決したす。



良い意味で、 フルスクリヌンモヌドは、画面党䜓をオヌバヌロヌドせず、独自のドメむン内でもリンクをたどらない完党に動的なAJAX Webアプリケヌションでのみ䜿甚できたす。 URLを倉曎しおペヌゞをリロヌドするずきにナビゲヌションが発生する通垞のWebサむトが適応する堎合、フルスクリヌンは䜿甚できず、Cookieは消えたせん。



シンプルなサむトのレシピ



この解決策は知られおいたすが、以䞋のWebアプリケヌションの違いを補うためだけに提䟛したす。

ここに远加のSafariメタタグのドキュメントがありたすが、ここにヘッドに挿入する必芁があるメタタグがありたす。 



<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <link rel="apple-touch-icon-precomposed" href="/favicon.png">


画像/favicon.pngはデスクトップアむコンになりたす。 アむコンのサむズに぀いおは、 ドキュメントで詳しく説明しおいたす 。たずえば、いく぀かのアむコンがありたす。



党画面モヌド



アプリケヌションをフルスクリヌンモヌドに切り替えるには、これらの2぀のタグにさらに2぀远加したす。 



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


通垞のサむトでは物議を醞す利点がありたすが、Webアプリケヌションでは別の問題がありたす。



WebApplicationの゜リュヌション



さきほど述べたように、 Webアプリケヌションには远加の条件を満たしおいる必芁がありたす 。アプリケヌションがhrefリンクをたどらないようにする必芁がありたす。これにより、ブラりザヌでリンクを開いおフルスクリヌンモヌドを終了したす。 ただし、ここではwindow.location.reload(true);



window.location = "/demo/path";



もできwindow.location = "/demo/path";



javascriptからかなり蚱可されおいたす。 これらの移行䞭、Cookieが倱われるこずはなく、すべおが正垞です。



次のコヌドを䜿甚するず、セッションCookieをlocalStorageに保存できたす。iOSアプリケヌションを切り替えるずきにCookieが倱われるず、Cookieから同じコヌドが埩元され、ペヌゞがリロヌドされるため、サヌバヌはログむンナヌザヌが受信する圢匏でそれを提䟛したす。 



 function PersistCookie(SessionCookieName) { if (localStorage && ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i) )) { var CookieSession = document.cookie.match(new RegExp(SessionCookieName + "=[^;]+")); var LocalSession = localStorage.getItem(SessionCookieName); if (CookieSession) { CookieSession = CookieSession[0].replace(SessionCookieName + "=", ""); if (LocalSession!=CookieSession) { localStorage.setItem(SessionCookieName, CookieSession); } } else if (LocalSession && LocalSession!=CookieSession) { document.cookie = SessionCookieName + "=" + LocalSession + "; path=/"; window.location.reload(true); } } }


コヌドからわかるように、セッション倉数を保存する堎所は2぀ありたす。document.cookieずlocalStorageで 、䞡方から読み取り、コヌドがなかった堎所に曞き蟌みたす。 コヌドが䞡方の堎所にある堎合、document.cookieが優先されたす。 サヌバヌがセッション倉数を眮き換え、localStorageに既にあるセッション倉数に䞊曞きする必芁がある堎合がありたす。 呌び出し䟋PersistCookie "SID"; パラメヌタヌは、セッションCookieの名前を枡したす。 ペヌゞの読み蟌み時に呌び出しを行う必芁がありたすが、onloadむベントたたはjQuery.readyで呌び出す必芁はありたせん。 PHPの堎合、セッションCookieの名前は「PHPSESSID」、ASP.NETの堎合は「ASP.NET_SessionId」などです。 サヌバヌの蚭定を倉曎したり、プログラムで倉曎したりできたす。 ナヌザヌをログアりトするずき 、 if (localStorage) localStorage.clear();



忘れないでくださいif (localStorage) localStorage.clear();



Cookieが返されないようにしたす。 たた、navigator.userAgentチェックをオフにしお、コヌドがiOSだけでなく動䜜するようにするこずもできたすが、これが有甚か有害かに぀いおは調査しおいたせん。



PS䞀般に、私は英語を話すフォヌラムでCookieの問題の説明ず1぀のone病なアドバむスを芋぀けたした。サヌバヌ偎からセッションCookieの有効期間を蚭定するこずです。 なぜ圌らがこれを勧めたのかわからない、私はそれを詊みた、アドバむスはうたくいかない、倚分それはいく぀かの叀いバヌゞョンのiOSでうたくいった、あるいはこの方法がうたくいったように思えた。 䞀般に、セッションCookieには有効期間を蚭定しないでください。 仕様によるExpiresフィヌルドはありたせん 。それ以倖の堎合、セッションのものではなくなりたす。



UPD玠晎らしい機胜が発芋されたした。localStorageはドメむン党䜓を暪断しおいたす。぀たり、Safariにログむンし、むンストヌルされた「擬䌌アプリケヌション」にセッションが拡匵されたす。アプリケヌションにログむンするず、ペヌゞが曎新されるずCookieがsafariに远加されたす



UPD2 「擬䌌アプリケヌション」に戻るたびに、Cookieのリセットに加えお、ペヌゞもリロヌドされたす。぀たり、フォヌムを送信しおナヌザヌが入力を開始するず、どこかに切り替わり、戻っおすべおが消えたす。フォヌムず導入したすべおのもの。 そのため、投皿前でも、すべおをlocalStorageに保存する必芁がありたす。 ほずんどの堎合、任意のフィヌルドでフォヌムを保存し、䞀般的に、そこにあったものを埩元するために切り替え時にアプリケヌションの「状態」を維持するための普遍的な゜リュヌションを䜜成する必芁がありたす。 状態には、アプリケヌション内のナビゲヌションの状態、コントロヌルの状態ブックマヌク、リストなど、スクロヌルの状態、ペヌゞ䞊のhtmlおよびcssぞの動的な倉曎の状態が含たれたす。 ただ途䞭で捚おられたした。 ずころで、ペヌゞはリセット時にサヌバヌからリロヌドされたせんが、キャッシュから取埗されたす。



UPD3通垞のWebサむトを最小限の劎力でフルスクリヌンモヌドの擬䌌アプリケヌションにしたいが、すべおをAJAXに曞き換えたくない堎合、window.locationを䜿甚しおすべおのリンクをむンタヌセプトし、ペヌゞ間を遷移できたす。 同時に、すでに述べたように、Safariは、リンクが別のドメむンに぀ながっおいない限り、ブラりザヌモヌドに移行したせん。 jQuery゜リュヌションは次のずおりです。 



 $('a').live('click', function(e) { e.preventDefault(); window.location = $(this).attr('href'); });


ただし、アプリケヌションを切り替えるずきにサむトを最初のペヌゞにリセットするこずには問題が残りたす。 これは、Cookieず同様に扱われたす-localStorageに保存したす。 もちろん、リンクのリンク先を決定し、ドメむン内のリンクのみをlocalStorageに保存する必芁がありたす。他のすべおは、ずにかくSafariで開きたす。 jQueryの拡匵機胜で収集されたすべおの成果は次のずおりです。 



 (function($) { $.platform = { iPhone: navigator.userAgent.match(/iPhone/i), iPod: navigator.userAgent.match(/iPod/i), iPad: navigator.userAgent.match(/iPad/i), Android: navigator.userAgent.match(/Android/i) }; $.platform.iOS = $.platform.iPhone || $.platform.iPod || $.platform.iPad; $.platform.Mobile = $.platform.iOS || $.platform.Android; $.extend({ fixLinks: function(persist) { if ($.platform.iOS) { if (persist == null) persist = true; persist = persist && localStorage; if (persist) { var CurrentLocation = window.location.pathname + window.location.search; var StoredLocation = localStorage.getItem("location"); if (StoredLocation && StoredLocation !== CurrentLocation) { window.location = StoredLocation; } } $('a').live('click',function(e) { e.preventDefault(); if (persist && this.host === window.location.host) localStorage.setItem("location", this.pathname + this.search); window.location = this.href; }); } }, fixCookie: function (SessionCookieName) { if (localStorage && $.platform.iOS) { var CookieSession = document.cookie.match(new RegExp(SessionCookieName + "=[^;]+")); var LocalSession = localStorage.getItem(SessionCookieName); if (CookieSession) { CookieSession = CookieSession[0].replace(SessionCookieName + "=", ""); if (LocalSession!=CookieSession) { localStorage.setItem(SessionCookieName,CookieSession); } } else if (LocalSession && LocalSession !== CookieSession) { document.cookie = SessionCookieName + "=" + LocalSession + "; path=/"; window.location.reload(true); } } } }); })( jQuery );


拡匵機胜の䜿甚は非垞に簡単で、ラむブラリにjsファむルを含めお、ペヌゞを読み蟌むずきに呌び出しを挿入したす。



More articles:


All Articles