使用 UpUp 讓網站離線可用

UpUp 是個很小（2.5 KB）的 Javascript 庫，但卻可以方便的實現網站的離線訪問。我之前有一個小項目，PHP 的後端和頁面，另外藉助 Apeche Cordova 用 HTML 實現了安卓的客戶端以供離線使用。最近用 Django 重新寫了，藉助 UpUp 的離線頁面，我不用爲了離線使用而再去生成一個安卓應用。

一般的網站，要使用 UpUp 是非常簡單的，只需要在網站的頂層文件夾引入對應的庫即可，但是 Django 的靜態文件一般是放在 static 下的，要想在項目根目錄下提供它們，可以這樣設置。

#項目的 url.py 文件
from django.urls import path
...
from . import views

urlpatterns = [
    ...
    path('upup.min.js', cache_page(60 * 60 * 48)(TemplateView.as_view(template_name="site/upup.min.js", 
  content_type='application/javascript', )), name='upup.min.js'),
    path('upup.sw.min.js', cache_page(60 * 60 * 48)(TemplateView.as_view(template_name="site/upup.sw.min.js", 
  content_type='application/javascript', )), name='upup.sw.min.js'),
]

然後將 upup.min.js 和 upup.sw.min.js 放在項目的模板目錄裏，比如 mysite/site/templates/site/ 中。

最後在 HTML 頁面中引用並設置需要離線的文件即可。

...
<script type="text/javascript" src="{% url 'upup.min.js' %}"></script>
<script type="text/javascript" src="{% static 'site/js/jquery-3.6.0.min.js' %}"></script>
<script>
UpUp.start({
  'content-url': '/site/',
  'assets': ['/static/site/js/jquery-3.6.0.min.js',
   '/static/site/js/site.js', '/static/site/css/site.css']

});
</script>

離線站點調試的過程中遇到的另外一個問題是，離線站點必須是 HTTPS 類型的加密頁面，但是本地配置 HTTPS 又略嫌繁瑣，其實只要再 Chrome 裏添加例外（chrome://flags/#enable-site-per-process）即可。火狐我還不知道要怎麼添加，最近安卓火狐的一系列更新都不盡人意，實在是有些令人擔憂。