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ファイルを含めて、ページを読み込むときに呼び出しを挿入します。

• iOSフルスクリーンアプリケーションのリンクを介したSafariでの不要な終了の問題を修正し、localStorageのドメイン内の現在のURLを保存/復元するには：$ .fixLinks（）;
• iOS用Safariの終了の問題を修正しますが、localStorageのURLを覚えていない場合：$ .fixLinks（false）;
• セッションCookieのリセットに関する問題を修正します。$ .fixCookie（ "SID"）; ここで、「SID」はセッションCookieの名前です。