הוספות ל-cache.addAll() ול-ImportScripts() בגרסה 71 ל-Chrome

Jeff Posnick

מפתחים שמשתמשים ב-service worker וב-Cache Storage API צריכים לחפש שניים ההשקה של שינויים קלים בגרסה 71 של Chrome. שני השינויים משפרים את ההטמעה של Chrome מפרטים ודפדפנים אחרים.

איסור על ייבוא סקריפטים אסינכרוניים()

importScripts() מנחה את הסקריפט של ה-Service Worker הראשי להשהות את הביצוע הנוכחי, להוריד קוד נוסף מ- כתובת URL נתונה, ומריצים אותה עד הסוף בהיקף הגלובלי הנוכחי. אחרי שמסיימים, הסקריפט של ה-Service Worker הראשי ממשיך בביצוע. האפליקציה importScripts() שימושית במקרים הבאים אתם רוצים לפצל את הסקריפט של ה-Service Worker הראשי לחלקים קטנים יותר למטרות ארגוניות, או שליפת קוד של צד שלישי כדי להוסיף פונקציונליות ל-Service Worker.

דפדפנים מנסים לצמצם את תופעות הביצועים האפשריות של "הורדה והפעלה של קוד" על ידי שמירה אוטומטית במטמון של כל דבר שנמשך דרך importScripts(), כלומר אחרי ההורדה הראשונית כרוכה מעט מאוד בביצוע הקוד המיובא.

עם זאת, כדי שהפתרון הזה יעבוד, הדפדפן צריך לדעת שלא תהיה שום "הפתעה". הקוד יובא ב-Service Worker אחרי התקנה. בהתאם למפרט של קובץ השירות (service worker), קריאה אל importScripts() אמורה לפעול רק במהלך ביצוע סינכרוני של הרמה העליונה סקריפט של Service Worker, או במקרה הצורך, באופן אסינכרוני בתוך ה-handler של install.

לפני Chrome 71, הפעלה אסינכרונית של importScripts() מחוץ ל-handler של install הייתה בעבודה. החל מגרסה 71 של Chrome, הקריאות האלה להפעיל חריג של סביבת זמן הריצה (אלא אם אותה כתובת URL יובאה בעבר ב-handler של install), תואמת להתנהגות בדפדפנים אחרים.

במקום קוד כמו זה:

// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
  importScripts('my-fetch-logic.js');
  event.respondWith(self.customFetchLogic(event));
});

הקוד של Service Worker אמור להיראות כך:

// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
  event.respondWith(self.customFetchLogic(event));
});

הערה: יכול להיות שחלק מהמשתמשים בספריית קובצי העבודה מסתמכים במרומז על קריאות אסינכרוניות אל importScripts() בלי להיות מודעים לכך. עיינו בהנחיות האלה כדי חשוב שלא יהיו בעיות ב-Chrome 71.

מוציאים משימוש כתובות URL חוזרות שמועברות אל cache.addAll()

אם אתם משתמשים ב-Cache Storage API לצד קובץ שירות (service worker), חל שינוי קטן נוסף Chrome 71 בהתאם למפרט הרלוונטי. כשאותה כתובת URL מועבר מספר פעמים לקריאה אחת אל cache.addAll(), לפי המפרט, ההבטחה שהוחזרה על ידי הקריאה אמורה להידחה.

לפני Chrome 71 זה לא זוהה, והמערכת הייתה מתעלמת מכתובות ה-URL הכפולות.

החל מ-Chrome 71, תופיע הודעת אזהרה שנרשמה במסוף.

הרישום ביומן הוא הקדמה לגרסה 72 של Chrome, שבה במקום רק אזהרה רשומה, כתובות URL כפולות יובילו לדחייה של cache.addAll(). אם התקשרת אל cache.addAll() כחלק משרשרת מובטחת הועבר אל InstallEvent.waitUntil(), כרגיל, דחייה זו עלולה לגרום לכשל בהתקנה של Service Worker.

כך אתם עלולים להיתקל בבעיות:

const urlsToCache = [
  '/index.html',
  '/main.css',
  '/app.js',
  '/index.html', // Oops! This is listed twice and should be removed.
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
  );
});

ההגבלה הזו חלה רק על כתובות ה-URL שמועברות בפועל אל cache.addAll() ועל השמירה במטמון. הן שתי תגובות מקבילות עם כתובות URL שונות, כמו '/' ו-'/index.html', לא יגרום לדחייה.

בדיקה נרחבת של הטמעת קובץ השירות (Service Worker)

קובצי שירות (service worker) מוטמעים באופן נרחב בכל "קמפיינים לטווח ארוך" בדפדפנים לנקודה הזו. אם אתם בודקים באופן קבוע את ה-Progressive Web App מול מספר דפדפנים, או יש מספר גדול של משתמשים שלא משתמשים ב-Chrome, אז רוב הסיכויים שכבר זיהית את חוסר העקביות, ועדכנו את הקוד. אבל אם לא שמתם לב לכך, בדפדפנים אחרים, רצינו לקרוא על השינוי לפני שנשנה את ההתנהגות של Chrome.