时间戳

首页 > 解决方案 > 如何使用服务工作者预缓存 django html 模板

javascript - 如何使用服务工作者预缓存 django html 模板

问题描述

我正在将我的 Django 项目转换为渐进式 Web 应用程序，并且我正在尝试预缓存我的文件，以便它们可以离线使用。我的问题是，我不知道如何找到我的模板（例如 homepage.html、index.html）以使用我的服务人员预缓存它们。我将我的服务人员放在静态文件夹中。

我当前的文件夹结构如下所示：

main/
-- migrations/
-- static/
---- js/
------ core/
------ plugins/
------ app.js
---- css/ 
---- img/ 
---- templates/
------ base.html
------ about.html
------ homepage.html
----*serviceWorker.js*
-- __init.py__
-- admin.py
-- apps.py
-- models.py
-- views.py
my_second_app/
-- migrations/
-- static/
---- js/
------ index.js
---- css/ 
---- img/ 
---- templates/
------ base.html
------ user.html
------ page.html
-- __init__.py

如何将我的主应用程序和 my_second_app 的 HTML 模板映射到静态文件夹内的 serviceWorker.js？提前感谢任何可以提供帮助的人。如果我做错了，请告诉我:)

无论如何，我已经成功地预缓存了静态文件。这是我的代码示例。

const precached = [
  '/',
  '/screener/',
  '/accounts/login/',
  '/accounts/signup/',
  '/assets/js/now-ui-dashboard.js',
  '/assets/js/core/bootstrap.min.js',
  '/assets/js/core/jquery-ui.min.js',
  '/assets/js/core/jquery.3.2.1.min.js',
  '/assets/js/plugins/chart.bundle.min.js',
  '/assets/css/accounts.css',
  '/assets/css/bootstrap.min.css',
  '/assets/css/now-ui-dashboard.css',
  '/assets/css/user.css',
  '/assets/fonts/nucleo-outline.ttf'
]

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(staticCacheName).then(cache => {
      return cache.addAll(precached);
    })
    .then(() => {
      return self.skipWaiting();
    })
  );
});

标签： javascriptdjangoservice-workerprogressive-web-appssw-precache

解决方案

这是你如何做到的：

1）按照这个精彩视频中的描述设置您的 serviceworker.js：https ://www.youtube.com/watch?v= ksXwaWHCW6k（大约在 27:30 标记，他开始重写 serviceworker.js 以缓存完全渲染视图（您询问了“模板”，但我认为您的意思是视图）

2) 在你的 base.html 页面上初始化你的 serviceworker，如下所示：

# in the <head> tag of your mainApp/base.html

    <script type="text/javascript">
        // Initialize the service worker
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register("{% url 'serviceworker' %}", { 
              scope: '.' // <--- THIS BIT IS REQUIRED
            }).then(function (registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }, function (err) {
                console.log('ServiceWorker registration failed: ', err);
            });
        }
    </script>

3) 将你的 serviceworker.js 文件放在你的 mainApp/Templates/ 文件夹中

4) 将此添加到您的 mainApp/urls.py （这使您可以在 serviceworkers.js 文件中使用 Django 模板 {% Like this %}！）

# mainApp/urls.py

urlpatterns = [
    ...
    path('serviceworker', (TemplateView.as_view(
      template_name="browsepages/serviceworker.js", 
      content_type='application/javascript',)), 
      name='serviceworker'),
]

这个过程在我的 Django 网站上对我来说非常有效。希望它能帮助其他偶然发现这篇文章的人（比如我）。

推荐阅读