我正在将我的 Django 项目转换为渐进式 Web 应用程序，我正在尝试预缓存我的文件以便它们离线可用。我的问题是，我不知道如何使用我的服务工作者找到我的模板(例如主页.html、索引.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
如何在静态文件夹中映射我的主应用程序和 service Worker 上的my_second_app.js 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();
})
);
});
以下是您的操作方法：
1(设置你的服务工作者.js正如这个精彩的视频中所描述的那样：https://www.youtube.com/watch?v=ksXwaWHCW6k(大约在27：30标记处，他开始重写服务工作者.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( 将您的服务工作者.js文件放在您的主应用程序/模板/文件夹中
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网站上对我来说效果非常好。希望它能帮助偶然发现这篇文章的其他任何人(比如我(。