モバイルハイブリッド - iOS ホーム画面にショートカットを追加_html/css

モバイルハイブリッド - iOS ホーム画面にショートカットを追加_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:52:28

オリジナル

2468 人が閲覧しました

ハイブリッド 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 を通じてローカルサービスを開きます。私のソースコードを読むことができます。