Главная » 2018 » Апрель » 14 »

Створення оболонки додатки


23:01

Створення оболонки додатки

Структура вашої програми для чіткого відмінності між оболонкою сторінки і динамічним контентом. Загалом, ваше застосування повинне завантажувати найпростішу оболонку, але включати в себе досить значимий контент сторінки з початкової завантаженням. Визначте правильний баланс між швидкістю і свіжістю даних для кожного з ваших джерел даних.

Недійсне додаток Wikipedia від Jake Archibald є хорошим прикладом PWA, який використовує модель оболонки програми. Він завантажується миттєво при повторних відвідинах, але динамічно витягує контент за допомогою JS. Цей контент потім кешируєтся в автономному режимі для майбутніх відвідувань.

Приклад HTML для оболонки додатки

Цей приклад відокремлює інфраструктуру основного додатки і призначений для користувача інтерфейс від даних. Важливо, щоб початкова завантаження була максимально простий, щоб відображати тільки макет сторінки, як тільки відкриється веб-додаток. Деякі з них надходять з індексного файлу вашої програми (вбудовані DOM, стилі), а інші завантажуються з зовнішніх скриптів і таблиць стилів.

Все призначений для користувача інтерфейс і інфраструктура кешуються локально з використанням робочого, так що при наступних навантаженнях витягуються тільки нові або змінені дані, а не завантажуються всі.

Ваш index.html файл в робочому каталозі повинен виглядати приблизно так: Це підмножина фактичного вмісту і не є повним індексним файлом. Давайте подивимося, що він містить.

HTML і CSS для «скелета» вашого призначеного для користувача інтерфейсу в комплекті з навігаторами і наповнювачами вмісту.

Зовнішній файл JavaScript (app.js) для обробки навігації і логіки призначеного для користувача інтерфейсу, а також код для відображення повідомлень, отриманих з сервера, і їх локального зберігання з використанням механізму зберігання, такого як IndexedDB.

Ярлик веб-додатки і завантажувач сервісів, щоб включити автономні можливості.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>App Shell</title>
  <link rel="manifest" href="/manifest.json">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="styles/inline.css">
</head>

<body>
  <header class="header">
    <h1 class="header__title">App Shell</h1>
  </header>

  <nav class="nav">
  ...
  </nav>

  <main class="main">
  ...
  </main>

  <div class="dialog-container">
  ...
  </div>

  <div class="loader">
    <!-- Show a spinner or placeholders for content -->
  </div>

  <script src="app.js" async></script>
  <script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  }
  </script>
</body>
</html>

Кешування оболонки додатки

Оболонку додатки можна кешувати за допомогою вручну написаного працівника служби або згенерованого сервісного працівника, використовуючи статичний інструмент для припинення активів, такий як sw-precache.

Кешування оболонки додатки вручну

Нижче наведено приклад коду робочого співробітника, який кешируєт статичні ресурси з оболонки додатки в API-інтерфейс кеша за допомогою install собитія робочого співробітника:


var cacheName = 'shell-content';
var filesToCache = [
  '/css/styles.css',
  '/js/scripts.js',
  '/images/logo.svg',

  '/offline.html’,

  '/’,
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

Використання sw-precache для кешування оболонки додатки

Сервісний робочий, згенерований sw-precache, буде кешувати і обслуговувати ресурси, які ви налаштовуєте як частина процесу складання. Ви можете використовувати його для кожного HTML, JavaScript і CSS-файлу, який становить оболонку вашого застосування. Все буде працювати в автономному режимі і швидко завантажуватися при наступних відвідуваннях без будь-яких додаткових зусиль.

Ось основний приклад використання sw-precache як частини процесу складання gulp:


gulp.task('generate-service-worker', function(callback) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = 'app';

  swPrecache.write(path.join(rootDir, 'service-worker.js'), {
    staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
    stripPrefix: rootDir
  }, callback);
});

Оболонка додатки, що використовує Service worker, є потужним шаблоном для автономного кешування, але також пропонує значні виграші в продуктивності у вигляді миттєвого завантаження для повторних відвідувань вашої PWA. Ви можете кешувати свою оболонку додатки, щоб вона працювала офлайн і заповнювала її вміст за допомогою JavaScript.

При повторних відвідинах це дозволяє отримувати значні пікселі на екрані без мережі, навіть якщо ваше зміст в кінцевому підсумку відбувається звідти.

источник: https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ru

Категория: Веб основи | Просмотров: 21 | Добавил: Uainetatua | Теги: Створення оболонки додатки | Рейтинг: 0.0/0
Всего комментариев: 0
avatar
Лицензия Creative Commons
Это произведение доступно по лицензии Creative Commons С указанием авторства 4.0 Всемирная.