移动端添加桌面快捷方式实现

前言
最近很多移动端都有添加桌面的快捷方式功能，产品小姐姐对此非常感兴趣，一定要做这个功能，所以，今天就来玩玩这个功能。

• 直接上代码
  • Android 代码

// 小于 Android Oreo 版本不支持桌面创建快捷方式
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
  ShortcutManager shortcutManager = (ShortcutManager) mContext.getSystemService(Context.SHORTCUT_SERVICE);
  if (shortcutManager != null && shortcutManager.isRequestPinShortcutSupported()) {
    Intent shortcutInfoIntent = new Intent(mContext, WebActivity.class);

    // 此处 xxx 是跳转到目标 web h5 的地址
    shortcutInfoIntent.putExtra("url", "xxx");

    // 此处 “标题” 是打开 webview 的标题
    shortcutInfoIntent.putExtra("title", "标题");
    shortcutInfoIntent.setAction(Intent.ACTION_VIEW);

    // 此处 “标题” 是桌面创建快捷方式的标题
    // 此处 R.drawable.icon_activity 是桌面创建快捷方式的 logo
    ShortcutInfo info = new ShortcutInfo.Builder(mContext, activityId).setIcon(Icon.createWithResource(mContext, R.drawable.icon_activity))
.setShortLabel("标题").setIntent(shortcutInfoIntent).build();
    PendingIntent shortcutCallbackIntent = PendingIntent.getBroadcast(mContext, 0, new Intent(mContext, MainActivity.class), PendingIntent.FLAG_UPDATE_CURRENT);
    shortcutManager.requestPinShortcut(info, shortcutCallbackIntent.getIntentSender());
  }
} else {
  ToastShow.show("设备不支持在桌面创建快捷图标！");
}

• 此时 Android 就实现了添加桌面快捷方式，但 iOS 可不像 Android 这么直接，iOS 需要一个中间过渡页面，在中间过渡页面通过和 iOS 协商的协议最终跳转到目标页面

• Web 中间过渡页面代码

  
    

    // 设置 iOS 设备添加到桌面打开时全屏，对应着 h5 在 window 中的 window.navigator.standalone 属性
    
    

    // 设置 iOS 设备添加到桌面的标题
    

    // 设置 iOS 设备添加到桌面的图标
    
  

  
    

    
  

• iOS 代码
  • 苹果用的是 WKWebView

- (void) userContentController:(WKUserContentController *) userContentController didReceiveScriptMessage:(WKScriptMessage *) message {

  // 此处 xxx 是跳转到上述 web h5 的中间过渡页面地址，并不是最终目标页地址
  [[UIApplication sharedApplication] openURL:[NSURL URLWithString:url[@"xxx"]] options:@{} completionHandler:^(BOOL success) {}];
}

效果图

• Android 效果图

  
  
  Android 效果图

• iOS 效果图（gif 限制大小，会模糊一点）

  
  
  iOS 效果图