سرویس HTML: بهترین روش ها

ساخت رابط‌های کاربری با سرویس HTML مشابه توسعه وب استاندارد است. با این حال، جنبه‌های خاصی مختص محیط Apps Script هستند. این راهنما بهترین شیوه‌ها را برای توسعه رابط‌های کاربری سرویس HTML واکنش‌گرا و ایمن برجسته می‌کند.

HTML، CSS و جاوا اسکریپت را از هم جدا کنید

ترکیب تمام HTML، CSS و جاوا اسکریپت در یک فایل واحد می‌تواند نگهداری پروژه‌ها را دشوار کند. اگرچه Apps Script نیاز دارد که کد سمت کلاینت در فایل‌های .html باشد، اما شما همچنان باید CSS و جاوا اسکریپت سمت کلاینت را در فایل‌های خودشان جدا کنید و آنها را با یک تابع سفارشی در صفحه HTML اصلی قرار دهید.

مثال زیر از یک تابع include سمت سرور در Code.gs برای وارد کردن Stylesheet.html و JavaScript.html به Page.html استفاده می‌کند. وقتی این تابع با print scriptlet فراخوانی می‌شود، محتوای فایل را مستقیماً تزریق می‌کند. از آنجا که اینها قطعه کدهای HTML هستند و نه فایل‌های .css یا .js مستقل، باید شامل تگ‌های <style> و <script> باشند.

کد.gs 

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

صفحه.html 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

شیوه‌نامه.html 

<style>
p {
  color: green;
}
</style>

جاوا اسکریپت.html 

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

بارگذاری داده‌ها به صورت ناهمگام، نه در قالب‌ها

HTML قالب‌بندی‌شده می‌تواند برای ساخت سریع رابط‌ها استفاده شود، اما استفاده از آن باید محدود باشد تا از واکنش‌گرا بودن رابط کاربری شما اطمینان حاصل شود. کد موجود در قالب‌ها یک بار هنگام بارگذاری صفحه اجرا می‌شود و تا زمانی که پردازش کامل نشود، هیچ محتوایی به کلاینت ارسال نمی‌شود. داشتن وظایف طولانی‌مدت در کد اسکریپت‌لت شما می‌تواند باعث شود رابط کاربری شما کند به نظر برسد.

از تگ‌های اسکریپت‌لت برای کارهای سریع و یک‌باره مانند گنجاندن محتوای دیگر یا تنظیم مقادیر استاتیک استفاده کنید. تمام داده‌های دیگر باید با استفاده از فراخوانی‌های google.script.run بارگذاری شوند. کدنویسی به این روش ناهمزمان دشوارتر است، اما به رابط کاربری اجازه می‌دهد سریع‌تر بارگذاری شود و به آن فرصت می‌دهد تا یک اسپینر یا پیام بارگذاری دیگر را به کاربر نمایش دهد.

انجام ندهید - قالب‌ها را بارگیری کنید

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

انجام دهید - بارگیری ناهمزمان

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

بارگذاری منابع با استفاده از HTTPS

در حالت سندباکس IFRAME ، تمام فایل‌های جاوا اسکریپت و CSS باید از طریق HTTPS ارائه شوند. ارائه این فایل‌ها به صورت ناامن منجر به خطاهایی مانند موارد زیر می‌شود:

محتوای ترکیبی: صفحه‌ی «https://...» از طریق HTTPS بارگذاری شده است، اما اسکریپت ناامن «http://...» را درخواست کرده است. این درخواست مسدود شده است؛ محتوا باید از طریق HTTPS ارائه شود.

اکثر کتابخانه‌های محبوب از هر دو HTTP و HTTPS پشتیبانی می‌کنند، بنابراین تغییر معمولاً فقط با اضافه کردن یک «s» به URL انجام می‌شود.

از اعلان نوع سند HTML5 استفاده کنید

اگر صفحه شما با استفاده از حالت جدیدتر IFRAME sandbox ارائه می‌شود، حتماً قطعه کد زیر را در بالای فایل HTML خود قرار دهید.

<!DOCTYPE html>

این اعلان نوع سند به مرورگر می‌گوید که شما صفحه را برای مرورگرهای مدرن طراحی کرده‌اید و نباید صفحه شما را با استفاده از حالت quirks رندر کند. حتی اگر قصد ندارید از عناصر مدرن HTML5 یا APIهای جاوا اسکریپت استفاده کنید، این به شما کمک می‌کند تا صفحه شما به درستی نمایش داده شود.

آخرین بار جاوا اسکریپت را بارگیری کنید

بسیاری از توسعه‌دهندگان وب توصیه می‌کنند که کد جاوا اسکریپت را در پایین صفحه بارگذاری کنید تا واکنش‌گرایی افزایش یابد، و این موضوع در مورد سرویس HTML حتی مهم‌تر است. انتقال تگ‌های <script> به انتهای صفحه به شما امکان می‌دهد محتوای HTML قبل از پردازش جاوا اسکریپت رندر شود و به شما این امکان را می‌دهد که یک spinner یا پیام دیگری را به کاربر نمایش دهید.

از جی‌کوئری بهره ببرید

جی‌کوئری یک کتابخانه محبوب جاوااسکریپت است که بسیاری از وظایف رایج در توسعه وب را ساده می‌کند.