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

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

הפרדה בין HTML,‏ CSS ו-JavaScript

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

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

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 כדי ליצור ממשקים במהירות, אבל השימוש בהן צריך להיות מוגבל כדי להבטיח שממשק המשתמש יהיה רספונסיבי. הקוד בתבניות מופעל פעם אחת כשהדף נטען, ולא נשלח תוכן ללקוח עד שהעיבוד מסתיים. אם יש לכם משימות שפועלות לאורך זמן בקוד של ה-scriptlet, יכול להיות שממשק המשתמש ייראה איטי.

משתמשים בתגי scriptlet למשימות מהירות חד-פעמיות, כמו הכללת תוכן אחר או הגדרת ערכים סטטיים. את כל שאר הנתונים צריך לטעון באמצעות קריאות ל-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>

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

טעינת JavaScript בסוף

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

שימוש ב-jQuery

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

שירות HTML: שיטות מומלצות קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.