Question

我正在将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

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

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

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();
    })
  );
});

Answer 1

这是您的操作方式：

1）按照以下精彩视频中的描述设置您的serviceworker.js：https://www.youtube.com/watch?v=ksXwaWHCW6k（大约在27:30标记，他开始重写serviceworker.js以缓存完整呈现的视图（您询问了“模板'但我认为您是要表达意见）

2）像这样在您的base.html页面上初始化服务工作者：

# 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站点上，此过程对我来说非常有效。希望它可以帮助偶然发现这篇文章的其他人（如我）。

如何使用服务工作者预缓存Django HTML模板

1 个答案: