שירות HTML: שיטות מומלצות

יצירת ממשקי משתמש באמצעות שירות ה-HTML מבוססת על דפוסים ותרגילים רבים שדומים לאלה של סוגים אחרים של פיתוח אינטרנט. עם זאת, יש כמה היבטים ייחודיים לסביבת Apps Script או שראוי להדגיש אותם. בהמשך מפורטות כמה שיטות מומלצות שכדאי לזכור כשמפתחים ממשקי משתמש משלכם לשירותי HTML.

HTML,‏ CSS ו-JavaScript נפרדים

שמירת כל הקוד של HTML,‏ CSS ו-JavaScript בקובץ אחד עלולה להקשות על הקריאה והפיתוח של הפרויקט. ב-Apps Script נדרש קוד בצד הלקוח שיוצג בקובצי ‎ .html, אבל עדיין אפשר להפריד את ה-CSS ואת ה-JavaScript בצד הלקוח לקובצי HTML שונים, ולאחר מכן לכלול אותם בדף ה-HTML הראשי באמצעות פונקציה בהתאמה אישית.

בדוגמה הבאה מוגדר קובץ include() מותאם אישית בצד השרת בקובץ Code.gs כדי לייבא את התוכן של הקובץ Stylesheet.html ושל הקובץ JavaScript.html לקובץ Page.html. כשמפעילים את הפונקציה באמצעות סקריפטים של הדפסה, היא מייבאת את תוכן הקובץ שצוין לקובץ הנוכחי. שימו לב שהקבצים הכלולים מכילים תגי <style> ו-<script> כי הם קטעי HTML ולא קובצי ‎ .css או ‎ .js טהורים.

Code.gs

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

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

Page.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>

Stylesheet.html

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

JavaScript.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 מצב ארגז חול החדש יותר, הכללת קובצי JavaScript או CSS שלא מוצגים באמצעות HTTPS תוביל לשגיאות כמו זו שבהמשך.

תוכן מעורב: הדף בכתובת 'https://‎…' נטען דרך HTTPS, אבל הבקשה שלו הייתה לסקריפט לא מאובטח בכתובת 'http://‎…'. הבקשה הזו נחסמה. התוכן צריך להיכלל ב-HTTPS.

רוב הספריות הפופולריות תומכות גם ב-HTTP וגם ב-HTTPS, כך שהמעבר הוא בדרך כלל עניין של הוספת 's' לכתובת ה-URL.

שימוש בהצהרה על סוג המסמך ב-HTML5

אם הדף מוצג באמצעות IFRAME מצב ארגז חול החדש יותר, חשוב לכלול את קטע הקוד הבא בחלק העליון של קובץ ה-HTML.

<!DOCTYPE html>

ההצהרות האלה על סוג המסמך מאפשרות לדפדפן לדעת שהדף תוכנן לדפדפנים מודרניים, ושלא צריך לעבד את הדף באמצעות מצב תאימות. גם אם אתם לא מתכננים להשתמש ברכיבי HTML5 מודרניים או בממשקי API של JavaScript, כדאי לעשות זאת כדי לוודא שהדף יוצג בצורה תקינה.

טעינת JavaScript בסוף

מפתחי אינטרנט רבים ממליצים לטעון קוד JavaScript בחלק התחתון של הדף כדי לשפר את המהירות של התגובה, והדבר חשוב עוד יותר בשירות HTML. העברת התגים <script> לסוף הדף תאפשר לתוכן ה-HTML להירנדר לפני עיבוד ה-JavaScript, וכך תוכלו להציג למשתמשים ספינר או הודעה אחרת.

ניצול היתרונות של jQuery

jQuery היא ספריית JavaScript פופולרית שמפשטת משימות נפוצות רבות בפיתוח אינטרנט.