ホームページ > 記事 > ウェブフロントエンド > モバイル ハイブリッド - iOS ホーム画面にショートカットを追加_html/css_WEB-ITnose
モバイル ハイブリッド - iOS ホーム画面にショートカットを追加_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:52:282544ブラウズ
ハイブリッド R&D モデルについては、ここではこれ以上多くは述べません。これは、現在のモバイル端末の主流の R&D モデルです。私たちのアプリが多くの Web 実装機能を統合しており、一部の Web 実装モジュールが独立した機能の一部として非常に頻繁に開かれる場合、この時点で、対応する機能ページをショートカットとしてデスクトップに追加できます。 Web 機能が APP から比較的独立している場合、このショートカットを通じて Safari を直接開くことができ、ユーザーは Safari で目的の操作を完了できます。一方、Web 機能の実装が APP と高度に連携している場合、または APP のユーザーの粘着性を高める観点から、このショートカットをクリックして APP を起動し、独自の対応するモジュールにジャンプすることができます。アプリ。
addBaiduToDesktop.gif
基本的な実装アイデア
Safari 独自のホーム画面への追加機能を使用するには、2 つの実装ソリューションがあります。
実装計画 1:
调用Safari访问外部页面，将外部页面作为快捷页面添加到桌面。优点：实现简单，工作量少，页面灵活可随时更改。缺点：无网状态下，无法生成快捷方式。
実装計画 2:
通过应用内部启动httpServer，调用safari访问localhost，同时，在主页通过跳转到新的Data URI页面。优点：不需要服务器，没网也能完成操作。缺点：依赖的类库较多，而且实现较麻烦。
機能カプセル化と技術実装
案 1 は比較的簡単なので、これ以上は述べません。この記事では主にオプション 2 に焦点を当てます。使用される知識には、HTML、cocoaHttpServer、データ URI スキームなどが含まれます。データ URI スキームに関する知識については、私の他の記事を参照してください。フロントエンドデータ URI スキーム: http://www.jianshu.com/p/ea49397fcd13
カプセル化方法
スキーム 2 の場合、関数はカプセル化されます。のみ デスクトップにショートカットを動的に追加するのに必要なコードは 3 行だけです。プロジェクトアドレス: https://github.com/dlgenius/DLAddToDesktop
DLAddToDesktopLib.gif
関数のカプセル化
一部のクラス ライブラリを使用
- CocoaHTTPServer
- GTMBase64
使用法: 1. CocoaHTTPServer および GTMBase64 クラス ライブラリをプロジェクトにインポートします。 2. DLAddToDesktopLib フォルダーをコピーします。プロジェクトに
lib.png
3. メイン ページに追加する必要があるボタン イベントに次のコードを追加します
DLAddToDesktopHandler *handler = [DLAddToDesktopHandler sharedInsance]; NSString *imageString = [[UIImage imageNamed:@"webIcon"] dataURISchemeImage]; [handler addToDesktopWithDataURISchemeImage:imageString title:@"Donglei" urlScheme:@"DLAddToDesktop://"];
4. プロジェクトの URL タイプを設定することを忘れないでください
URL Schemes.jpg
以下は主なメソッドです。
/** * @brief 创建DLCreateShortcutHandler单例 * * @return DLCreateShortcutHandler单例 */+(DLCreateShortcutHandler *)sharedInsance;/** * @brief 通过Safari添加快捷方式到桌面 * * @param dataURISchemeImage data URI scheme * @param title 快捷方式桌面名称 * @param urlScheme ios APP的URL Scheme * * @return void */- (void)addToDesktopWithDataURISchemeImage:(NSString *)dataURISchemeImage title:(NSString *)title urlScheme:(NSString *)urlScheme;
/** * @brief 生成Data URL Scheme 形式的图片字符串 * * @return Data URL Scheme 形式的图片字符串 */- (NSString *)dataURISchemeImage;
技術実装
HTML 関連
Apple Safari 自体は、ホーム画面に Web ページを追加する機能をサポートしています。Apple の公式ドキュメント (https: //developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CconfiguringWebApplications/CconfiguringWebApplications.html
カプセル化されたライブラリの HTML ヘッダー ファイルには次のコードがあります
<head> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta content="text/html charset=UTF-8" http-equiv="Content-Type" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <link rel='apple-touch-icon' href='DLCSImageData'> <title>DLCSTitle</title></head>
このうち、
- apple-mobile-web-app-capable は、アプリケーションの全画面表示を定義するために使用されます。
- apple-mobile-web-app-status-bar-style が定義されました。 apple-mobile-web-app-capable を前提として、ステータスバーの属性値 apple-mobile-web-app-status-bar-style の設定のみが有効となります。
- ビューポートでは、width で幅を指定し、initial-scale で初期縮小率を指定し、minimum-scale で縮小率を指定し、maximum-scale で拡大率を指定します。 user-scalable - ユーザーがページをズームできるかどうかを決定します。
- rel='apple-touch-icon' href='DLCSImageData'、ホーム画面に追加されるアイコンには、apple-touch-icon と apple-touch-icon-precomposed という 2 つの属性値があります。 iOSでアイコンに自動追加されるハイライトレイヤーを適用するかどうかです。
さらに、次のコードを HTML に追加して、デスクトップに追加されたショートカットの起動ページを設定して、よりアプリらしくすることができます。
<link rel="apple-touch-startup-image" sizes="2048x1496" href="">
しかし、カプセル化するコードにはこの関数が追加されていません。これが実装されていない理由は、実際には非常に単純です。それは、最初にローカル アドレスにアクセスしてから、データの形式で HTML ページにジャンプするためです。 URI スキーム、これはホーム画面に追加されるものです。データ URI スキーム形式の HTML ページの場合、データ URI はアドレス バーに結合され、画像データがデータ URI 形式でエンコードされます。起動ページの画像は一般に比較的大きく、base64 でエンコードされており、ホーム画面に追加したアイコンもこの方法で処理されているため、Safari の URL の長さ制限を超える可能性があります。ページを開けない主な理由は、データ URI スキームのモバイル端末のパフォーマンスが非常に低いため、大きな画像の埋め込みには適していません。ただし、選択肢 1 を採用すると、外部ページにアクセスしてホーム画面に追加する機能が実装されるため、この機能の実装を検討できます。
CocoaHTTPServer 関連
CocoaHTTPServer は適切にパッケージ化されており、非常に簡単に使用できます
//config HttpServer _myHTTPServer = [[HTTPServer alloc] init]; [_myHTTPServer setType:@"_http._tcp."]; [_myHTTPServer setPort:port]; //setWebPath NSString *serverWebPath = [self getServerWebPath]; BOOL created = [[NSFileManager defaultManager] createDirectoryAtPath:serverWebPath withIntermediateDirectories:YES attributes:nil error:nil]; if(created){ [_myHTTPServer setDocumentRoot:serverWebPath]; } 上記のコードを使用して、ローカル サーバーを確立しました。次に start を呼び出してローカル サービスを開始します。
- (void)startServer{ NSError *error; if([_myHTTPServer start:&error]) { DDLogInfo(@"Started HTTP Server on port %hu", [_myHTTPServer listeningPort]); } else { DDLogError(@"Error starting HTTP Server: %@", error); }} ビジネス ロジック実装関連
ここには複雑なビジネス ロジックはありません。主なことは HTML ドキュメントを読み取ることです。 HTML ファイル内の対応するフィールドを置き換えて、HTML ドキュメントを HTTPServer の WebPath に保存し、Safari を通じてローカル サービスを開きます。私のソースコードを読むことができます。
プロジェクト アドレス
プロジェクト アドレス: https://github.com/dlgenius/DLAddToDesktop
ありがとう
iOS の Web サイトのホーム画面にアイコンを追加し、スタートアップ画像 http://blog.csdn.net/lgd5979/article/details/7877998...