Fatal编程技术网
  • javascript/
  • Javascript 如何使用服务工作者预切django html模板

Javascript 如何使用服务工作者预切django html模板

javascript django

Javascript 如何使用服务工作者预切django html模板,javascript,django,service-worker,progressive-web-apps,sw-precache,Javascript,Django,Service Worker,Progressive Web Apps,Sw Precache,我正在将我的Django项目转换为一个渐进的web应用程序，我正在尝试对我的文件进行预缓存，以便它们可以脱机使用。我的问题是，我不知道如何找到我的模板（例如homepage.html、index.html）来使用我的服务人员对它们进行预切。我将我的服务人员放在静态文件夹中 我当前的文件夹结构如下所示： main/ -- migrations/ -- static/ ---- js/ ------ core/ ------ plugins/ ------ app.js ---- css/ ---

我正在将我的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
如何将我的主应用程序和第二个应用程序的HTML模板映射到静态文件夹中的myServiceWorker.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();
    })
  );
});
以下是您的操作方法：

1） 按照这段精彩视频中的描述设置serviceworker.js：（在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>
在Django网站上，这个过程对我来说非常有效。希望它能帮助其他（像我一样）偶然发现这篇文章的人。

我不清楚你想在这里做什么。当然，你需要缓存的不是模板，而是视图的渲染输出？@DanielRoseman是的，我真的不知道该怎么做。我刚刚学习了本教程，但即使没有视图数据的html和css也无法脱机使用。我仍然从chrome上得到恐龙。 
# mainApp/urls.py

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