python manage.py startapp home<\/code><\/pre>\n<\/p>\n
Step 6: Register your app<\/h3>\n
<\/p>\n
\n Open `settings.py` in your project folder and add the following line to the `INSTALLED_APPS` list:\n <\/p>\n
<\/p>\n
INSTALLED_APPS = [
\n ...
\n 'home',
\n]<\/code><\/pre>\n<\/p>\n
Step 7: Create a view<\/h3>\n
<\/p>\n
\n In `home\/views.py`, add a simple view to render a template.\n <\/p>\n
<\/p>\n
from django.shortcuts import render
def index(request):
\n return render(request, 'home\/index.html')<\/code><\/pre>\n<\/p>\n
Step 8: Create the template folder and file<\/h3>\n
<\/p>\n
\n Within the `home` directory, create a `templates` folder, then create another folder within it called `home` and
\n add a file named `index.html`.\n <\/p>\n
<\/p>\n
<!-- home\/templates\/home\/index.html -->
\n<html>
\n<head>
\n <title>My PWA<\/title>
\n<\/head>
\n<body>
\n <h1>Welcome to My Progressive Web App!<\/h1>
\n<\/body>
\n<\/html><\/code><\/pre>\n<\/p>\n
Step 9: Map the view to a URL<\/h3>\n
<\/p>\n
\n Create a new file called `urls.py` in your `home` folder and add the following:\n <\/p>\n
<\/p>\n
from django.urls import path
\nfrom .views import index
urlpatterns = [
\n path('', index, name='index'),
\n]<\/code><\/pre>\n<\/p>\n
\n Finally, include this URL configuration in your main project `urls.py` file:\n <\/p>\n
<\/p>\n
from django.contrib import admin
\nfrom django.urls import path, include
urlpatterns = [
\n path('admin\/', admin.site.urls),
\n path('', include('home.urls')),
\n]<\/code><\/pre>\n<\/p>\n
Implementing PWA Features<\/h2>\n
<\/p>\n
\n Now that we have a basic Django application set up, let\u2019s implement the features that will turn our web application
\n into a PWA.\n <\/p>\n
<\/p>\n
Step 10: Create a Service Worker<\/h3>\n
<\/p>\n
\n A service worker acts as a proxy between your web application and the network. Create a new folder called `static` in
\n your app directory and then create a file named `service-worker.js` inside it.\n <\/p>\n
<\/p>\n
self.addEventListener('install', function(event) {
\n console.log('Service Worker Installed');
\n});
self.addEventListener('activate', function(event) {
\n console.log('Service Worker Activated');
\n});
self.addEventListener('fetch', function(event) {
\n event.respondWith(
\n fetch(event.request).catch(() => {
\n return new Response('You are offline.');
\n })
\n );
\n});<\/code><\/pre>\n<\/p>\n
Step 11: Register the Service Worker<\/h3>\n
<\/p>\n
\n Modify your `index.html` file to register the service worker.\n <\/p>\n
<\/p>\n
<!DOCTYPE html>
\n<html>
\n<head>
\n <title>My PWA<\/title>
\n <script>
\n if ('serviceWorker' in navigator) {
\n window.addEventListener('load', function() {
\n navigator.serviceWorker.register('\/static\/service-worker.js')
\n .then(function(registration) {
\n console.log('Service Worker registered with scope:', registration.scope);
\n }).catch(function(error) {
\n console.log('Service Worker registration failed:', error);
\n });
\n });
\n }
\n <\/script>
\n<\/head>
\n<body>
\n <h1>Welcome to My Progressive Web App!<\/h1>
\n<\/body>
\n<\/html><\/code><\/pre>\n<\/p>\n
Step 12: Create a Web App Manifest<\/h3>\n
<\/p>\n
\n The web app manifest gives your application metadata that allows it to be installed on devices. Create a file named
\n `manifest.json` in the `static` folder.\n <\/p>\n
<\/p>\n
{
\n \"name\": \"My PWA\",
\n \"short_name\": \"PWA\",
\n \"start_url\": \"\/\",
\n \"display\": \"standalone\",
\n \"background_color\": \"#ffffff\",
\n \"theme_color\": \"#282c34\",
\n \"icons\": [
\n {
\n \"src\": \"icon-192x192.png\",
\n \"sizes\": \"192x192\",
\n \"type\": \"image\/png\"
\n },
\n {
\n \"src\": \"icon-512x512.png\",
\n \"sizes\": \"512x512\",
\n \"type\": \"image\/png\"
\n }
\n ]
\n }<\/code><\/pre>\n<\/p>\n
Step 13: Link the Manifest in HTML<\/h3>\n
<\/p>\n
\n Reference the manifest file in your `index.html` file.\n <\/p>\n
<\/p>\n
<link rel=\"manifest\" href=\"\/static\/manifest.json\"><\/code><\/pre>\n<\/p>\n
Testing Your PWA<\/h2>\n
<\/p>\n
\n To test if your app is a PWA, you can use the Chrome DevTools. Here are the steps:\n <\/p>\n
<\/p>\n
<\/p>\n- Open your application in Google Chrome.<\/li>\n
<\/p>\n
- Right-click and select “Inspect” to open DevTools.<\/li>\n
<\/p>\n
- Go to the Application tab.<\/li>\n
<\/p>\n
- Check the Service Workers and Manifest sections for any issues.<\/li>\n
\n <\/ul>\n
<\/p>\n
Adding Offline Capabilities<\/h2>\n
<\/p>\n
\n To further enhance your PWA, you can cache assets for offline use. Modify the `install` event in your service worker to
\n cache necessary files.\n <\/p>\n
<\/p>\n
const CACHE_NAME = 'v1';
\nconst urlsToCache = [
\n '\/',
\n '\/static\/style.css',
\n '\/static\/icon-192x192.png',
\n '\/static\/icon-512x512.png',
\n '\/static\/service-worker.js'
\n];
self.addEventListener('install', function(event) {
\n event.waitUntil(
\n caches.open(CACHE_NAME)
\n .then(function(cache) {
\n return cache.addAll(urlsToCache);
\n })
\n );
\n});<\/code><\/pre>\n<\/p>\n
Conclusion<\/h2>\n
<\/p>\n
\n In this guide, we walked through the essentials of building a Progressive Web App (PWA) using Django, from initial setup
\n of the Django environment to implementing PWA-specific features like service workers and web app manifests. By combining
\n the capabilities of Django with the benefits of PWAs, developers can create modern, responsive, and engaging web applications
\n that enhance user experience across various devices and networks. With the ongoing evolution of web technologies,
\n embracing PWAs offers a promising path forward in web development, and Django provides a robust framework to help
\n realize that vision.\n <\/div>\n\n","protected":false},"excerpt":{"rendered":"
With the rise of modern web applications, the importance of Progressive Web Apps (PWAs) has become increasingly clear. PWAs blend the best of web and mobile applications, offering a seamless user experience through features like offline access, push notifications, and improved performance. When paired with Django, a powerful web framework for building robust web applications, […]<\/p>\n","protected":false},"author":2,"featured_media":3270,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[58],"tags":[76,290,88,126,121,611,175,74],"class_list":["post-3269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-development","tag-django","tag-guide","tag-meets","tag-modern","tag-pwa","tag-stepbystep","tag-web"],"_links":{"self":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts\/3269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/comments?post=3269"}],"version-history":[{"count":0,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts\/3269\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/media\/3270"}],"wp:attachment":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/media?parent=3269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/categories?post=3269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/tags?post=3269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}