iOS 웹뷰 사용 경험 개선을 위한 확장 함수. 네이티브 앱을 쓰는 것 처럼 느껴지게 하는 함수들을 제공한다.

WKWebView+customization.swift

//
//  Created by donghyeon on 2020/10/18.
//

import Foundation
import WebKit

extension WKWebView {
  func disableZoom() {
    let script: String = """
    (function() {
        \(Self.scriptForUpdateViewPortProperties)
        updateViewPortProperties({
            'initial-scale': 1,
            'minimum-scale': 1,
            'maximum-scale': 1,
            'user-scalable': 'no',
        });
    })()
    """

    self.configuration.userContentController.addUserScript(
      WKUserScript(
        source: script,
        injectionTime: .atDocumentEnd,
        forMainFrameOnly: true))
  }

  func addNotchConfiguration() {
    let script: String = """
    (function() {
        \(Self.scriptForUpdateViewPortProperties)
        updateViewPortProperties({
            'viewport-fit': 'cover',
        });
    })()
    """

    self.configuration.userContentController.addUserScript(
      WKUserScript(
        source: script,
        injectionTime: .atDocumentEnd,
        forMainFrameOnly: true))
  }

  private static var scriptForUpdateViewPortProperties: String = """
      const updateViewPortProperties = (properties) => {
          const head = document.getElementsByTagName('head')[0];
          const meta = document.getElementsByTagName('meta');
          const viewport = Array.from(meta).find(x => x.name === 'viewport');
          if (viewport) {
              for (let propertyName in properties) {
                if (viewport.content.includes(propertyName))
                  continue;
                viewport.content += `,${propertyName}=${properties[propertyName]}`
              }
            } else {
              const contents = Object.keys(properties).map(propertyName => `${propertyName}=${properties[propertyName]}`);
              const meta = document.createRange().createContextualFragment(`
                  <meta name="viewport" content="${contents.join(',')}">
              `);
              head.appendChild(meta);
          }
      }
  """

  func disableTouchCalloutAndUserSelect() {
    let source: String = """
    (function() {
       const head = document.getElementsByTagName('head')[0];
       const style = document.createRange().createContextualFragment(`
           <style type="text/css">
           *:not(input):not(textarea) {
               -webkit-touch-callout: none;
               -webkit-user-select: none;
           }
           </style>
       `);
       head.appendChild(style);
    })()
    """

    let script = WKUserScript(
      source: source,
      injectionTime: .atDocumentEnd,
      forMainFrameOnly: true)
    self.configuration.userContentController.addUserScript(script)
  }

  func disableTouchHighlight() {
    let source: String = """
    (function() {
       const head = document.getElementsByTagName('head')[0];
       const style = document.createRange().createContextualFragment(`
           <style type="text/css">
           input,
           textarea,
           button,
           select,
           a {
             -webkit-tap-highlight-color: rgba(0,0,0,0);
           }
           </style>
       `);
       head.appendChild(style);
    })()
    """

    let script = WKUserScript(
      source: source,
      injectionTime: .atDocumentEnd,
      forMainFrameOnly: true)
    self.configuration.userContentController.addUserScript(script)
  }
}