I developed a small prototype in django with one model: Profile, and 2 templates with 2 views (a list of profiles, and an edit profile page), with a form in forms.py. I want to test creating a PWA with Django and this is the additional things I did: 1) pip install django-progressive-web-app, 2) added 'pwa' to installed apps, 3) added a render view for the base.html that will be using the service worker!
def base(request):
return render(request,'app/base.html')
4) added it to the urls:
urlpatterns = [
path(r'', profiles, name="profiles"),
path('user/<pk>', profile, name="profile"),
path('', include('pwa.urls')),
]
5) added this to recognise the service worker:
PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'posts/static/js', 'serviceworker.js')
6) added the tags:
{% load pwa %}
<head>
...
{% progressive_web_app_meta %}
...
</head>
7) and added this to a serviceworker.js file, situated in the app/static/js:
var staticCacheName = 'djangopwa-v1';
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(staticCacheName).then(function(cache) {
return cache.addAll([
'/base_layout'
]);
})
);
});
self.addEventListener('fetch', function(event) {
var requestUrl = new URL(event.request.url);
if (requestUrl.origin === location.origin) {
if ((requestUrl.pathname === '/')) {
event.respondWith(caches.match('/base_layout'));
return;
}
}
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
What happened is that the service worker is running under Chrome developer tool, but in the django console it displays this error: Not Found: /base_layout, and the homepage is accessible through the Offline mode, but the other path (/user) isn't. And Google Chrome's console displays this error:
The FetchEvent for "http://localhost:8000/manifest.json" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) # serviceworker.js:19
serviceworker.js:1 Uncaught (in promise) TypeError: Failed to fetch
Also, images are not being loaded.
What did I do wrong?
For the images, add the images url to the array passed to the cache.addAll method. Like so:
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(staticCacheName).then(function(cache) {
return cache.addAll([
'/base_layout',
'/static/img-1.png',
'/static/img-2.png',
]);
})
);
});
To ensure your css and js files load, also add their paths to the array.
Related
In my website I have a series of images that serve as nuxt links to game pages:
<template>
<NuxtLink :to="game.pageName">
<img :src="game.boxImage" :height="gamePanelHeight" class="elevation-4"
/></NuxtLink>
</template>
Each of those links draws its properties from a content markup file like this:
index: 3
boxImage: gameImages/box_image.png
title: game title
pageName: games/whatever
And they're loaded into the page like so:
<script>
export default {
async asyncData({ $content, params }) {
const games = await $content('games').sortBy('index', 'asc').fetch()
return { games }
},
}
</script>
Whenever I refresh this page. All of these images break until I navigate outside the page and come back. What's causing this issue and how do I fix it?
This is a static Nuxt application FYI. And it's being served through an AWS S3 bucket but I don't think that's what's causing this issue.
EDIT: Also the boxImage that's in gameImages/box_image.png is from the static folder.
asyncData is not a hook that is triggered upon reaching an URL or using a reload (F5), it is only triggered during navigation.
If you want it to work even after a reload, use the fetch() hook.
More info here: https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#options
Edit on how to write it with fetch()
<script>
export default {
data() {
return {
games: [],
}
},
async fetch() {
this.games = await this.$content('games').sortBy('index', 'asc').fetch()
},
}
</script>
I've deployed a simple web application named "ogagnage" with Flask and Heroku (gunicorn). It works perfectly in production and I try now to run it as a Progressive Web Application. Following Heroku instructions, I've created manifest.json and service workerfile (sw.js). Manifest file is recognized by my browsers but not service worker and i unfortunately don't understand why...
Manifest.json OK
sw not recognized
sw error message
Here is the structure of my project:
Directory tree
And here are the code added:
In views.py :
#app.route('/sw.js')
def sw():
return app.send_static_file('sw.js')
#app.route('/manifest.json')
def manifest():
return app.send_static_file('manifest.json')
#app.route('/app/static/app.js')
def app_js():
return app.send_static_file('app.js')
In sw.js :
console.log('Hello from sw.js');
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js');
if (workbox) {
console.log("Yay! Workbox is loaded 🎉");
workbox.precaching.precacheAndRoute([
{
"url": "/",
"revision": "1"
}
]);
workbox.routing.registerRoute(
/\.(?:js|css)$/,
workbox.strategies.staleWhileRevalidate({
cacheName: 'static-resources',
}),
);
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg)$/,
workbox.strategies.cacheFirst({
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
}),
);
workbox.routing.registerRoute(
new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
workbox.strategies.cacheFirst({
cacheName: 'googleapis',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 30,
}),
],
}),
);
} else {
console.log("Boo! Workbox didn't load 😬");
}
In app.js:
(function() {
if('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js')
.then(function(registration) {
console.log('Service Worker Registered');
return registration;
})
.catch(function(err) {
console.error('Unable to register service worker.', err);
});
navigator.serviceWorker.ready.then(function(registration) {
console.log('Service Worker Ready');
});
});
}
})();
In my base template:
<script type="text/javascript" src="../static/js/app.js"></script>
And my git:
Github project
Hope someone could help me, it would be a beautiful Christmas present.
Tx
You also need to send the manifest.json file
#app.route('/manifest.json')
def manifest():
return app.send_from_directory('static', 'manifest.json')
If you'd like a complete example, I have created a Flask PWA before. Here is the repository: https://github.com/MurphyAdam/Flask-chatbot
I've solved the problem after changing #app routes in views.py and relative path to go to sw.js in app.js (cf code updated)
Now , my service worker is working:
Service Worker Ok
I'm trying to create a web app for my final school project and i decided to use CKEditor5 to create rich test posts i managed to integrate Ckeditor with Django and, i can successfully create post from the admin aria and add images but when i wanted to do the same thing from the frontend (react), i faced some problems that i didn't know how to solve .
so when i try to upload an image i recive a popup in the browser with the message ** can't upload the file **
this is my code for the editor (it works just fine with text )
<CKEditor
editor={ClassicEditor}
data=""
onInit={(editor) => {
// You can store the "editor" and use when it is needed.
console.log("Editor is ready to use!", editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
this.setState({ content: editor.getData() });
}}
onBlur={(event, editor) => {}}
onFocus={(event, editor) => {
console.log("Focus.", editor);
}}
config={{
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: "http://localhost:8000/media/uploads/",
options: {
resourceType: "Images",
},
},
}}
/>
the url path that i but in the uploadUrl is the path where i put media when using the admin ckeditor that i integrated sepreatly i followed i tutorial to do it
this is the variables that i set in the sittings file
STATIC_URL = '/static/'
STATIC_ROOT = 'static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = 'media/'
CKEDITOR_UPLOAD_PATH = 'uploads/'
so i think that i should not use the same path because i can not POST to this url i get in the local host console an error
Forbidden (CSRF token missing or incorrect.): /media/uploads/
[22/May/2020 08:26:49] "POST /media/uploads/ HTTP/1.1" 403 2513
(i don't use react-create-app server i'm loading react as a django frontend app in port 8000 )
After searching, the solution is that you pass the csrf_token within the headers of your request
So here we need to get first the csrf_token from django session and then pass it to the server
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
The function above will get extract the csrf_token so you can call it and store it in a const
const csrftoken = getCookie('csrftoken');
and then you add the headers to your call
uploadUrl: "http://localhost:8000/media/uploads/",
options: {
resourceType: "Images",
},
headers: {
'X-CSRF-TOKEN': csrftoken,
}
try that and let me know if that does not work.
As an alternative your can try to wrap your function with the decorator for csrf_exempt to see first is that will work, import it first
from django.views.decorators.csrf import csrf_exempt
#csrf_exempt
def my_view(request):
I am trying to use ReactJS to build a simple website that pulls data from my Django REST Framework API. The issue I am running into, is that my data is not being output by React. I am certain that my Django backend is running flawlessly. I get no errors when running it, and can view my API data via "http://127.0.0.1:8000/api/".
Here is my frontend ReactJS code:
import React, { Component } from 'react';
class App extends Component {
state = {
usernames : []
};
async componentDidMount() {
try {
const res = await fetch('http://127.0.0.1:8000/api/');
const usernames = await res.json();
this.setState({
usernames
});
} catch (e) {
console.log(e);
}
}
render() {
return(
<div>
{this.state.usernames.map(item => (
<div key={item.id}>
<h1>{item.username}</h1>
</div>
))}
</div>
);
}
}
export default App
I have tried updated my CORS_ORIGIN_WHITELIST via settings.py and includes all variations of localhost.
When scripting with Python, I am able to make a request and retrieve my API data. This is the output:
[{'username': 'testname', 'created_at': '2019-12-06T00:03:50.833429Z'}, {'username': 'testname2', 'created_at': '2019-12-06T00:04:01.906974Z'}, {'username': 'testname3', 'created_at': '2019-12-06T00:04:05.330933Z'}, {'username': 'testname4', 'created_at': '2019-12-06T00:04:08.144381Z'}]
And though no ID is present in the output (Which I'm not sure why) I can still access the correct data by making a request like this: "http://127.0.0.1:8000/api/3/"
Any help is appreciated.
Set Access-Control-Allow-Origin: to * just for the purposes of local development. For security reasons you don't want to do that in production, but doing it on your local machine while you're dev'ing is fine. See here if you are unsure of how to: techiediaries.com/django-cors
To solve this issue, I had to install django-cors-headers. This can be done via pip install django-cors-headers
After that, I had to add the following to my settings.py file:
INSTALLED_APPS = [
##...
'corsheaders'
]
MIDDLEWARE_CLASSES = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.BrokenLinkEmailsMiddleware',
'django.middleware.common.CommonMiddleware',
#...
]
CORS_ORIGIN_ALLOW_ALL = True
I am trying to implement navigation in Ionic 2. I have tried with DeepLinking and i got the result, but '#' sign is comming in URL.
When '#' sign will come in URL then Google Analytic will not recognize the website, that's why i have tried to implement navigation in different ways like Angular 2 Routing, that supports both (HTML5 or hash URL style), but unable to implement in Ionic 2.
Ex- http://localhost:8100/#/registration - This one working fine but i want without '#'.
Like http://localhost:8100/registration
Thanks for help
I put in a PR for #ionic/app-scripts 3.2.5 to remedy this:
https://github.com/ionic-team/ionic-app-scripts/pull/1545
In the meantime you can edit some project and dependency files to enable it:
src/app/app.module.ts:
IonicModule.forRoot(MyApp,
{
locationStrategy: 'path'
},
{
links: [
{ component: RegistrationPage, name: 'registration', segment: 'registration' },
{ component: LoginPage, name: 'login', segment: 'login' },
{ component: HomePage, name: 'home', segment: '' }
]
})
src/index.html:
<head>
...
<base href="/" />
...
</head>
node_modules/#ionic/app-scripts/dist/dev-server/http-server.js:
function createHttpServer(config) {
var app = express();
app.set('serveConfig', config);
app.get('/', serveIndex);
app.use('/', express.static(config.wwwDir));
app.use("/" + serve_config_1.LOGGER_DIR, express.static(path.join(__dirname, '..', '..', 'bin'), { maxAge: 31536000 }));
// Lab routes
app.use(serve_config_1.IONIC_LAB_URL + '/static', express.static(path.join(__dirname, '..', '..', 'lab', 'static')));
app.get(serve_config_1.IONIC_LAB_URL, lab_1.LabAppView);
app.get(serve_config_1.IONIC_LAB_URL + '/api/v1/cordova', lab_1.ApiCordovaProject);
app.get(serve_config_1.IONIC_LAB_URL + '/api/v1/app-config', lab_1.ApiPackageJson);
app.get('/cordova.js', servePlatformResource, serveMockCordovaJS);
app.get('/cordova_plugins.js', servePlatformResource);
app.get('/plugins/*', servePlatformResource);
if (config.useProxy) {
setupProxies(app);
}
app.all('/*', serveIndex);
return app;
}
The line app.all('/*', serveIndex); is what will redirect any 404 file or directory not found errors to index.html. The locationStrategy: 'path' setting can then work normally with deeplinks and redirects under these circumstances.
Try to use pathLocationStrategy instead of HashLocationStrategy.
Add this in app.module.ts
import { LocationStrategy,
PathLocationStrategy } from '#angular/common';
...
#NgModule({
...
providers: [
{
provide: LocationStrategy,
useClass: PathLocationStrategy
},
...
Or other way is
IonicModule.forRoot(MyApp, {
locationStrategy: 'path'
})
And make sure to have a valid base href.
So here is the list of things which I did. Hope this helps.
We need to remove # in path of every url because Google Analytics rejects the urls with # in them. In App Module , add {locationStrategy: 'path'} to your App Module as follows :
IonicModule.forRoot(MyApp, {
locationStrategy: 'path'
})
2 .Now # is removed from the url. But when you refresh or directly access the url, this wont work because this is expected behaviour for any SPA. When you refresh the page , server tried to find the page at the location mentioned. As stated by #Parth Ghiya above For eg: if you hit localhost/abc , then server tries to find abc/index.html which actually doesn't exist.So to resolve this , you have wrote configurations on my server i.e to point every request to index.html . I am using node express server to deploy the app. Use the following code to route every request to index.html -
var express = require('express');
var path = require('path')
var app = express();
app.use(express.static(path.resolve(__dirname, "www")));
app.use('/*', function(req, res){
res.sendFile(__dirname+ '/www' + '/index.html');
});
app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function() {
console.log("listening to Port", app.get("port"));
});