Create an PWA-Basic-App with Offline Cache

sortierung
Samuel Zielke 1 year ago
parent 953bd92114
commit 7bce37647c

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

@ -0,0 +1,52 @@
var staticCacheName = "django-pwa-v" + new Date().getTime();
var filesToCache = [
'/app',
];
// Cache on install
// self.addEventListener("install", event => {
// this.skipWaiting();
// event.waitUntil(
// caches.open(staticCacheName)
// .then(cache => {
// return cache.addAll(filesToCache);
// })
// )
// });
self.addEventListener("install", event => {
this.skipWaiting();
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return fetch('/app')
.then(response => cache.put('/app', new Response(response.body)));
})
)
});
// Clear cache on activate
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames
.filter(cacheName => (cacheName.startsWith("django-pwa-")))
.filter(cacheName => (cacheName !== staticCacheName))
.map(cacheName => caches.delete(cacheName))
);
})
);
});
// Serve from Cache
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
.catch(() => {
return caches.match('app');
})
)
});

@ -0,0 +1,17 @@
{% load pwa %}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% progressive_web_app_meta %}
<title>PioMint - Install</title>
</head>
<body style="background-color: #9FEDD7;">
{% block content %}
{% endblock %}
</body>
</html>

@ -0,0 +1,5 @@
{% extends 'app/base.html' %}
{% block content %}
<h1>Home</h1>
{% endblock %}

@ -0,0 +1,15 @@
{% extends 'app/base.html' %}
{% block content %}
<h1>Installieren</h1>
<br>
<p>
Folgende Schritte sind nötig um PioMint unter IOS zu installieren:
<br>
1. Auf das <b>Teilen</b> Symbol klicken.
<br>
2. Auf <b>Zum Home-Bildschirm hinzufügen</b> klicken.
<br>
3. Auf <b>Hinzufügen</b> klicken.
</p>
{% endblock %}

@ -0,0 +1 @@
<h2>OFFLINE PAGE</h2>

@ -0,0 +1,10 @@
from django.urls import path
from django.views.generic import TemplateView
from . import views
urlpatterns = [
path("", views.home),
path("home/", views.home),
path('offline/', TemplateView.as_view(template_name="offline.html")),
path("install/", views.install)
]

@ -1,3 +1,11 @@
from django.shortcuts import render
from django.shortcuts import render, HttpResponse, redirect
# Create your views here.
def index(request):
return render(request, "app/base.html")
def install(request):
return render(request, "app/install.html")
def home(request):
return render(request, "app/home.html")

@ -0,0 +1,34 @@
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PWA_APP_NAME = 'PIOMINT'
PWA_APP_DESCRIPTION = "PioneerMinistryTime"
PWA_APP_THEME_COLOR = '#9FEDD7'
PWA_APP_BACKGROUND_COLOR = '#EDEAE5'
PWA_APP_DISPLAY = 'standalone'
PWA_APP_SCOPE = '/'
PWA_APP_ORIENTATION = 'any'
PWA_APP_START_URL = '/app/'
PWA_APP_STATUS_BAR_COLOR = 'black-translucent'
PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'app/static/app/js', 'serviceworker.js')
PWA_APP_ICONS = [
{
'src': '/static/app/images/appleicon.png',
'sizes': '160x160'
}
]
PWA_APP_ICONS_APPLE = [
{
'src': '/static/app/images/appleicon.png',
'sizes': '160x160'
}
]
PWA_APP_SPLASH_SCREEN = [
{
'src': '/static/app/images/splashscreen.png',
'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
}
]
PWA_APP_DIR = 'ltr'
PWA_APP_LANG = 'de'

@ -11,6 +11,8 @@ https://docs.djangoproject.com/en/5.1/ref/settings/
"""
from pathlib import Path
from .pwa_settings import *
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
@ -38,6 +40,9 @@ INSTALLED_APPS = [
'django.contrib.messages',
'django.contrib.staticfiles',
# DjangoFrameworkApps - Custom
'pwa',
# MyApps
'doc',
'app',

@ -15,8 +15,16 @@ Including another URLconf
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.urls import path, include
urlpatterns = [
# ADMIN PAGE
path('admin/', admin.site.urls),
# INDEX ROUTING
path('', include(("web.urls", "web"), namespace="web")),
path('', include('pwa.urls')),
# SUB-PATHS
path('app/', include(("app.urls", "app"), namespace="app")),
]

@ -0,0 +1,6 @@
from django.urls import path
from . import views
urlpatterns = [
path("", views.index)
]

@ -1,3 +1,12 @@
from django.shortcuts import render
from django.shortcuts import render, HttpResponse
# Create your views here.
def index(request):
return HttpResponse('''
<h1>INDEX WEB</h1>
</br>
<a href="app/install">Installieren</a>
</br>
</br>
<a href="app/">App Öffnen</a>
''')
Loading…
Cancel
Save

Powered by TurnKey Linux.